Webデザイントレンドをより楽しむためのセッションガイドブック
このエントリーでは、新しくWebデザイントレンドセッションに来られる方、近年より参加をはじめた方のために、よりセッションを楽しむためのガイドを掲載していきたいと思います。
はじめに
ShiftというイベントでWebデザイントレンドセッションをはじめて10年になります。
Shiftは、CSS Niteが主催するイベント名で、年末に開催される1年の総まとめ的なイベントです。
10年ともなると、開始当時はWebデザインに関わっていなかったという人も少なくないでしょう。
セッション中、独自につけてきたトレンドの現象について解説を入れてきましたが、毎年参加されている人にとっては冗長になってしまうということも起きてきました。
そこで、新しく参加された方向けに今後もセッション中にある程度は説明するものの、より細かい話は別出ししたほうがいいかなと思うに至りました。
このエントリーでは、新しくWebデザイントレンドセッションに来られる方、近年より参加をはじめた方のために、よりセッションを楽しむためのガイドを掲載していきたいと思います。
Webデザイントレンドセッションとは
まず、Webデザイントレンドセッションとは、ということを書いていきたいと思います。
本セッションがスタートしたのは、2007年に行われたShift to 2008というイベントからです。
ただ、この時よりWebデザインのトレンドをリサーチし始めたわけではなく、そもそもの開始は、1998年より発行をはじめたWebデザインの専門メールマガジン「Design Wedge」からです。
その後、メールマガジンの休刊とともに、別のオンラインマガジンにて連載をしたり、雑誌で不定期に掲載していただいたりと渡り歩き、CSS Niteへ辿り着きます。
Webデザイントレンドセッションは、グローバル企業、上場企業3,700社、地方自治体1,700サイト、海外話題サイトのキャプチャアーカイブうち、その年にリニューアルされたサイトに関するリサーチ結果がメインとなっているセッションです。

当時のスライドより
Shift 1 (実際の名称はShift to 2008)は、アップルストア銀座で行われ、持ち時間は15分程度でした。
Shift 2(2008-2009)は、会場をデジタルハリウッド 東京本校に移し、時間も50分と拡大しますが、Shift 3では各自持ち時間10分とまた小さくなります。
Shift 4から、ちょっと趣向を変えて日本の企業なども取り入れ始めます。Shift 4は、古巣であるアップルストア銀座に戻ってきますが、時間が少し延長されました。
また、その時つけたセッションタイトル「2010年、デザイントレンドゆく年来る年」は、今のShiftでも使われている表現になりました。
Webデザイントレンドセッションが大きく変わるのは、Shift 5からです。Shift 5では、会場をベルサール神保町に変え、半日イベントという今の形に近いスタイルになります。
Shift 5では、60分という長い尺のセッション、そして新しい挑戦として、ゲストを3人、矢野りんさん、坂本邦夫さん、小山智久さんを迎えたトークショーに近い形に変化しました。
Shift 5で特別ゲストとして来ていただいてた矢野りんさん、坂本邦夫さんは、その後WebデザイントレンドのレギュラーメンバーとしてShift10に至るまで続くことになります。

