2017年のWebデザイントレンド

本日はweb業界2016年のデザイントレンドを振り返り、2017年に流行るwebデザイントレンドを予想して行きたいと思います。

まずは初めに2016年。個人的に感じた2016年トレンドは一言で「高画質&ハイクオリティー」

鮮明で大きい写真や動画が背景に使われるwebサイトが多く登場しました。

アイキャッチに絶大なインパクトを残すデザインであり、閲覧者へのイメージアップにも効果が大きいデザインです。その他には2015年度のトレンドを発展させた縦スクロールを意識したデザインの、改良が多く見受けられます。

その背景にはモバイル端末の普及が大きく影響していると考えられます。

スマホの急速な利用拡大によって、今後はwebサイトのマルチデバイス化が特に重要になるでしょう。2017年もまずは2016年同様にデバイスごとの横幅サイズに応じたレイアウトデザインを自動調整してくれる「レスポンシブウェブデザイン」は、利用拡大が見込まれます。

特に大画面対応のレスポンシブウェブデザインは2016年以上に普及されるでしょう。

そんなスマホ時代だからこそ2017年に流行るであろうデザイントレンドが、「スプリットスクリーン」です。スプリットデザインとは、分割スクリーン、分割レイアウトと呼ばれるデザインです。スマホなどで表示する場合にも適しており、レスポンシブウェブデザインと相性抜群のデザインです。

2017年は「スプリットデザイン」をもとに、2016年トレンドでもある高画質な写真や動画を使ったコンテンツで構成するデザインが予想されます。要するに2015年&2016年のトレンド集大成です。

インパクト絶大でありながら、見やすい、読みやすいサイト。

見た目の面白さだけでなく、直感的に感じ、知りたい情報が分かりやすく整理されている。
2017年最重要トレンド間違いなしでしょう!!
※あくまでも個人的な意見です。笑

スプリットデザイン

スクリーンショット 2017-01-12 20.08.40

■PEUGEOT
http://www.peugeot.com/en
2画面のメインコンテンツがカッコイイ
シンプルベストの構成

■BOSE
http://special.bose.eu/en/
分割スクリーンを最大に活用したレイアウト
アイテム訴求には効果抜群

■GMS
http://gms.life/
アニメーションが目を引く
楽しめるデザイン

■one of a Kind
http://oneofakindshowchicago.com/
左右で逆の季節を表現
カラーリングも流行を取り入れた
女子ウケ NO1

■Type&Face
http://triner.de/type-face/
スプリットスクリーンを活用した
新しいHOME
記憶に残るwebサイト

■zero
https://zerofinancial.com/
左側に動画、右側にコンテンツ
スマホで見ると縦表示に。レイアウト構成も完ぺきです。

■AUSTRALIAN DESIGN RADIO
https://ausdesignradio.com/
メインコンテンツのインパクトがありながら、
見やすい、分かりやすい、レイアウト構成が◎

Webサイトのトレンドは素早く変化していく

Webサイトデザインは多くの流行やトレンドが、スピーディーに変化して行きます。

ネット社会の今日だからこそ、企業にとってもwebサイトは会社の広報でもあり、営業マンでもある、最も重要なツールです。

2017年は最先端webサイトで競合に差をつけてみてはいかがでしょうか?

持っているフォントを一覧表示

※ (株)プロトン・シモヤマ寄稿

パソコンに入っているフォント、把握してますか?

ロゴをつくったり、ちょっと凝った見出しを作る時
どのフォントを使おうかな〜って悩む事、多いと思うんです。

でも、特に英字のフォントなんていっぱいあって
全部試すわけにもいかないし
かといって適当なフォントで妥協して、後からいいフォント見つけたら悲しいし…

 

そんな時には
これを使ってみて下さい。

フォント一覧をカタログみたいに表示してくれるサイト

wordmark.it – helps you choose fonts!
持っているフォントを一覧表示

「load fonts」をクリックすると、
自分のパソコンに入っているフォントを読み込んで、ずらーっと表示してくれます。

 

そして中央上部に好きな文字を入力すると・・・

持っているフォントを一覧表示

実際に入れたい文字でフォントを確認できます!

 

文字を白抜きで使いたい場合も
ぬかりなくチェック。

持っているフォントを一覧表示

 

気に入ったフォントをいくつかクリックして
右端の「filter celected」でピックアップしたものだけを見比べる事もできます。

持っているフォントを一覧表示

 

フォントサイズを調節したり、大文字・小文字を変えられたり
高機能かつサクサク動いてくれるので、最近人に勧めまくっています。

ロゴなんて作る予定無くても
面白いので是非一度おためしあれ〜

