ビジュアルで見る2018年webデザイントレンド☆デザイナー陣のオススメはこれだ！

キーワード：

Root-Sea Plusの人気記事である「デザイントレンド予測」。
さぁて2018年版を書こう！となった時に、澤田は考えました。

「どうせやるなら、その技法を使った作例をお見せしたほうが、親切だしおもしろくない？」

そんなわけで、ルート・シーのデザイナー5人が集まって、作ってみましたよ！
元デザイナーで現在ディレクターの上田による難易度・オススメ度・ひとことコメントもご参照ください！

小森のオススメ：タイポグラフィ

タイポグラフィとは、文字の大きさやフォントの選択などの文字まわりのデザインのことです。
近年フラットデザインが普及したこともあり、装飾を抑えつつも個性やメッセージ性を高めるためにタイポグラフィにこだわったサイトが増えています。特に、デザインのメイン要素としてフォントを大きめに配置したり、アクセント的に手書き文字を使うのがトレンドです。
タイポグラフィひとつで個性や親近感を演出することができます。

こんなサイトに良いかも！？

コーポレートサイト
採用サイト
商品ランディングページ（LP）

キャッチコピーやブランドイメージを印象付けやすいので、メッセージ性の高いサイトにオススメです。

上田Dのひとこと: 難易度：☆／オススメ度：☆; ☆1つなのは「オススメしない」というわけではなく、フォントを扱って表現する以上は「息を吐くようにタイポグラフィを取り入れたい」という念をこめております。タイポグラフィ最高！

槇のオススメ：ホワイトエッジ＆レイヤードタイトル

最近はwebにも余白を効果的に使った自由なレイアウトが許容されています。誌面やポスターで良く使われている手法ですが、メリットは、写真と文字をずらして配置することで飛び出した文字に視線が行きやすく注目度が高まる点です。また、余白が抜けの効果を生むので圧迫感がなく、すっきりした印象を与えます。

他にも、写真を完全に背景画像扱いにしないので、キャッチコピーと写真の両方を生かすことができ、かつ、画面にリズムが生まれ、視線の回遊が促されます。

こんなサイトに良いかも！？

採用サイト
新商品のランディングページ（LP）
ファッションやコスメ、インテリアなどのサイト

粋ですっきりオシャレに魅せたい時にオススメです。

上田Dのひとこと: 難易度：☆／オススメ度：☆☆; ちょっとしたバランスの違いで見た目の印象が大きく変わってくる繊細な表現です。これをしっかりと取り入れているサイトはとても垢ぬけた印象になり、写真も原稿もバランスよく見やすくなっていますね！私が最近一番注目している表現です。

古川のオススメ：デュオトーン

「Duo(2つの)」「tone(色)」とは、特定の二つの色を使用した色遣いのことです。この手法を用いるとユーザーに強いインパクトを与え、印象に残るビジュアルを作ることができます。
ビビッドなカラーは力強い印象に、パステルカラーを用いると個性的でありながらも主張し過ぎないお洒落な印象に。作例ではパープル→イエローのグラデーションを重ねています。

こんなサイトに良いかも！？

デザイン事務所
アーティストのオフィシャルサイト

個性を押し出したいとき、特にメインビジュアルなど、ここぞ！というポイントで使用するのがオススメです。

上田Dのひとこと: 難易度：☆☆／オススメ度：☆☆; 表現はシンプルながら、二色の組み合わせで無限の可能性が出せそうですね！イメージの刷新を表現したり、季節感を表現したりと色々な場面で使えそうだと感じます。

澤田のオススメ：ブロークングリッドレイアウト

ブロークングリッドレイアウトとは、グリッド＝格子状に整列させた要素をあえて一部崩して配置することで、画面に強弱を作る手法です。伝えたい情報の重要度を視覚的に訴求したり、静的な画面でもインパクトを作ることができます。

こんなサイトに良いかも！？

新商品、新サービスのご案内ランディングページ（LP）
コーポレートメッセージを伝えるブランドコンテンツ

「これだけは覚えて帰ってください！！」という、伝えたいモノがあるときや、「全面リニューアルは厳しいけど、サイトの印象を変えたいなあ」という時にオススメです。

上田Dのひとこと: 難易度：☆☆／オススメ度：☆☆☆; 自身で画面設計をする際、整然としたレイアウトで設計しがちなので…こういった少し崩す発想をデザイナーさんに取り入れていただけるとありがたいですね！今後提案してみたい！という意味をこめて☆3つにしています。

安田のオススメ：ローディングアニメーション

一言で表せば「ユーザビリティ向上」のための手法です。（ユーザーにとって許容できる待ち時間は4秒と言われています）
アニメーションを用いることでユーザーの注意を引き、ローディングの待ち時間によるストレスの緩和と離脱率を抑えます。少し凝ったアニメーションにすることで、サイトの世界観を印象付けることも可能です。

こんなサイトに良いかも！？

フルスクリーン、背景動画など、読み込みに時間がかかるサイト
シングルカラムレイアウト、縦に長いランディングページ（LP）

細部にもこだわりたいサイトにオススメです。特に、ローディングが4秒を越える場合はプログレスバーのアニメーション（ローディングの進捗を見せる）を用いると効果的です。

上田Dのひとこと: 難易度：☆☆／オススメ度：☆☆☆; ローディングアニメーションを見かけると、手間の中に工夫と気遣いを感じます。特にアニメーションの動きとサイトのコンセプトがマッチしていると、してやられた感がありますね！

槇のオススメ：カスタマイズグラフィック

シンプルなUIにオリジナリティを加えるべく、写真撮影に力を入れたビジュアルを用いるのが主流になっています。
しかし、既存の素材を使用すると、どうしても「その業界のイメージ」に合わせた汎用的なものになってしまい、構図や印象が似通ってしまいがちです。

そこで、自社ならではの個性や世界観をアピールするために、作家さんの描き下ろしイラストを取り入れたサイトが増えてきました。
ブランディング効果を上げるためにも、オリジナルイラストを用いたデザインが次の流行となりそうです。

こんなサイトに良いかも！？

各種ランディングページ（LP）
キャンペーン・スペシャルサイト
アーティスト（歌手）などのサイト

個性や世界観を演出したい時にオススメです。

上田Dのひとこと: 難易度：☆☆☆／オススメ度：☆☆☆; 温かみがあり、オリジナリティを強く訴求できる表現ですね。素材にかける手間を惜しまない表現で、とてもクリエイティブだと感じます。いかにアナログとデジタルをうまく融合させていくかが今後のデザインの肝になっていきそうですね。

まとめ

以上、ルート・シーのデザイナー陣おすすめデザインコレクション2018にございました！
いかがでしたか？

様々な手法の中から、先輩方と「これから何が来そうかな？」「難易度、見た目だけなら☆1つだけど、実装も考慮すると…」などなど、案件の相談とも違う形でワイワイ語り合えて、とっっっても楽しかったです！
それぞれに個性あふるるビジュアルが並び、デザイナー陣の振り幅を目の当たりにしてホクホクしました！職権乱用ともいう！

今回ご紹介した手法以外にも、無限に表現があります。サイトの数だけコンテンツがあり、「そのサイトならでは」のストーリーの伝え方も千差万別。
「このページ…ちょっと印象変えたかったんだよな…」なんて、心に秘めた思いがありましたら！
ぜひ！お気軽にご相談くださいませ☆貴社の魅力をお伝えできるよう、あの手・この手でがんばります！