ワードプレス初心者向け情報サイト『webcode』WordPress初心者向けにwordpress(ワードプレス)に関するお役立ち情報が掲載されています。おすすめプラグインやおすすめ有料テーマ(テンプレート)、おすすめ無料テーマ(テンプレート)なども紹介しております。Goope初心者向けにグーペに関するお役立ち情報が掲載されています。リアルな口コミやメリット・デメリット、グーペの利用がおすすめな人や他のCMSとの比較情報などもご紹介しています。2018年7月27日webcode編集部FacebookTwitterはてブPocketFeedly日本で使われているwebデザインの技術のほとんどは、海外の1~3年前の流行であるということがよく言われます。そこで今回は、今この瞬間に海外のデザイナーが開発しているコードスニペットを紹介して、より最新のトレンドを活用してもらえないかと思っています。今のwebデザインのトレンドと、そのコードスニペット(部分的なコード)を紹介していきます。コピペでも使えるように、主にCODEPENからの紹介になります。※一部、スマホでは確認できないものがありますのでご了承ください。海外のおしゃれなwebデザインに関するまとめレスポンシブデザインレスポンシブデザインというのは、2013年から本格的に広まり始めたデザイン手法で、表示幅に応じてデザインを変更するというものです。このサイトもレスポンシブデザインを導入していますが、このことを日常的には「レスポンシブ対応」「スマホ対応」などとも言ったりします。それでは、レスポンシブデザインのコードスニペットの紹介です。CodePen.0カードスタイルを使ったデザインの時は、こういったレスポンシブ対応をよく見ます。(この方は、カード自体のデザインも凄いのですが...)表示サイズに応じて、横並びのカードの数を変更するのがセオリーです。CodePen.0次は、レスポンシブ対応のスライドショーです。CodePen.0レスポンシブ対応といえば、メニューの扱いが特徴的ですね。筆者も、真っ先にメニューをどうしようかと考える事が多いです。CodePen.01カラムのフォームは、レスポンシブ対応させるのは意外と簡単なのですが、PCで見ても綺麗に見せるのが難点だったりします。このデザインはPCで見ても、美しいですね。CodePen.0筆者はすごく個人的にHTMLのtableが苦手なのですが、それはレスポンシブ対応が非常にやりにくかったからです。このコードスニペットを見た時、「これだ!」と思わず声があがるほどでした。表示幅に応じて、そもそも表示の欄を変えてしまうんですね。フラットデザイン次は、「フラットデザイン」と呼ばれるものです。実は、このデザイン手法は、「フラット」に見えるからその名称が広まっただけです。簡単に表現すると、フラットデザインは現実の物体のような立体感を一切無くしているデザインだと考えてください。メリットとして、シャドーやエンボスが無いため、PCとスマホで同じような見やすさを保てるところがあります。CodePen.0こういったデザインが参考になります。色使いもシンプルでごちゃごちゃしてないですね。CodePen.0フラットデザインの特徴は、ボタンに現れやすいと言えます。iphoneのアイコン、windows8のボタンのデザインがよく引き合いに出されます。CodePen.0表なども、フラットに表現できます。CodePen.0アイコンも立体感を出来る限り無くした物などがあります。SNSのアイコンも、こういった特徴を持っている物が多いですね。マテリアルデザインマテリアルデザインは名称は有名ですが、実際はどれのことかあまり理解されていません。これは、フラットデザインからの変遷として考えると良いのですがフラットデザインの問題点として、平面にした都合上「どれが押せるのか」「なにが重要なのか」が分かりにくくなったとも言えます。ボタン・見出し・インプットなどに影響が出ました。これを解決すべく2014年にGoogleが提唱したデザインのガイドラインがマテリアルデザインとも言えます。これは、z軸(物理的な凹凸)を加えることで、立体感を出すことで解決をしようという方針だと思ってください。ちなみに、マテリアルデザインのガイドラインは入手できます。CodePen.0こういったシャドーで立体感を出したりします。この例はbox-shadowの値が1セットですが、複数セット使う場合もあります。CodePen.0ハンバーガーメニューをタップすると現れるメニューバーに適用することも多いです。CodePen.0テーブルも影を付けることで、印象が強くなります。CodePen.0背景のみスクロールするのも、立体的に感じられますね。CodePen.0こういったシャドー付きのボタンが一番典型的です。グリッドレイアウトグリッドレイアウトとは、「グリッド」という文字の通りで「格子」を上手く使ったレイアウトです。要は、サイトのレイアウトを格子状に考えて、配置するというデザイン手法です。グリッドレイアウトの場合、要素のサイズを%指定するのが基本的なのでそこが特徴的とも言えます。CodePen.0これがかなりグリッドレイアウトとして分かりやすい解説になるかと思います。CodePen.0画像編集の段階から、グリッドレイアウトを導入することもあります。CodePen.0こういうカード型タイプの場合、グリッドレイアウトは非常に使いやすいですね。CodePen.0スマホ用のデザインに使われることもあります。CodePen.0画像毎の境界線も排除するのが、グリッドレイアウトの特徴とも言えるでしょう。パララックスエフェクトパララックスエフェクトとは「視差効果」を意味しています。複数の背景のスクロールスピードを別々に調整することで立体感が出ます。パララックスエフェクトの導入にはJavaScriptかjQueryをしっかり書いておく必要があることを理解して使用しましょう。CodePen.0これは非常に分かりやすいですね。CodePen.0スライドショーっぽくする例もありますね。CodePen.0もはや、背景だけしか動かさないというのも手になります。ミニマルデザインこれは、デザイン業界でいうところの「シンプルなデザイン」です。目的達成の為に、無駄に装飾しすぎないのが特徴です。崩れにくく、表示速度も早いというメリットがあります。シンプルなものほどデザイナーの技量の影響が強いため、高い技術が要求されるとも言えます。CodePen.0変な装飾が一切無いですね。あるとしたらハンバーガーメニューのアニメーションくらいでしょうか。CodePen.0これは個人的に非常に好きです。グラデーショングラデーションは2014,5年あたりから一気に使われるようになり、今ではフルスクリーンでグラデーションを採用するサイトも増えてきました。フラットデザインやマテリアルデザインと相性がいいのも、流行っている理由とも言えます。CodePen.0背景と組み合わせてグラデーションを使った例です。CodePen.0こういった、グラデーションを使ったUIも増えてきました。キャンバスのヘッダーHTML5から、canvasというものが導入されました。HTML記述しますが、実際にはJavaScriptを多用します。細かい説明をすると、1記事分くらいになってしまうので、サンプルを見ていきましょう。それぞれ、クリックやホバーイベントがあったりするので楽しんでみてください。CodePen.0こういった背景付きでヒーローヘッダー(ヘッダー画像をフルスクリーンで表示)に使うこともあります。CodePen.0これはビックリですね。画面下部のインプット部分に文字を入力すると、それが表示されます。CodePen.0ナビゲーションを押すと、いきなりグラフィックが変わります。CodePen.0クリックしたポイントが重力の基になります。海外のおしゃれなwebデザインに関するまとめ以上、いかがでしたか?簡単なデザイン手法の説明と一緒に、サンプルもいろいろと集めてみました。CODEPENの作品は、ソースが公開されているので自分のサイトに応用することもできます。海外のデザイナーの作品を参考に、もっと美しいサイトを増やしていきましょう。デザインについて学んでみたい方は、プログラミングスクールのCodeCampやTechAcademyを利用されるのもおすすめです。最後まで読んでいただき、ありがとうございました。webcodezeroRANKINGShopify(ショピファイ)の評判は?カラーミーショップやリピートとの比較エックスサーバーの使い方をワードプレス初心者にわかりやすく画像で解説【経験談付き】ロリポップはライトプランで十分?ワードプレスを複数するならどのlolipopのプランが良い?バインドアップ(BiNDup)の評判は?料金比較やメリット・デメリットを解説ヘテムルとエックスサーバーの比較!wordpress初心者におすすめはどっち?CATEGORYWordPress(ワードプレス)初心者向けにwordpress(ワードプレス)に関するお役立ち情報が掲載されています。おすすめプラグインやおすすめ有料テーマ(テンプレート)、おすすめ無料テーマ(テンプレート)なども紹介しております。Goope(グーペ)初心者向けにグーペに関するお役立ち情報が掲載されています。リアルな口コミやメリット・デメリット、グーペの利用がおすすめな人や他のCMSとの比較情報などもご紹介しています。Jimdo(ジンドゥー)初心者向けにjimdoに関するお役立ち情報が掲載されています。リアルな口コミやメリット・デメリット、jimdoの利用がおすすめな人や他のCMSとの比較情報などもご紹介しています。WIX(ウィックス)初心者向けにWIX(ウィックス)に関するお役立ち情報が掲載されています。口コミや評判、メリット・デメリット、WIXの利用がおすすめな人や、他のCMSやホームページ作成ツールとの比較情報などもご紹介しています。RentalServer(レンタルサーバー)レンタルサーバーに関する口コミや評判、メリット・デメリット・料金比較などが掲載されています。ワードプレス(wordpress)運用におすすめのレンタルサーバーもご紹介しております。