いつもセッション冒頭で言うお題目
トレンドとはの定義について
さて、セッション名の「Webデザイントレンド」の「トレンド」ってなんだよって話を書いてみます。
毎年セッション開始時に言っている、
「トレンドとは最先端ではない、時代に最適化されつつある現象である」
という題目は、Shift 4にて使い始めました。今ではセッションの根っことなっているスローガンです。
解説してみます。まずこのセッションでは「トレンドっていう言葉を最先端という意味合いでは使いませんよ」っていうことを示していて、世の中で実際にある程度使われはじめているものを紹介しています。
たった一個の現象がトレンドという意味合いでは使われることはなく、いくつかの企業なりが導入しはじめてはじめて、トレンドと呼べるのだと思っています。
加えて、「時代に最適化されつつある現象」というのもすごく大事なポイントと思っています。
紹介している現象というのは、いつの時代においても効果が実証されている手法というわけではなく、効果がなければ翌年には使われなくなってしまうことも多々ありますし、微妙と思われていたものが予想以上に普及していったりもします。
僕は原理ありきで世の中を見ているわけではなく、あくまで今起きている現象こそが時代に最適な状態なものなのだ、という見方で世の中を見ているので、こういうスローガンとなっています。
レギュラー登壇メンバー
Shiftのレギュラーメンバーには、僕と矢野りんさん、坂本邦夫さんがいます。このメンバーで毎年年末登壇をしています。
ただ、地方版においては、僕と坂本さん + 地元の人だったり、原単独の登壇というラインナップになったりします。
ちょっとレギュラーメンバーについて軽く紹介します。
矢野りんさんについて
矢野りんさんは、様々な著作を持つWebデザイナーです。
男性視点のコメントになりがちなコーナーにて、女性ならではの視点が追加されるおかげで彩り豊かなセッションとなっている気がします。
また、矢野さんは結構ズバッと言うタイプの人で、このスパッとしたコメントに毎年「グサッと刺さった」となる人が多数となっています。
矢野さんがいないとShiftのWebデザイントレンドの参加者は半分になってしまうのではと個人的には思っています。
坂本邦夫さんについて
坂本邦夫さんは、普段大阪にてフォルトゥナというWeb制作事務所をやられています。
配色の専門家でもあるので、配色面からのコメントもいただいています。また、視覚に関するアクセシビリティについても造詣が深く、視覚的なコントラストについての指摘をいただいたりもします。
また、企業の裏側の事情などを邪推するコメントがたまにあり、こちらもコアなファンにとって楽しみなポイントです。
Shiftの時は、わざわざ大阪から来ていただいています。
深沢幸治郎さんについて
Webデザイントレンドは、大阪版というのがあり、Re:Creator's Kansai(リクリ)さんによって企画・開催されています。
大阪版も毎年開催されており、大阪版ならではの登壇者ということで、深沢さんがレギュラーメンバーとなっています。
深沢さんは、Web制作者であると同時に大阪十三にてJUSO Coworkingというコワーキングスペースを運営されていたりもします。
深沢さんは、別名ドクターと呼ばれており、ほかの人が気づかないポイントで論理的かつ緻密なコメントをくれたりします。
過去のトレンドキーワードたち
Webデザイントレンドでは、すべてではないですがトレンドに対して独自にトレンドキーワードを作成しています。
これは、何らかのトレンドを表現するときに既存の用語を使ってしまうと、定義に入るか入らないか微妙なラインや別の定義に該当するものをまとめて一つの現象として扱おうとするときに窮屈な感じになってしまうことによります。
あと、個人的なスタンスとしてトレンドキーワードを決めるとき、「面白い」か「真面目」かでいうと「面白い」ほうへ倒しがちなのと、「難しい」か「平易」なものでいうと「平易」なほうへ倒そうと決めています。
これは、Webデザインの専門家の人だけに見てほしいセッションというわけではないので、なるべくわかりやすく、キャッチーにしたいと思ってのことです。
ちなみに下記キーワードを覚えていないとWebデザインセッションが参加してもつまらなくなるとか、そんな堅苦しいセッションではないのでご安心を。
以下、そんなのあったなーってのが続きますよ。

第1回目に取り上げたレイアウトスタイルは今でも盛んに利用されている
Keyword 1 : 横一直線のデザイン(リキッドバックグラウンドとフィクスドレイアウト)
10年前、第一回目のShiftからずっと続いているトレンドは何でしょうか?
というのが2016年に行われたShift10にあった質問でした。
そこで回答したものがこの横一直線のデザインです。
背景はウインドウサイズに追従して伸縮するものの、コンテンツに関しては一定の幅を保つというスタイルです。リキッドバックグラウンドとフィクスドレイアウトという名前で当時呼んでいたものです。
このスタイルは、テーブルレイアウト全盛時代から使われてきましたが、Web2.0時代を迎えてCSSで再実装される形になりました。
ニュアンスも少し変化し、ページのセクションごとに背景色で分けるのではなく、コンテンツ単位で細かく分けるという形に変化しました。
このスタイルは、マルチ解像度の時代にもマッチし、これからもスタンダードなスタイルとして、今後も広く使われていくでしょう。