Windowsでも綺麗な明朝体を表示する

※ (株)プロトン・シモヤマ寄稿

こんにちは。
ひっそりと活動場所が 東京から大阪に変わったシモヤマです。

大阪に来て知ったのは、飴ちゃんをくれるのはおばちゃんだけではない。ということです。

 

さて、突然ですが

webサイトに真面目な感じやリッチな雰囲気を出したい時、明朝体を使いたくなりませんか?
なりますよね。

でも、ほとんどの場合、使いません。

なぜなら
macでは、基本的に全てのサイズのフォントにアンチエイリアス処理が施されていますが
windowsは…。

 

なので、どうしても明朝にしたいときは

今までだったら:画像にする
先人の知恵を借りるなら:裏技を使う
最近:webフォント

という感じでした。
わたしはもう、そこまでするなら大人しくゴシックで頑張ろうと思っていました。

 

・・・が!ありました!

使える!Officeフォント

参考記事:http://creazy.net/2007/08/windows_anti_alias.html

なんと、こちらの記事に登場するHG明朝は13pxからアンチエイリアスがかかるそうです!
素晴らしいーー!!!

HG明朝は、OSに標準搭載されているフォントではありませんが
MicrosoftOfficeをインストールするとついてくるフォントです。

WindowsでOfficeが入ってないPCもなかなか無いと思うので、
これでちょっとは気軽に明朝体を使えそうです。

記述方法

実際にCSSを指定する際には
わたしはこんな感じで使っています。

ヒラギノ明朝とHG明朝

確実なのはwebフォントかな、とは思いますが、
指定しておいて損は無いと思います。

女子向けデザイン

※ (株)プロトン・シモヤマ寄稿

3月3日、今日はひな祭りです。

「桃の節句」とも呼ばれて女の子のお祭り的な扱いですが
もともとは、人形に災いを託して川に流し、汚れや厄災を払う行事で、
男女ともに参加する行事だったようです。

じゃあなんで、いつから、女の子のお祭りになってのでしょうか??

・・・結局調べても答えが見つからなかったので
自分なりに考えてみました。

女子向けにデザインされてる?ひな祭り食

ひな祭りにつきものな「菱餅」や「ひなあられ」、「ちらし寿司」って
すごーく女子っぽい色合いだなーと感じた事、ありませんか?

菱餅

ピンク みどり 

ピンクは「桃」、緑は「若草」、白は「雪」を意味し、
3月という季節の情緒を表現しているそう。(参照:はてなキーワード)

女性向けのWEBサイトを制作する時、
よく「女性向け webデザイン」で検索をして、ターゲット女性の好みそうなサイトを参考にするのですが

この「ひな祭りカラー」を凄くよく目にする気がします。

単純に、ピンクを使ったサイトが多いという事もあると思いますが
美容室や化粧品、ガーリー系・ストリート系(ファッション誌の分類は、こちらを参考に。。)に分類されるブランドサイトなどで
よくこの組み合わせが使われているように感じます。

女性向けデザイン
美容医学のプロフェッショナル【Skin Care Labo(スキンケアラボ)】

 

女性向けデザイン
ロレッタ(Loretta)モルトベーネ

 

女性向けデザイン
静岡県浜松市中区鴨江の美容院・ヘアメイクサロン美容室Pique – hair and make – <ピケ>

 

個人的には
「知的さ」とか「かっこよさ」とか「強さ・個性」ではなく
「癒し」や「かわいらしさ」を表現するのに適した色使いなのかな、と思います。

なので、
「あどけない女の子」をイメージさせるこのひな祭りカラーでお祝いをしているうちに
だんだんと”女の子寄りのお祭り”になっていったのではないかな〜と。

 

・・・ちょっと無理矢理感ありますが、
色の持ってる力って、そのくらい大きいんじゃないかと思います。

ひな祭りだけでなく、こういった日本の行事食には「色」にもちゃんと意味があります。
「デザイン」の「デ」の字も無い時代にも、しっかりとデザインは存在していたんですね〜。

おまけ:「ひな祭りを片付けないと行き遅れる」?

もともと、災厄を身代わりに引き受けさせていたひな人形なので
長く身近においておくのは縁起が悪いと言われているようです。

ひな人形

「行き遅れる」というのは「雛人形をいつまでも飾っておくのはだらしがない」
という戒めのために言われ始めたのではないかとのこと。

「片付けが出来ないだらしない子はお嫁になんか行けません!」
ってことでしょうか・・・?

ε=( ̄。 ̄;)ふぅ

2013年WEBデザインはベタ塗りがきてる!?

※ (株)プロトン・シモヤマ寄稿

