あ〜2日間抜けていました。
【Webデザイン】TOYOTA Connected Design
イラストと手書き文字がとても印象的なサイトです。
1.練られたデザイン
こちらは、今回のサイトの制作秘話noteを拝読して書いています。
さまざまなバックグラウンドを持った経験豊富なメンバーが揃うTCデザイン。
よりTCデザインらしさをお伝えできるロゴにしたい、という想いから、さまざまなパターンでロゴのデザインを作成。
と、ロゴ案の段階でかなり検討されていたことが分かります。
TCデザインのメンバーの手書き文字を大量に集め、フォントの素材として使う案や、デザイン組織らしいスタイリッシュでシャープな案など、多くのパターンからロゴデザインを検証していきました。
検討の具体的な方法は、上記となっています。
コーポレートサイトは会社一丸となって決めており、まとまった組織かつデザインに関して真剣に考えているんだなと感じました。
最終的に少し緩めなデザインになりました。
ただそれにも理由があり、
少し不完全で、出来上がりすぎていないところが良い
というデザイン部長からのフィードバックがありました。
寛容で発展途上の組織であることを象徴する、素敵なエピソードだと感じた出来事でした。
「デザイン部長」のフィードバックを読み、なるほどな〜と頷いてしまいました。確かにシャープなデザインって、言い方を変えると完成系で発展する余地がないとも取れる気がします。「少し不完全で〜」は、会社のことをよく知っていないと出てこない視点だと思いました。
個人の見解ですが、成長の過程を提供するAKB・坂系のアイドルと完成系を提供するXG・K-POP系のアイドルのデザイン的なアプローチも少し異なっている気がしますし、、、良いデザインは背景も加味してデザインを行うのかな〜と考えました。
2.配色がシンプル
配色は黒・赤(TOYOTAの色)を積極的に使用しています。赤以外をシンプルな無機色にすることで、逆に赤を目立たせ会社のイメージを確立しているように思います。
またMembersページでは赤みがかった写真を使用しており、サイトのデザインとの統一感を図っているように見受けられます。
3.見やすいUI
こちらスマートフォンで見た時のサイトですが、従業員がずらっと並んで表示されとても見やすいと感じました。
加えて、各従業員の詳細ページへのリンクを調べました。それは1従業員につき縦横約130pxほどだったので、タップした後に次のページに遷移するのもスムーズでした。
ちなみにモバイルデバイスにおけるリンク(ボタン)のサイズは、縦幅36px～48pxを基準にしタップエリアは最低でも縦幅48pxを確保した方が良いとのことでした。
参考サイト
最後に
この3連休は手を動かしまくれたら良いな...