さて、実は先日WEB屋志望な方とお友達になり、バンクーバーのWEBの話やらしていた時に、今後WEBデザイナーが知っとくべきトレンドは何か?というお話になりました。
僕は当たり前のように、僕の情報格納庫であるEvernoteを開き、これまでクリップしてきた記事の中からトレンドに関する情報を引っ張って、それを元にディスカッションしてきたんですが、WEBデザインに関するトレンドって本当に色々なブログやらメディアやらが発信してますよね。それこそ、有名どころから名も知らぬ個人ブログまで。まるで、『俺のトレンドはこれだ!』と皆が声を合わせているかのように思えるくらいです。
そんなこと考えてた時に、これって大切なことなのかもしれないと考えるようになりました。クリエイター、制作者である以上、何をトレンドと意識しているのかは情報交換するべきなんじゃないかと。
色々な記事を見て思うのですが、トレンドに対する考えが絶対に一致していなければならない必要なんか無くって、自分が今流行ってると思う物があるのであれば、それがなぜ流行しているのかを考える、ただ流されるのではなく自分の意見を持ち人にぶつけてみることが大事なんだと思うんです!
というわけで、まずは僕なりに実戦!今日は、僕自身がこれまでの経験から考える、ここ最近WEBデザインする(関わる)上で意識しとかなきゃいけないWEBデザインのトレンドってなんだろう?ってのを、ちょっと恐縮なんですが僕なりの考えでまとめて、記事にしてみようと思います。
半分はこれまで見てきたトレンドに関する記事からインスパイアされて、半分は僕自身のここ最近のWEB制作事情やら流行から考えたお話になります。なので正直、僕の偏見に満ち溢れた記事になってしまいますが、あわよくば、そこから何か別の発見があることを僕は期待している次第ですので、お付き合い頂ければ幸いです!
(あと、一応バンクーバーに居る僕個人の考えですので、トレンドと言っても人種/地域的な要因もあるのかもしれませんので、もしそういうのあったらご理解?くださいませ!)
相変わらずミニマルデザイン
あぁ、今更古いとか言われそうですが、もう一度僕の中でもおさらいしておきたいので書きました。
そもそもが、シンプルにすりゃミニマルってわけじゃ無い!あくまでも情報の伝達手段の一つとして僕は考えていて、ユーザーにとって有益、意味のある情報に着目し、可能な限り簡素な情報伝達を考えようぜという、個人的にはとても大好きな考え方。
デザインにもその結果として、最も伝えたいこと、伝えなくては成らないことに重点が置かれたデザインになることでシンプルに見える、簡素的に見える。シンプルであるのはあくまでも結果であって、ミニマルを考える過程が一番大事、もっと言えば、デザインに入る前の情報整理の面でクライアントと詰める作業の方が僕にとっては大事かも…
まぁしかし、元々純粋にミニマルなデザインは個人的には大好きでしたし。僕が元々非常に面倒くさがりということもあってか、何が言いたいのか、何を知ることが出来るのかが最も簡素に伝わるこれらのデザインは僕は普通に大好きです。
参考
- 60 Clean and Minimal Websites for Inspiration | Webdesigntuts+
- 50 Beautiful Clean and Simple Web Designs
- Minimalist Design Gallery – Minimalist Web Design
レスポンシブデザイン多すぎ
最近とにかく多いですね。僕の周りを見渡してもこれは確かにトレンドなんでしょうね。どこの記事を見てもレスポンシブばかりですが、個人的にはこのレスポンシブブームの背景にはデバイスの多様化は当然ながら、情報の伝達方法をミニマルな物にしようという、昨年くらいからの流れが影響しているように思えます。
単にどのウェブサイトもレスポンシブにすればよろしいという訳では当然なく、そこにはサイトの持つ情報量やどういった伝達方法がベストなのかを考えた上での判断が必要になると僕は考えています。
現時点では、情報量を簡素化し、可能な限りユーザーに伝えるべきことを明確に伝えようとするWEBサイトやデザインが多く、結果としてミニマルデザインばんざーいという背景も手伝い、レスポンシブデザインに適応しやすいコンセプトのサイトデザインが増えているというのが僕の勝手で個人的な感想っす。
裏を返せば、そのサイトが何をどれだけ伝えようとしているのか、何を目的にしているのかによって、デザイナー達は可能性の一つとしてレスポンシブを提案するべきであり、それが全ての答えであると思ってはいけないと思うわけですはいー。
ま、という僕の元へはレスポンシブデザインの案件で溢れかえっとりますがねー!技術的には、とにかくどこのmeet-upでも話題に上がるので、知識は付けておいて損は無いと思います!
参考
- 50 Responsive Web Design Examples For Your Inspiration | inspiiired magazine
- Responsive Web Design Templates and Frameworks | Resources
- Responsive Web Design: 50 Examples and Best Practices – DesignModo
どうなるウェブフォント
日本でも皆大好きモリサワからのTypeSquareとかそういうサービスの提供を背景に活気づいてきてる(?)と思うウェブフォントですが、まぁとりあえず僕は日本語サイト案件でこれらを利用したことはまだありませんが、これから先、ウェブフォントを使ったデザインが増えてくることは考えられますよね。
TypeSquare、使ってみようかなぁ。
参考
デザイン素材の活用
さて、誰かに怒られそうなトレンドになってしまいそうですが、もはやコレは僕の中では誰にだって伝えてることではありますので、取り上げさせて頂きます!
今やWEBデザイナーにとってはフリーで配布、共有されているPSD、AI、パターン、テクスチャ、フォント、アイコン、これら全てを自分の力に変えていく努力をすべきだと僕は考えています。ライセンスに関する知識をつけた上でデザインに活かすことも、PSDやAI等の他のデザイナーの表現方法が詰まったデザインを参考にしながら、自分の表現力を向上させる努力も大事なのかなと!
加えて、僕はお金を掛けて得た物の方が、『そこから何かを得なければならない!』という必死さが上乗せされるので、有料の物でも(お財布と相談しながら…)積極的に購入、またはDonateしているつもりですが、有料だろうが無料であろうが、これら誰かが作った素材や表現の方法をいいとこ取りすることができるか出来ないかは、デザイナーとしての質も制作スピードにだって違いが出てくる、一つの要員なんじゃないかと思っていたりします!
そして、自分の作った物も積極的に世に出していくようにして、自分のデザインに対する多くのフィードバックを集めることも、これから先は必要不可欠な物なんじゃないかとも考えています!
とあるデザイナーの方が自分のワークフローについて語っていたのですが、『知る、見る、分解/解析する、消化(理解する)、活用する、アウトプットする。』これら一連の流れの元が、フリーの素材でも僕はいいのかなと思っています!なのでこれからもフリーの素材やら何はらはこのブログでも紹介させて頂きますが、僕はそういった事に活用してもらえると嬉しいなと考えていたり、いなかったりします!!
参考
- Free Premium Design and Web Resources | Pixeden
- Launched Pixels – Free resources in PSD or HTML and CSS
- Free PSDs & Resources for Web Designers by Orman Clark
- 365psd | Download a free PSD every day.
- Download Free Vector Graphic Designs | Free Vector Art Images | 123FreeVectors
- Download Free Vector Files: Silhouettes, Outlines, Cutouts, Shapes
- 450+ Adobe Illustrator Patterns – DesignM.ag
- 25icons.com – Quality Stock Web Icons/Graphics
- 20 Useful Websites for Graphic Design Textures and Patterns
ウェブデザインのフレームワーク化
レスポンシブデザイン、Fluidレイアウト、グリッドシステム、HTML5、CSS3、Less/Sass、次から次に出てくるレイアウト手法や技術的な進歩。こんだけ色々出てこられては、着いていくのが大変ですよね。少なくとも僕は理解するだけで四苦八苦しています!
ただ、経験則としてこれらの技術や新しい表現が生まれた時には大体どこかでフレームワークが生まれます!作業効率を考える上で、これらのフレームワークはまず知っておくことが大事で、その中から自分に合った、自分が提案したいものに合わせたフレームワークを理解することが、またこれから先は特に大事になってくるんじゃないかなと考えています!
っていうか、いつかフレームワークを作る側になりたい物です!
参考
- SimpleGrid
- The Semantic Grid System
- The 1140px CSS Grid System · Fluid down to mobile
- Skeleton: Beautiful Boilerplate for Responsive, Mobile-Friendly Development
- Initializr – Start an HTML5 Boilerplate project in 15 seconds!
- Normalize.css: Make browsers render all elements more consistently.
- PhoneGap
- 960 Grid System
- Tiny Fluid Grid
- Responsive Web Design Templates and Frameworks | Resources
イラストレーションを多用したデザイン
今更だよなーとか思わないで欲しいっす!これまでだって散々、絵は描けた方がいいと思ってきましたが、最近それを更にひしひしと感じています。
ミニマルデザインが謳われるようになり、それに伴ったかのようにデザインの方向性としても更に直観的で分かり易い必要があったりすることが多くなってきましたが、加えてミニマルであるが故に他の競合サイトとの差別化としてキャラクターや絵を取り入れたデザインの要望もここ最近多くなってきているように感じます(これからブランドを作るって所は特に…)。
これまで、僕は一緒に仕事をしてくれるデザイナーにイラスト力を求めることなんかあんま無かったのですが、ここ最近は逆に『何かイラスト描けます?』って聞くことが増えたなと思ったことから、このイラストレーションの項目を追記させて頂きました!
参考
- Web applications, iOS apps, Ruby on Rails development, web design based in Vancouver, BC: Pieoneers.com
- Web & Graphic Design Manchester | Website Design Company in Manchester | Creative Spark
- Duct Tape & Glitter | Design & Creative
- ConvergeSE 2012 – April 27-28 – Columbia, SC
- Luhse Tea
インフォグラフィック
以前も書いたことありますが、インフォグラフィックと言えばもはや職業が成り立つくらいの普及力/必要性を見せてるんじゃないかと思っています。
また、『デザイナーならデータとか情報とかとは無縁』たいな風潮がどこか数年前は合ったような気がしますが、これから先どんどん“作れるデザイナー”が増えてくる中で、他との差別化の一つとしてインフォグラフィックなどの視覚的な効果を使って提案書を作ったり、自分の考えを伝えたりする事は一つ強みになると思うわけですね。
デザイナーならではの提案資料であり、デザイナーにしか出来無い強みを、こういった情報整理や資料にしていく意思を持っても良いと思うわけです。
試しに「infographics resume」とかで検索してみるといいですよ。どれだけのデザイナーがインフォグラフィックを使ったアプローチをしているのか、知るキッカケになるやもしれません!
参考
改ましてタイポグラフィ
これも今更って感じがしますが、おさらいも含めてその重要性を再認識しておきたいなと。
ウェブデザインって、95%が文字なんすよって記事が、昔iAさんの記事で出てからというもの、もはや僕のバイブルになり、僕自身も口酸っぱく「この95%を疎かにしない」と言ってきたわけですが、最近は情報の伝え方が凄く簡素になってきたからこそ、タイポグラフィに関する知識をもう一度見なおした方が良いと思っているわけですよ。
まず、非常にジャンプ率がはっきりしたデザイン増えてきましたよね。それに合わせてプロとアマチュアの境が非常にわかりやすくなってきているように感じるんです。
タイポグラフィネタは以前にも何度か取り上げさせてもらいましたが、もしよければそちらも参考にしてもらえれば嬉しい限りですね!
参考
自分以外のトレンドを知るトレンド
トレンドは発信することも大事だと思ったわけですが、それ以前に追いかける努力ももちろん大切。他の人がどんなトレンドを意識しているのかを知りながら、自分の提案の幅や、説得材料に使うことも少なくないので、もちろんこれから先も、何に着目して皆がWEBデザインの世界を作り上げているのかは、超積極的にめっちゃ頑張って追いかけていきたいなと思っています!(僕はほぼ、他のデザイナーやデベロッパーに頼っちゃっててすいません!!)
参考
- Web Design Trends in 2012 | Tips
- Symptoms Of An Epidemic: Web Design Trends | Smashing UX Design
- What is the Trend for Web Design in 2012? – 1stwebdesigner – Graphic and Web Design Blog
- 15 Web Design Trends to Watch Out For in 2012
- 15 top web design and development trends for 2012 | Feature | .net magazine
- The State of Web Design Trends: 2012 Annual Edition | Webdesigntuts+
以上、いかがでしたでしょうか?
もちろん、これらは僕を取り巻く環境や情報、僕の所へ来てくれる最近の案件やその傾向から必要とされているであろうことを考えた勝手なトレンドです。ちなみに、こういった情報を発信するブログの中には、トレンド症候群に気をつけろ!的な内容の記事もたまに目にしますし、流され過ぎは確かに禁物かとは思います!
でも、トレンドって結局どっかのクリエイターが『これトレンドじゃね?』って意識しだしたところから始まる物だと思いますし、冒頭にも書いたよう、ある程度の統一性はあっても、まったく一緒じゃ無いとダメって事は無いと思っています。
この記事自体こうやって公開するまでに沢山の人の意見を聞いて、「いや、絶対違うしー」とか、「これそもそもトレンドじゃないしー」とか、「今更だしー」とか、「帰った方がいいよー」とか、そりゃぁもう散々色々言われました(苦笑)。しかしながら、マダマダ勉強中の身で有るからこそ、自分が意識しているトレンドを明らかにして、逆に皆さんが何を自分たちのトレンドと意識してWEB制作活動を行なっているのかを知ることが出来れば僕自身の成長にぜったい繋がると思ったので、まずは僕自身の考えるトレンドを間違ってると言われてもいいから書かせて頂いた次第です!
是非、皆さんもよろしければ「これがトレンドじゃね?」みたいな意見がありましたら教えて頂けると嬉しいです!
特に日本のWEB制作業界を離れて長いですし、今や日本のリアルな制作現場の人の意見なんてお友達レベルじゃないと知ることが出来無いですし、何かそういった日本の制作現場視点から意識するWEBデザイン/制作トレンドとかないか教えてくれるとすごい嬉しいですね!
それでは!追いかけつつ流されず自分の意思と意見をしっかりと持ったトレンドライフをお過ごしくださいませ!