実はこの当時、標準化が進んだしばらくあとのことだったが、気づいていなかった
Keyword 2 : RSSアイコン
RSSアイコンほど、この10年で標準化され、普及し、そしてあまり使われなくなっていったデザインはないのではないでしょうか。
Webデザイントレンドセッションを始めた時、実はRSSアイコンというのは標準化されておらず百花繚乱の時代でした。
RSSアイコンが標準化されたのは2006年頃のことで、mozillaによってアイコンの標準化が推し進められました。
この標準化以降、RSSアイコンのスタイルは確定して、バリエーションが収束していきます。
しかし、その収束とともに時代も変化していき、表立ってRSSが使われることは減っていき、Webサイト上でRSSのサポートを表示することも減っていきました。
そして、この標準化の流れというのは、今、スクロールアイコンにやってきていると言えます。
2017年の現状、ページがスクロールすることが可能であることを示すアイコンは、ページごとに様々であり、各Webサイトが勝手に作成している状態です。
著名なアイコンフォントがスクロールアイコンをサポートしていくと共に、形状は収束していくのでしょう(その頃には、スクロールが可能であることをアイコンで示すなんてことはアンチパターンとして使われなくなる可能性も考えられます)

当時のスライドより。プランが3つあるタイプサービスや、3人の制作会社などは、こぞって丸の中に写真が配置というスタイルが使われていった。
Keyword 3 : 円窓
円窓というのは、円形の枠の中に別のコンテンツやリンク先のコンテンツの一部を表示するという表現です。
ただし、円形状のインラインフレームを用いてリンク先のコンテンツを表示するという高度なものを指すのではなく、単に画像を使って円形状の切り抜きに見立てるというものです。
つまるところ、グラフィックデザインの分野では普通にあった技法だったのですが、この円窓には普及するにあたって技術的な進歩がありました。
10年前以前にも円窓に該当する技法はありましたが、背景を透過させた円形のグラフィックをHTMLに挿入するという仕組みが中心でした。
ただし、この方法は通常の角版の画像を用意するよりもひと手間かかることになるため、使うところをコスト面も含めて考えることになります。
しかし、その後ブラウザにおけるCSS3のサポートが進むにつれ、スタイルシートによる設定のみで画像自体の加工が不要になり、気軽に使えるようになりました。

自治体Webサイトが勢いづくきっかけになった現象。2011年頃からだんだん過激になっていく
Keyword 4 : 地域ブランディング
Shift 5から自治体サイトを本格的に取り上げ始めたのですが、当時自治体サイトは今ほど活発な感じではありませんでした。
ただ、このころから、ヘッダーやフッターで美しいビジュアルをもってリニューアルするサイトが多数登場し始め、自治体サイトは変わってい来たなと感じるきっかけになりました。
多くの場合、ヘッダーもしくはフッターにて、その自治体の名所・旧跡・特産物などをちりばめた自治体らしさをアピールし、またサイト全体の配色もそれら地のものに沿った色使いとして統一的なブランディングを施すというスタイルが確立されていきます。
その後、ゆるキャラが自治体サイトにも多数登場する時代がやってくるのですが、当時はまだ美しさが競われていた時代でした。
Keyword - :
今後続々と追加予定...
お楽しみに!
更新履歴
- 2017/03/11 「Webデザイントレンドをより楽しむためのセッションガイドブック」を公開しました。過去のトレンドキーワードたちはぼちぼち追加公開していきます
Colophon
- 編集長
- Greative GK. 原一浩 ( kara_d )
- 製版システム
- Clojure / Compojure / Ring / Enlive / markdown-clj / Jetty / MySQL
- Share this magazine!
- Follow designudge
- Follow @designudge