またもや久しぶりの投稿です。育休が終わり仕事に復帰しましたが、自分の力不足に反省の毎日です。
デザイナーになり5年が経とうとしていますがまだまだ勉強しなきゃと思う日々。
子育ての合間でのインプットはなかなかハードですが、隙間時間にトレース＆レビューしていきたいと思っています。
今日は尊敬してやまないM-HANDさんが制作したノムラクリーニングさんのWEBサイトをチェック。
（本当はちまちまトレースしてたのですが、操作を誤ったのかデータが消えてしまい今回はスクショ）
概要
↓M-HANDのアートディレクター岩松さんのお言葉
スタイリッシュでカジュアルな印象を大切に、
服も気分もキレイになるような前向きな雰囲気を表現。
清潔感の中に親しみやすさを感じるサイトを目指しました
清潔感：白ベースの背景、見出しのグラデーション、余計な装飾をあえてなくす
親しみ：角丸や、キャラクター、ベタ塗りは避けて、ボーダーを使用するなど
コンテンツのmax-widthは1100px
ナビゲーション
FV
タイポをグラデーションにすることでシンプルなデザインの中でよく映える。誠実さの中に爽やかさが見れる。 新着情報の位置も邪魔にならないちょうどいいバランス感。スライダーになってることで新着情報と無意識に認識できる。(動いてないと見落としそう)
店舗検索
ピンクの円はボーダー背景で囲むことで単調さを避けている。ここをグラデやぼかしにするとサイトの印象から離れる。マップもボーダーにし統一感やまろやかさ(?)が出ている。作成してみて分かったけど、対象以外の県境は消して四隅は透過グラデ。細かな配慮が美しさを生み出している
ABOUT
背景は空に変わりガラッと雰囲気が変わる。空の柄がクリーニングの清潔さ・洗濯を彷彿させる。左の流れる写真たちは近年よく見るデザイン。たくさんイメージを伝える際に最適なレイアウト。
PICK UP
同一単色背景が続く場合は線で区切るのが王道だけど効果的。
ただバナーを並べるのではなく右に透過グラデを敷くだけでサイトの丁寧さ→会社の誠実さが伝わる。
サービス内容
・項目が多いのでメイン・サブで見栄えを変える
・特に伝えたいポイントは丸アイコンをしようしアピール
・シャドウがベースカラーの青味
特徴
こういったデザインはつい画像に暗いフィルターをかけて白テキストを敷きがちだが、背景に白グラデーションをかければテキストの視認性は十分保てる。清潔や爽やかさを演出したい時に使える技
細かいところもたくさん参考になったこちらのサイト！
インプットインプット〜〜〜〜〜