日本で使われているwebデザインの技術のほとんどは、海外の1~3年前の流行であるということがよく言われます。
そこで今回は、今この瞬間に海外のデザイナーが開発しているコードスニペットを紹介して、より最新のトレンドを活用してもらえないかと思っています。
今のwebデザインのトレンドと、そのコードスニペット(部分的なコード)を紹介していきます。コピペでも使えるように、主にCODEPENからの紹介になります。
※一部、スマホでは確認できないものがありますのでご了承ください。
CONTENTS
WordPressなどのインターネットサービスを利用して、WEBメディア制作などを行っている、株式会社ドミニオン 代表取締役 河村健一です。
約10年くらいの経験と知識を用いて、おすすめできるサービスやWordPressの始め方をご紹介しています。
Twitterでは日々、SEOに関することや近況を発信していますので、是非こちらもチェックしてみてください！
Twitter：https://twitter.com/ken84620459
レスポンシブデザイン
レスポンシブデザインというのは、2013年から本格的に広まり始めたデザイン手法で、表示幅に応じてデザインを変更するというものです。
このサイトもレスポンシブデザインを導入していますが、このことを日常的には「レスポンシブ対応」「スマホ対応」などとも言ったりします。
それでは、レスポンシブデザインのコードスニペットの紹介です。
Material Design – Responsive card
See the Pen Material Design – Responsive card by David Foliti (@marlenesco) on CodePen.0
カードスタイルを使ったデザインの時は、こういったレスポンシブ対応をよく見ます。
(この方は、カード自体のデザインも凄いのですが…)
表示サイズに応じて、横並びのカードの数を変更するのがセオリーです。
Responsive CSS Image Slider
See the Pen Responsive CSS Image Slider by Dudley Storey (@dudleystorey) on CodePen.0
次は、レスポンシブ対応のスライドショーです。
See the Pen Responsive and Mega menu by Arjun Amgain (@arjunamgain) on CodePen.0
レスポンシブ対応といえば、メニューの扱いが特徴的ですね。
筆者も、真っ先にメニューをどうしようかと考える事が多いです。
Flat Responsive Form using CSS3 & HTML5
See the Pen Flat Responsive Form using CSS3 & HTML5 by Rex Kirby (@rexkirby) on CodePen.0
1カラムのフォームは、レスポンシブ対応させるのは意外と簡単なのですが、PCで見ても綺麗に見せるのが難点だったりします。
このデザインはPCで見ても、美しいですね。
Responsive Table
See the Pen Responsive Table by Geoff Yuen (@geoffyuen) on CodePen.0
筆者はすごく個人的にHTMLのtableが苦手なのですが、それはレスポンシブ対応が非常にやりにくかったからです。
このコードスニペットを見た時、「これだ！」と思わず声があがるほどでした。
表示幅に応じて、そもそも表示の欄を変えてしまうんですね。
フラットデザイン
次は、「フラットデザイン」と呼ばれるものです。実は、このデザイン手法は、「フラット」に見えるからその名称が広まっただけです。
簡単に表現すると、フラットデザインは現実の物体のような立体感を一切無くしているデザインだと考えてください。
メリットとして、シャドーやエンボスが無いため、PCとスマホで同じような見やすさを保てるところがあります。
Freebie Interactive Flat Design UI / Only HTML5 & CSS
See the Pen Freebie Interactive Flat Design UI / Only HTML5 & CSS3 by Javier Latorre López-Villalta (@jlalovi) on CodePen.0
こういったデザインが参考になります。色使いもシンプルでごちゃごちゃしてないですね。
Flat Ui Rollover Buttons
See the Pen Flat Ui Rollover Buttons by Saysora (@azureknight) on CodePen.0
フラットデザインの特徴は、ボタンに現れやすいと言えます。
iphoneのアイコン、windows8のボタンのデザインがよく引き合いに出されます。
Flat Table
See the Pen Flat Table by Nathan Jessen (@njessen) on CodePen.0
表なども、フラットに表現できます。
CSS3 flat icons
See the Pen CSS3 flat icons by Lionel T (@elrumordelaluz) on CodePen.0
アイコンも立体感を出来る限り無くした物などがあります。
SNSのアイコンも、こういった特徴を持っている物が多いですね。
マテリアルデザイン
マテリアルデザインは名称は有名ですが、実際はどれのことかあまり理解されていません。
これは、フラットデザインからの変遷として考えると良いのですが
フラットデザインの問題点として、平面にした都合上「どれが押せるのか」「なにが重要なのか」が分かりにくくなったとも言えます。
特に、ボタン・見出し・インプットなどに影響が出ました。
これを解決すべく2014年にGoogleが提唱したデザインのガイドラインがマテリアルデザインとも言えます。
これは、z軸(物理的な凹凸)を加えることで、立体感を出すことで解決をしようという方針だと思ってください。
ちなみに、マテリアルデザインのガイドラインは入手できます。
URL：https://material.io/jp/guidelines/
Google Material Design Input Boxes
See the Pen Google Material Design Input Boxes by Chris Sevilleja (@sevilayha) on CodePen.0
jQuery ui material design datepicker
See the Pen jQuery ui material design datepicker by David Bellotti (@dbellotti) on CodePen.0
こういったシャドーで立体感を出したりします。
この例はbox-shadowの値が1セットですが、複数セット使う場合もあります。
Material Design Hamburger
See the Pen Material Design Hamburger by Chris Wheatley (@chrisdwheatley) on CodePen.0
ハンバーガーメニューをタップすると現れるメニューバーに適用することも多いです。
Material Design – Responsive Table
See the Pen Material Design – Responsive Table by Sergey Kupletsky (@zavoloklom) on CodePen.0
テーブルも影を付けることで、印象が強くなります。
Nano Material Design
See the Pen Nano Material Design by Material Studio (@material_garage) on CodePen.0
背景のみスクロールするのも、立体的に感じられますね。
Material Scroll Animation
See the Pen Material Scroll Animation by Bhakti Al Akbar (@balapa) on CodePen.0
こういったシャドー付きのボタンが一番典型的です。
グリッドレイアウト
グリッドレイアウトとは、「グリッド」という文字の通りで「格子」を上手く使ったレイアウトです。
要は、サイトのレイアウトを格子状に考えて、配置するというデザイン手法です。
グリッドレイアウトの場合、要素のサイズを%指定するのが基本的なのでそこが特徴的とも言えます。
Percentage grid system
See the Pen Percentage grid system by drus unlimited (@drus) on CodePen.0
これがかなりグリッドレイアウトとして分かりやすい解説になるかと思います。
Beautiful Portraits grid
See the Pen Beautiful Portraits grid by Marco Barría (@fixcl) on CodePen.0
画像編集の段階から、グリッドレイアウトを導入することもあります。
Multi-Height Grid Layout
See the Pen Multi-Height Grid Layout by Cliff Pyles (@cliffpyles) on CodePen.0
こういうカード型タイプの場合、グリッドレイアウトは非常に使いやすいですね。
See the Pen Tiled Design Using CSS Grid // Interface as Navigation // Mobile // LWD by Brian Haferkamp (@brianhaferkamp) on CodePen.0
スマホ用のデザインに使われることもあります。
Isotope – imagesLoaded progress
See the Pen Isotope – imagesLoaded progress by David DeSandro (@desandro) on CodePen.0
画像毎の境界線も排除するのが、グリッドレイアウトの特徴とも言えるでしょう。
パララックスエフェクト
パララックスエフェクトとは「視差効果」を意味しています。
複数の背景のスクロールスピードを別々に調整することで立体感が出ます。
パララックスエフェクトの導入にはJavaScriptかjQueryをしっかり書いておく必要があることを理解して使用しましょう。
Multi-layered Parallax Illustration
See the Pen Multi-layered Parallax Illustration by Patryk Zabielski (@zabielski) on CodePen.0
これは非常に分かりやすいですね。
もはやHTMLでもない表記が使われているので、真似するのは難しいかもしれませんが…
Pure CSS Parallax
See the Pen Pure CSS Parallax Scrolling by Keith Clark (@keithclark) on CodePen.0
Full Page Parallax Scroll Effect
See the Pen Full Page Parallax Scroll Effect by Emily Hayman (@eehayman) on CodePen.0
スライドショーっぽくする例もありますね。
Parallax Star background in CSS
See the Pen Parallax Star background in CSS by Saransh Sinha (@saransh) on CodePen.0
もはや、背景だけしか動かさないというのも手になります。
ミニマルデザイン
これは、デザイン業界でいうところの「シンプルなデザイン」です。
目的達成の為に、無駄に装飾しすぎないのが特徴です。崩れにくく、表示速度も早いというメリットがあります。
シンプルなものほどデザイナーの技量の影響が強いため、高い技術が要求されるとも言えます。
Circular minimal countdown
See the Pen Circular minimal countdown by Robert (@rendro) on CodePen.0
See the Pen Burger – Minimal, fullscreen nav. by Matthew Blode (@mblode) on CodePen.0
変な装飾が一切無いですね。あるとしたらハンバーガーメニューのアニメーションくらいでしょうか。
Minimal Circular 3D Buttons
See the Pen Minimal Circular 3D Buttons by Chris Coyier (@chriscoyier) on CodePen.0
これは個人的に非常に好きです。
グラデーション
グラデーションは2014,5年あたりから一気に使われるようになり、今ではフルスクリーンでグラデーションを採用するサイトも増えてきました。
フラットデザインやマテリアルデザインと相性がいいのも、流行っている理由とも言えます。
Background image gradient overlay
See the Pen Background image gradient overlay by Alex Carpenter (@alexcarpenter) on CodePen.0
背景と組み合わせてグラデーションを使った例です。
Animated Background Gradient
See the Pen Animated Background Gradient by Mario Klingemann (@quasimondo) on CodePen.0
UI Gradient Shuffle
See the Pen UI Gradient Shuffle by Volker Otto (@l4ci) on CodePen.0
Gradient Buttons with Background-Color Change (CSS-only)
See the Pen Gradient Buttons with Background-Color Change (CSS-only) by MrPirrera (@pirrera) on CodePen.0
こういった、グラデーションを使ったUIも増えてきました。
キャンバスのヘッダー
HTML5から、canvasというものが導入されました。HTML記述しますが、実際にはJavaScriptを多用します。
細かい説明をすると、1記事分くらいになってしまうので、サンプルを見ていきましょう。
それぞれ、クリックやホバーイベントがあったりするので楽しんでみてください。
Canvas Particle Animation
See the Pen Canvas Particle Animation by Julian Laval (@JulianLaval) on CodePen.0
こういった背景付きでヒーローヘッダー(ヘッダー画像をフルスクリーンで表示)に使うこともあります。
Shape Shifter
See the Pen Shape Shifter by Kenneth Cachia (@kennethcachia) on CodePen.0
これはビックリですね。画面下部のインプット部分に文字を入力すると、それが表示されます。
See the Pen Canvas Navigation by Travis (@trhino) on CodePen.0
ナビゲーションを押すと、いきなりグラフィックが変わります。
Gravity Points
See the Pen Gravity Points by Akimitsu Hamamuro (@akm2) on CodePen.0
クリックしたポイントが重力の基になります。
海外のおしゃれなwebデザインに関するまとめ
以上、いかがでしたか？
簡単なデザイン手法の説明と一緒に、サンプルもいろいろと集めてみました。
CODEPENの作品は、ソースが公開されているので自分のサイトに応用することもできます。海外のデザイナーの作品を参考に、もっと美しいサイトを増やしていきましょう。
また、もっとデザインについて学んでみたい方は、プログラミングスクールのCodeCampやTechAcademyを利用されるのもおすすめです。
最後まで読んでいただき、ありがとうございました。
