2018年のWEBデザイン! 15のトレンドまとめ:ノンリニアWEBサイトのすすめ:15 WEB DESIGN TRENDS 2018:Nonlinear web site structure
WEB技術は秒針分歩の世界ですが、デザインはその技術を取り込みながら様々な試みが行われ数年単位で変化しています。
最も新しいトレンドはブランドや個人のアーティストサイトに試みられ、徐々に一般サイトへと広がります。
最新トレンドが市場に広まるには数年かかりますが、ここでは2018年以降に流行りそうなトレンドを収集&推測します。
以下順不動です。
1.モバイルファースト
もはやモバイルファーストは基本です。
WEBサイトの構築は殆どの場合、PC(デスクトップ)→モバイルのベクトルで設計を行い、意識的にもレスポンシブルでモバイル対応レイアウトを構築します。
ピュアなモバイルサービスやアプリ以外の一般的なWEBサイトではサイトデザインを提示する場合もPCサイトのデザインラフを提示します。
しかしモバイルファーストを基本と考えるのであれば、先ずはモバイルデザインです。
CSSの構造もモバイルを基本とし、@media などでの振り分けもモバイルを基本とした構造が基本となるでしょう。
いつまでもPCベースのデザインラフをクライアント提示している場合じゃありません。
2.真実、リアリティ、臨場感
真実、リアリティ、臨場感は大切です。
フェイクニュースやサイトが氾濫する今、真実は益々その価値を高めます。
オリジナルこと正義である。そしてオリジナルの情報から派生したビジュアルこそ正義であると言えるのです。
3.極太フォント
極太! この言葉のついた商品に売れないものはありません!
サンセリフの極太フォントによる見出し表現は益々一般的となります。
『ジャンプ率が髙過ぎる! 』なんてデザイン学校の新入生みたいなことは言わないでください。
『やっぱりデザインの基本はタイポグラフィだ』なんてエバンジェリストデザイナーも要らないです。
必要なものはシンプルなマインドと若干の素人っぽさを乗り越える勇気です。
http://designcalendar.io/
https://www.hongkiat.com/blog/extra-bold-fonts/
https://www.awwwards.com/websites/typography/
4.IoT
IoT（Internet of Things）は全ての物がインターネットに繋がる状態を言いますが、モバイル端末に表示されるWEBサイトが当たり前となるとWEBサイトとデバイスの融合は避けられません。
汎用的なIoT対応を実現するにはHTMLやCSSと言った従来の基本レイヤーが益々重要となり拡張される必要があります。
シンギュラリティの到来は直ぐそこです。
デジタイズ可能なものは全てデジタイズされる。そう、全ては同化されるのです。
5.シングルページ（非同期遷移）
パララックスから派生したシングルページ化の流れは、ナビゲーションを単純化するためにも有効です。
縦にながーぃ無駄のない情報商材のランディングページは少し未来を先取りしているのかも知れません。
印刷物的概念から派生した物理的なページ遷移に意味はあるのでしょうか?
ページ単価なんて20世紀のDTPみたいなこと言っててどうします? ページ単価でWEB制作の見積もりをしているそこのあなた! さてどうします?
6.高精細の写真やイラストを大きく!（オリジナル!）
この記事のようにストックフォト多用のサイトはポテンシャルもモチベーションも低すぎますが、
それでも大切な条件を『ビジュアルをデカく』は守られています。
前述したように真実の追求は大切です。
最近ではキャッチな写真やイラストは益々大きく扱われます。
高精細で大きな素材は写真撮影やイラスト制作の手間が必要です。
また手間やコストのみならず、明確なコンセプトも必要となります。
そのようなポテンシャルは必ず画面から滲み出るものです。
7.Motion UI (マイクロインタラクション)
CSS3やJavascriptによるアニメーションはサイトの様々な部位を魅力的に飾るアニメーションを提供します。
従来の単純なホバーアニメーションから情報そのものを表現するアニメーションが必要とされるでしょう。
例えば情報から情報へのグラフィックアイコンのモーフィングやレスポンシブデザインを一歩進めた動的レイアウトによる視線誘導など。
ページは少しリッチアニメーション満載となります。
jsライブラリ、それともCSS3によるアニメーション?
www.webdesignerdepot.com/2015/07/7-secrets-for-enhancing-ux-with-micro-interactions/
8.非対称グリッド
左右対称のシンメトリーは美しいものです。安定感（バランス）のあるデザインは美しい反面、エネルギーやボタンシャルは低くなります。
エネルギーは不安定な状態でこそ高まります。
よりポテンシャルの高いデザインを目指す方法の一つとして左右非対称デザインは基本的アプローチの一つと言えるでしょう。
ちなみに現在中国に何故大きなエネルギーがあるのか? それは中国がカオスだからです。
9.スプリットスクリーンレイアウト
こちらは非対称グリッドに対して相反するイメージを持ちます。
左右に明確に分離されたスプリットスクリーンレイアウトは安定感と高い視覚度を持ったボックスレイアウトと言えるでしょう。
イラストや写真による視覚度アップが期待できないプアカンパニーはタイポグラフィとスプリットスクリーンレイアウト導入も一考です。
10.脱ボックスレイアウト
WEBのレイヤーはボックスモデルを基本としてレイアウトされています。
本来デザイナーの思考は単純です。
マージンや反面率、様々なガイドラインに縛られながらレイアウトを行っています。
WEBの世界ではそれはより顕著に現れます。
多くのWEBデザイナーはDIV病から抜け出せず、無意識にもボックスをイメージして情報は正にコンテンツとしてそれらのボックスに内包されています。
ボックス間をまたぐ自由なレイアウト、タイポグラフィは非対称グリッドにもみられるデザインポテンシャルをよりいっそう拡大します。
よりレイアウトは自由になり動き出すはずです。
『脱ボックスレイアウト』。言うほど簡単ではありません。『脱ボックスレイアウト』を意識した瞬間にあなたの意識は既にボックスの中です。
補足５
11.音声検索、音声アシスト
従来の検索窓は太鼓の昔より変化はありません。
しかしgoogleをはじめとした様々な先進企業が音声認識、音声アシストを主としたインターフェイスを実現しつつあります。
特にモバイル端末では耳による情報収集、声による操作が一般的となるためWEBサイトもその対応を迫られることでしょう。
12.ヒーローヘッダー(危険性)
トップページ上部でサイトのイメージを確定してしまう印象的なイメージ要素（ヒーローヘッダー）への拘りは経験薄いクリエイティブディレクターにとって最も簡単な腕の見せ所かも知れません。
写真やイラスト、プラスキャッチコピーでサイトのイメージを決定付けることはサイトのブランディングにも繋がる重要な要素ではありますが、本来特徴や個性やコンセプトのはっきりしない企業、団体、個人にとっては危険でもあります。
カッコいいヒーローヘッダーが本来の企業の姿を現しているとは限りません。
ちなみに会社のアイデンティティを一発で表すトップページの相場って幾らですか?
『まぁ、５万円～１０万円かな。。。』
『安っ！』
13.ボトムスティッキー
ページ下部（ボトム）に固定されたエレメントはスマートフォンの画面ではお馴染みです。
今まで手付かずであったからこそ広告スペースとして占有されているこのスペースの価値は今後、より見出されることでしょう。
これからは画面の真ん中より最下部までは全てボトムと呼びましょう。
『このページ、半分広告じゃないか！』
『ええ、ボトム広告って言われたので。。。』
14.高コントラスト（ブライトカラー）
一見70年台のようなサイケデリックな高コントラストも色相を偏らせることによって今っぽくなります。
しかし気を付けてください。
美は必ず快ですが、快は必ずしも美とは言えません。
15.デュオトーン、グラデーション、ビンテージ
レインボーカラーを基本としたグラデーションは古くて、古い手法の一つです。
しかしながらかのアップルがiPodのCMで70年サイケデリックスをリバイバルさせたように、過去を知らないどこかの若いデザイナーに取り上げられるとたちまち世間に広がるものです。
グラデーションやビンテージが再びメインとして注目を集めるためには多くの類似デザインの出現と大手、メジャーアーティストに取り上げられる必要があります。でもチャンスはあります。
まとめ
2018年からはWEBデザインの方向性、デザインは大きく変化する予感がします。
その大きなキーワードがWEBを支えるシステム側のインテリジェント、つまりAIです。
本格化したAI技術はあらゆる情報伝達の場に関与します。
今後WEBサイトはAI等のアシスタント技術を利用しながらノンリニア（非線形）の方向に向かうでしょう。
リニアな情報構築やレイアウトは必ずしもユーザーの意向を考慮したものではありません。
例えばWEBサイトのデザインレイアウトですら動的に各個人向けに最適化されるでしょう。
通常のWEBサイトもプログレッシブ ウェブアプリへと次第に変化するかも知れません。
最近少し新しいデザインページをと思って仮組したサイトをクライアントの社長と確認していました。
そのページは正に『パララックス』『でかい動画』『意味ありげなキャッチコピー』『ドロワーメニュー』のオンパレード。
いかにもハイセンスに仕事出来ます系サイトでした。
『今っぽいね!! 』二人の意見は一致しました。しかしその後の二人の意見も一致しました。
『今っぽくて、、、違うね。』
２０１８年のトレンドをあれこれ書きましたが、是非皆さんトレンドなど無視して新たな試みを!!
