ばーーるとりはつてん
💫
baard-tokyo
昨年10月オープンの「BAARD 理髪店」のホームページを制作しました。
baard.tokyo
ロゴ・映像・デザイン・開発とトータルで任せていただきました。店舗の施工前から打ち合わせて、制作したロゴが実物になる(看板になる)という体験は新鮮でした!
❤️
128
2020/05/03 05:37
🎨
Colors used
📜Commentary

2019年秋、「BAARD(バーールト) 理髪店」は葛飾区亀有にてオープンしました。


今も1,2ヶ月に一度はカットとシェービングに伺うのですが、丁寧にしていただける施術がたいへん魅力です。いつもありがとうございます。


本サイトのURLはこちらです。 baard.tokyo


お店の施工前から打ち合わせて、ロゴのご提案から映像、そしてホームページを制作させていただきました。

本サイトでは静止画を一切使わずに、挿絵はすべて動画としました。(なんと贅沢に...!)


結果として格段に伝えられる情報量を増やすことに成功しているように思います。


サイトをいち利用客として眺めてみると、やはり動画の力はまるで魔法のようです。特にスタッフ紹介などは(お気に入りです)、わずかな動きから伝わることが豊富にある気がして、そんなふうに感心するばかりです。


施工直後の2019年10月に撮影をおこないました。

モク焚いてる
❤️
1
2019/10/23 02:40

技術としては数年ぶりのReactで、関数コンポーネントやReact Hooksの登場など、大きく変わっていました。(それまではVueで一本化していましたが、ここで方向転換をしました。)


フレームワークにGatsbyを使用しました。

またTypeScriptを初めて採用したプロジェクトでもありました。


手探りの状態で開発していたため、個人的には反省すべき点の多いコードですが、デザインとしては特に縦型タブバーやページトランジションなど、こだわりを詰め込むことのできた作品ではあると今では思います。

本日の機材たち
❤️
3
2019/10/23 08:06
🛠Production details

制作期間: 2019/09 ~ 2020/01/17


マシン環境: iMac Pro (2017) 8-Core 3.2GHz Intel Xeon W


ツール: VSCode, Terminal.app, Illustrator CC


開発言語: JavaScript, TypeScript, Node.js


主要ライブラリ:

  • @emotion/core ^10.0.15
  • @emotion/styled ^10.0.15
  • @fortawesome/pro-duotone-svg-icons ^5.10.2
  • @fortawesome/react-fontawesome ^0.1.4
  • gatsby ^2.15.15
  • google-map-react ^1.1.5
  • gsap ^2.1.3
  • react ^16.11.0
  • unstated-next ^1.1.0


サービス: Netlify, Firebase Hosting, Google Domains, GitHub, Google Fonts, Font Awesome


リポジトリ: soichiro-nitta/baard.tokyo

🏅Awwwards

ウェブデザインアワード「Awwwards」において、以下の各賞を受賞しました。


  • Mobile Excellence
  • Honorable Mention


Baard.Tokyo - Awwwards Nominee

Baard.Tokyo - Mobile Report

今更ですがAwwwardsよりMobile Excellenceをいただきました👏🏻。アナリティクスをみるとAwwwardsからの流入は思いの外かなり多い。(お客さんにはならないでしょうけど。)
awwwards.com/sites/baard-to…
❤️
12
2020/10/05 04:26
🥰
Loved by design people
baard.tokyo
これめっちゃいい、、ってか凄すぎる。
❤️
2
2021/01/26 12:41
@soichiro_nitta 素敵なUIだと思いました!メニュー開いたときの背景映像が好きです
❤️
1
2020/05/03 06:13
おぉすごい良いサイトデザイン。シンプルなのにこんなに親しみやすさって伝わるんだなぁ。
baard.tokyo
❤️
26
2020/08/27 07:36
@whispervoiceday 今年見たサイトの中でトップかもしれない…
❤️
2
2020/08/27 07:39
@whispervoiceday スタッフのところとか少し動きがあって人柄が伝わるよね。フォントや余白も好き!
❤️
2
2020/08/27 09:04
@soichiro_nitta めちゃめちゃめちゃめちゃかっこいいす!!!動画こんなに埋め込んであるのにサクサク快適ですごいーーーーデザインもおしゃれで見やすくて可愛くて最高です……おつかれさまでした〜〜〜!!
❤️
2
2020/05/03 13:52
おわり。
© 2021 Nitta.Studio Inc.