デザイン
WEBデザイナーが参考にしたいWEBサイト【2019年2月版】
2019年02月17日 8:00
おはようございます！社員Aです👩
今回は、WEBデザイナーが参考にしたいWEBサイトの【2019年2月版】を更新します！
田中屋せんべい総本家
安政6年に創業した老舗のおせんべい屋さんです。
メインビジュアルでは、職人がおせんべいを作る写真が印象的です。
また、スクロールしていくとふわっと横から出てくるアニメーションが、柔らかい印象をもたせてくれます。おせんべいへのこだわりを感じさせつつ、トレンドデザインを駆使しているのがすごいなと思いました。
和-水都饌菓
スクロールしていくと、写真と和菓子の切り抜きがふわんとアニメーションで浮き出てきます。見た途端に「なにこれ食べたい…」ってなります。
写真と切り抜きの組み合わせの発想がなかったので、これはユーザーにより強く認知してもらうために良いテクニックだなと思いました。
ビューティー＆ボディケア メロウ
ビューティーサロンさんのホームページですが、余白の使い方の勉強になります！余白を存分に使っている分、上下隅にメニューやロゴを配置してすっきりと見やすい印象だけじゃなくユーザビリティも考えて作られているサイトだと思います。
また、ところどころで使われている独特なシェイプが、シンプルさの中に遊び心を感じられて好きです。
チョコカスタード アップルパイ | RINGO
今月は食べ物のサイトばかりで申し訳ないです！でもつい美味しそうで…（笑）
こちらのサイトは、スクロールで背景のパターンが切り替わり、写真がアニメーションで登場します！スクロールアニメーションを楽しみながら見ることができるサイトです。
それに加えて可読性も良く、写真と文字両方からアップルパイへのこだわりを感じさせてくれるサイトです。
福岡正信自然農園
縦書き文字と横書き文字を両方使っているのに、ごちゃごちゃさせず逆に統一感を感じさせてくれるサイトです。文字サイズも重要だと思います。
また、ノングリットレイアウトとグリットレイアウトを両立させていて、デザインへの繊細さを感じます！
イーコンセプト株式会社
中間にあるカルーセルスライダーの部分がとにかくすごいです。英文字が透過されているのですが、写真の色味とは違った色味で透過されています。さらに、マウスオンすると、文字間隔が広がるのも面白いですね。
天草 天空の船
グローバルメニューが下にあり、さらに斜めにカットされているという斬新なデザインです。
また、メインビジュアルのスライダーとグローバルメニューが連動しており、今どの写真が表示されているのか直感的にわかるのも素敵だと思いました。
「展望」「食」「空間」の3つのカテゴリを、写真とインパクトのある大きさで打ち出しています。
株式会社上月工芸社
左側も最上部も固定をしているのに、煩わしさを感じさせないサイトです。写真を多く使っているのに、可読性も高くクオリティが高いことが伺えます。
落ち着いた雰囲気で、伝統を感じられるのも素敵ですね。
笹川薬局
使われている写真やフォントもそうですが、ところどころで見られる曲線が柔らかい雰囲気を助長してくれている気がします。
また、上部で店舗が探せるのでユーザビリティの高さも感じます。
関連記事
この記事を書いた人
社員A
入社8年目。フロントエンドエンジニア・デザイナーの社員Aです。 小動物が好きで、デグー・チンチラと暮らしています！トレンドの情報を発信できるようにがんばります☺