実は洋服のトレンドよりも流れが速いんじゃないかと思う、WEBのトレンド。

海外では、Windows8の影響か
ベタ塗りのペタっとしたサイトが流行っているようです。

ファッションリーダーWindows8

トレンドの火付け役とおもわれる、Windows8。

windows8

評判はさておき、
macユーザーなわたしですが、これはちょっと素敵に見えます。

パッケージもおしゃれ。

windows8パッケージ

色がドーン!四角がズラーっ!!

こんなWindows8に影響を受けていそうなサイトがこちら。

Diesel

Diesel – jeans, clothes, shoes, watches, apparel, denim and sunglasses
これは、思わずスクロールしたくなるー!

 

dynamIt

dynamIt | a digital agency | columbus, ohio
色合いを3色にまとめた感じでしょうか?好みです。。
そして何より、ロゴ部分の仕掛けが面白い!

まるで仕掛け絵本?なサイト

BAUHAUSのモダンデザインを思わせるようなサイトたち。
WEBならではの動きや、画像を使わないアニメーションなど、色んな技術がぎゅっと凝縮してあります。

Hessian

Hessian
サイトをまるごとポストカードにしたい。。

 

I'm a Shaunimal

I’m a Shaunimal
※JINS PC着用の上、ご覧下さい。

 

Lorenzo Verzini

Lorenzo Verzini
大人なポップ感と画像を使わないアニメーション!さすがデザイナーさんのサイト。
左上のロゴがLOFTに見えたわたしは日本人です。

 
 

って思ってLOFTのサイトを見てみたら、LOFTまでもペタッとデザイン!
LOFT

LOFT
※JINS PC着用の上、ご覧下さい。
FLASHで実装されているようだったので、スマホ版はどうなるのかなーと思ったら、
アニメーションのない、通常のサイトでした。。

LOFTスマホサイト

Windows8風サイト、簡単に作れるみたい

フラットデザインなサイトを探してたら、こんなのありました。

Windows8みたいなサイトが作れるCSS「Metro UI CSS」。

レスポンシブに動作して、アニメーションやモダンブラウザのサポート等、便利に使えるらしいです。

じわじわきてます

日本ではまだそこまで多くはないけど、
近いうち、Pinterest風サイトが流行った時みたいに、どこのサイトもこぞってフラットデザインになるのでしょうか…。

その時は是非、ちょっと優しいトーンでおねがいします。

・・・この記事を書く為にいろんなサイトを見てたら、目の疲労、半端ないです。

JINS PC…
 

髪型シミュレーション

※ (株)プロトン・シモヤマ寄稿

噂の彼女

最近、巷で話題のモナリザさん

どうやら髪型を変えるとめっちゃ可愛いと評判なようです。

可愛いモナリザ

おー可愛い!

ちなみに元になっているモナリザさんは
1番有名なモナリザさんの少し若い頃をモデルにした作品と言われている
「アイルワースのモナリザ」です。

 

でもこれって、本当に髪型による効果なのでしょうか…?

というわけで、検証してみました。
 

髪型を変えるとイケメンになるのか〜信長の変貌〜

①まずは、信長さんを用意します。

但しイケメンに限る

眉間のしわが何とも渋いですね。
 
 

②髪型を用意します。

女子大生に対抗して、伊勢谷友介風の髪型を選んでみました。

これを信長さんにフィットするように切り抜いていくわけですが
こういう”丁寧に写真を切り抜きたいとき”、
わたしはPhotoshopやFireworksのペンツールを使って切り抜いています。

但しイケメンに限る

間違えたら1個ずつ戻れるし、後から細かい調整が出来るから便利。
 
 

③合成します。

さあ、いよいよ信長さんにかぶせてみます!
 
 
 
さあ、登場して頂きましょう!
伊勢谷風・信長さーん!
 
但しイケメンに限る
 
・・・ん?
 
ちょっとキメすぎたのかも。
もうちょっと無造作な感じでいってみましょう。
 
 
無造作パーマな信長さーん!
 
nobu4
 
あれ?信成くん??
 

結論

髪型は、大事。
 

※但し、イケメンに限る。

モナリザさんは元が美人ですもんね。
 

おまけ

写真と写真の合成でも、写真とイラストの合成でも
ただ切り抜いて重ねただけでは、バレバレな合成写真になってしまいます。

そこで、合成っぽさをなるべく消すために、ひと手間。

①合成先の写真の背景を、切り抜いた方の写真と同じ形で選択→コピー

②切り抜いた写真のすぐ下に、コピーした背景を配置

③切り抜いた写真のレイヤースタイルを「乗算」もしくは「比較(暗)」に変更

但しイケメンに限る

