自分なりにデザインを言語化してみる
①気づき
②深掘り
③学び
◾️画像固定
①気づき
左画像固定し、右本文スクロール
②深掘り
画像を印象つける
③学び
画像を印象つける
◾️動画
①気づき
１pxづつ動く横スクロール、角はんに動画、メッセージ、切り抜き写真
②深掘り
いろんな想いが流れて没入感がある。
③学び
企業サイトのトップに使える。
◾️背景スクロール
①気づき
スクロールしながら青いグラデーションが変化し、白抜き文字を引き出させる。
②深掘り
水に浮いている感じが表現できる
③学び
ふわってしたいときに使う
◾️動画
①気づき
動画のコピーが変わり、最後に会社ロゴ表示し、ストーリー性がある。
②深掘り
会社の内容がわかり、メッセージ性がある
③学び
企業サイトのトップに使える。
◾️ハンバーガーメニュー
①気づき
PCでもメニューがある
②深掘り
使いやすい
③学び
階層が深いサイトにオススメ
◾️文章量
①気づき
多い
②深掘り
説得力がある
③学び
専門的な分野は文字が必要
◾️ハンバーガーメニュー
①気づき
全面にメニュー表示
②深掘り
全面を広々使える。
③学び
最近のスタンダード。
◾️スクロール背景
①気づき
スクロールで背景、書体の色が切り替わる
②深掘り
ダイナミックに切り替わる動きが印象的
③学び
ダイナミックに切り替えたい場合に有効
◾️ECサイト
①気づき
BASEを使用している
②深掘り
綺麗なデザイン
③学び
費用がない場合はBASEもありかも？
◾️色彩
①気づき
くすんだ色合い。写真の色に利用
②深掘り
落ち着きが感じられる。写真の色と合わせてあり、統一感が感じられる。
③学び
落ち着いた雰囲気には色をくすませる。
◾️書体
①気づき
ポップ調の英語。縁取りもじ。丸書体
②深掘り
古くて可愛い書体。カフェらしい書体。
③学び
BtoCのサイトには、ポップな書体が効果的。
◾️スクロールアニメーション
①気づき
スクロールするたびにアニメーションが変化する
②深掘り
ユーザーの動きに合わせて変化するので楽しめる
③学び
ユーザーが楽しめるサイトには、スクロールアニメーションを追加
◾️テキスト
①気づき
英文字の大きい背景が縦に表示
②深掘り
縦書きにすることで読ませるよりデザイン的になじませる。
③学び
英語文字で遊びたい場合に使用する。
◾️パララックス
①気づき
背景固定の場合にCTAがある
②深掘り
印象的にした背景の上のボタンは、要重要なリンクを置いてあり、押したくなる。
③学び
CTAで期待させるようなボタンは背景をパララックスで表示が良い。
◾️行間、時間
①気づき
文字14px、行間が３倍、letterspaceingもあり
②深掘り
文字を小さく、行間ゆったり、字間があると優雅に見える。
③学び
ゆったり見せたいデザインいオススメ
◾️テキスト
①気づき
見出しに縦書きになっている。アニメーションがパラパラ、スライドと２種類ある。
②深掘り
縦書きで日本の食材を意識しているのと、パラパラアニメーションとイラストで可愛らしさ、スライドで事務的な効果と色々使い分けている。
③学び
タイトルは動きがる方が楽しめるので、取り入れていく。
◾️キャラクター、イラスト、写真
①気づき
ロゴを意識した手書き風のキャラクター、写真切り抜きと会社の雰囲気のイラストをを配置
②深掘り
アニメーションを加えて可愛らしを増幅している。写真とのバランスともよく調和している。
③学び
ロゴマークを意識した手書き風のキャラクター、イラストなど配置することで、親近感が一気増幅する。
◾️ハンバーガーメニュー
①気づき
画面下に配置
②深掘り
目線考慮すると、下の方が気づきやすい
③学び
使いやすさ重視の場合は下でもOK
◾️ハンバーガーメニュー
①気づき
線が２本でシンプル
②深掘り
スタイリッシュで×にもアニメーションしやすい
③学び
スタイリッシュなサイトにはオススメ
◾️テキスト
①気づき
英字は大きく目立たせ、日本語は小さく横幅も狭い。
②深掘り
テキストがメリハリがあり、日本語横幅が狭いのでレイアウトも雑誌風にできる
③学び
スタイリッシュなサイトにはオススメ
◾️写真と背景
①気づき
写真が大きく、背景に黒、またはベースカラー。または白背景に写真切り抜き
②深掘り
コントラストが効いてて写真が引き立って見える。
③学び
スタイリッシュなサイトにはオススメ
◾️ハンバーガーメニュー
①気づき
ハンバーガーメニューのアイコンが三点リーダーと正円で表現されている。ロゴのiの丸と同じ
②深掘り
ハンバーガーメニューは線だけは古いかも？いろんな形があって良いし、ロゴのiの丸を意識して全体のデザインを意識している。
③学び
ハンバーガーメニューにバリエーションを！ロゴのデザインを意識して全体をまとめる。
◾️背景色
①気づき
コーポレートカラーが青から紫へのグラデーションにさりげない幾何学グラデ。
背景に線画のマトリックスを敷いている。
空きが広くて、大きめに作成している。
②深掘り
青だけだと単調になるので、紫を添えることで、情熱的に見え幾何学で変化を見せている。
背景に線画のマトリックスで知的なイメージを醸し出す。
③学び
背景は単純なものではなく、変化があったほうが面白い。空きは広くゆったりと
◾️背景文字のアニメーション
①気づき
背景に英文字のアイキャッチのアニメーションが流れている
②深掘り
サブメッセージであまり意味がないが動きがあり面白い。
③学び
アクセントを与えるため、文字アニメーションを使う。
◾️写真
①気づき
写真の周りに余白がある
②深掘り
白が額縁となり、写真を引き立てる。雑誌風のデザイン
③学び
写真が多い場合は、余白を生かしてレイアウトする。
◾️レイアウト
①気づき
画面の左半分タイトルエリア、右半分コンテンツエリア
②深掘り
タイトル周りのホワイトスペースが洗練さを生み出す。
行の折り返し文字数が短く済み、読み易い。
③学び
左右にエリアを分けることで最適な文字数で折り返しが可能となり、洗練されたデザインに
◾️パララックス
①気づき
大きい写真に視差を適応している。
②深掘り
印象的な写真にパララックスを適応することで印象的で奥行きを感じることができる。
③学び
特に強調したい写真、背景画像などにパララックスを使うとより印象深い効果が醸し出される。
◾️メインスライド
①気づき
全面画像の写真に半透明なグレーを敷いて白文字のコピーを切り替えながら配置
マークだけコーポレートカラーが使われている
②深掘り
マークが目立って印象に残る。プログレスバーで画面の切り替えがあるため、動きあり、単調にならない。
③学び
静止画のスライドの場合は、切り替わるまで止まって見えるので、常に動くanimationがあると効果的。ワンポイントの色も効果的
◾️背景
①気づき
背景色ベタの中に白背景を内側に入れている。
②深掘り
額縁みたいな効果があり、メリハリが生まれる。
③学び
デザインが単調にならない。しかも白背景なので安心してみれる。
◾️カールセル
①気づき
スマホの場合は左右にカードの一部が見れる
②深掘り
カードの一部が見れることでスライドできると認識させる
③学び
スマホでより多くの情報を見せる時に役立つ
◾️アニメーション
①気づき
ゆっくり動くアニメーション印象的
②深掘り
フアフア感で優しい感じを醸し出す
③学び
優しい感じを出したいときは、ゆっくり動くアニメーションで演出する。
◾️色
①気づき
水色と赤色が印象的。
②深掘り
水色と赤色は、女の子に人気ある色だと思う。
③学び
ターゲットが女子の場合は水色と赤色の色合いを提案する。
◾️レスポンシブ
①気づき
スマホでコンテンツが最適化されている。
②深掘り
ターゲットが若い女子ということでスマホユーザーに特化したデザイン
③学び
ターゲットが若い場合は、スマホのサイズでコンテンツを作成し、PCの場合は背景デザインを別に用意する
◾️アニメーション
①気づき
SCROLLリンクあり動いている
②深掘り
全面画像だが下にコンテンツがあることを示している。
③学び
全面画像の時はSCROLLリンクを配置する。
◾️CTA
①気づき
右下に配置している
②深掘り
目線を意識して右下に配置してある。
③学び
CTAは右下、中央に配置が望ましい。
◾️サムネイル
①気づき
正円で写真が切り抜かれている。
②深掘り
丸で切り抜くとおしゃれな感じに
③学び
正円でサムネイルすると望遠鏡で覗いている感じがして目線を促すことができる
◾️ハンバーガーメニュー
①気づき
正円にMENU
②深掘り
直感的でわかりやすい
③学び
公共系などわかりやすさを求められるサイトにオススメ
◾️LINEアニメーション
①気づき
LINEが、伸びるようなアニメーション
②深掘り
スタイリッシュに見える
③学び
動きの必要なサイト
コメント