すると、自然になじむ、上の信長さんのようになります。
おしまい。

探すより早い!自分で作れるシームレスパターン

※ (株)プロトン・シモヤマ寄稿

トレンドとパターン

「ミニマル」とか「フラット」なデザインが流行りだしてから
THE 柄!なページって、あまり見かけなくなりました。

でも、使いどころを工夫して上手く使えば
クオリティがぐぐっと上がって、webの世界観的なものが高まるんじゃないかなーと思います。

 

そんな事思っていたら、こんなの見つけました。

シームレスパターンを自分で作れる!

patterncooler

パターンジェネレーター

 

使い方は簡単↓↓↓

1.パターンを選ぶ。全225パターン!

パターンを選ぶ
 

2.色を選ぶ

色を選ぶ
 

3.テクスチャを決める

テクスチャを決める
 

4.ダウンロード!フリーで出来るのはPNGのみです。
(ダウンロード画面で謎のおじさんが出てきますが、使ううちに慣れます。)

シームレスパターンをダウンロード

 

これだけ!

色を決めるとき、前回紹介したcolorschemedesignerを併用するといいかもです。

自分で作ろうとすると、なかなか綺麗にシームレスにならなかったり、
微調整なんかで時間をとられてしまいますが・・・

このジェネレーターがあれば、
ハイクオリティなシームレスパターンをお手軽に!

 

・・・ただ、1つだけ難点が。

この子、重いです。

サイトの表示に 20.7秒
パターンの切り替えに 9.8秒
(※数字は参考までに。)

「選べるパターンいっぱいだし、仕方ないよ。むしろ頑張ってるほうじゃないかな!」
って言う人は、お試し下さい。

 

ちなみに今回作ったパターンはこれ。
パターン

ちゃんとシームレスです。
シームレスパターン

 

おまけ:柄を使っているサイトさんの例

http://www.aigle.co.jp/liberty/

http://sophieetchocolat.jp/

http://girlswalker.com/tgc/13ss/

http://www.more-hairmake-college.ac.jp/

ポップなサイトさんがズラリ。

柄を大々的に使っているのは、女子・若者向けなサイトさんが多いみたいです。

 

そんな中

柄が主役で、品が良くて、おしゃれなサイトを発見!

http://www.sagainc.co.jp/

この使い方は素敵ですね〜メモメモφ(。。)

シンプルなサイトが流行っているからこそ、こういう柄を使ったサイトって目立ちますね。

柄使い、マスターしたいスキルのひとつです!

配色なんてこわくない

※ (株)プロトン・シモヤマ寄稿

配色ってムズカシイ。

お客さんから、メインの色を指定されることは結構あるけど

じゃあそれを何色と組み合わせよう?ってなります。

 
そんな時は、これ!
 

良い感じな配色を教えてくれるツール

colorschemedesigner
 
配色参考

メインカラーを指定すると、良い感じな組み合わせを教えてくれます。

配色パターンは、

mono(単色)
→単調。落ち着いてみえる。
complement(補色)
→アクセントに最適。使いすぎ注意。
triad(色相環の中の、正三角形に位置する3色)
→バランスに注意。でもインパクト大!
tetrad(主の2色と、その補色の2色)
→攻めの配色!取扱い注意。
analogic(類似色)
→落ち着いて、エレガントな印象。
accented analogic(類似色+補色)
→効果的に使えたら、エレガントかつ訴求力の高いデザインになりそう。。

の6通り。

デザインから与えたい印象によって
どの配色パターンにするか決めると良さそうです。

 

サンプルでイメージ!

配色がわかっても、実際に使うとなるとバランスがムズカシイ・・・そんな人も、大丈夫。
この配色パターンを使ったwebデザインのサンプルを見ることが出来ます。

配色デザイン

おー、おしゃれー。

こちらは明るいバージョンと暗いバージョンの2パターン。

 

ただ、この配色をそのまま使うとビビットすぎて、
「目がぁー」って感じなので

 
彩度を落としてみたり

配色パターン

なんかにごっててヤだなって人は

ここから2色くらいもらって+無彩色(白、黒、グレー)
とか良いんじゃないでしょうか。

わたしはよく、
メインカラー+ポイントカラー+ベースに白かグレー
って感じで使わせてもらってます。

 

高機能、なのにサクサク!

ここまでいろんな機能を紹介してきたわけですが、
この子、他にもこんなことが出来ます。

・使っている色のカラー番号表示
・ランダムに色をピックアップ
色の見え方が異なる人にどう見えているか、チェック
・色見本の出力
cap_csd4

これだけ色々出来るのに、サクサクーっと快適に使えます。すごい。

配色に困った時は、お試しあれ。