Webデザイントレンドをより楽しむためのセッションガイドブック

このエントリーでは、新しくWebデザイントレンドセッションに来られる方、近年より参加をはじめた方のために、よりセッションを楽しむためのガイドを掲載していきたいと思います。

Story Permalink

はじめに

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

Magazine Archives

vol.122

2016-Feb-01

Cover

台湾に行ってきました。

今回のカバーは、台湾にて撮影したものです。

自治体Webデザイントレンドこぼれ話 : ここだよマップ

CSS Niteの年末イベントShiftでやっているセッションにデザイントレンドというのがあります。

descjop で遊ぼう day 16 : Windows版のメニューを表示する

2015年の振り返り的な一人レトロスペクティブ

そういえば、まだ2015年の振り返りをマガジンに掲載していませんでした

編集後記

vol.121

2016-Jan-14

Cover

今回のカバーは、、、UFO?

自治体Webデザイントレンドこぼれ話 : 予告

CSS Niteの年末イベントShiftでやっているセッションにデザイントレンドというのがあります。

descjop で遊ぼう day 11 : Omのコンポーネントで遊ぼう

descjop で遊ぼう day 12 : Omのコンポーネントで遊ぼうその2

descjop で遊ぼう day 13 : Clojure ワークショップでTAしてきた話

descjop で遊ぼう day 14 : アプリケーションメニューを作ろう

descjop で遊ぼう day 15 : descjop 0.5.3をリリースしました

編集後記

vol.120

2016-Jan-14

Cover

今回のカバーも、初詣に行ったときのショットです。

descjop で遊ぼう day 6 : Electronがうまくダウンロードできないとき

descjop で遊ぼう day 7 : Hello Worldを出力してみるには

descjop で遊ぼう day 8 : Om basedテンプレートを使ってみる

descjop で遊ぼう day 9 : Om basedテンプレートにボタンをつける

descjop で遊ぼう day 10 : Om basedテンプレートにボタンをつけるその2

編集後記

vol.119

2016-Jan-10

Cover

今回のカバーは、初詣に行ったときのショット。

「descjop で遊ぼう」について

「descjop で遊ぼう」というのは年末にやったアドベントカレンダーのシリーズなのですが、前段としてまずはその解説をば。

descjop で遊ぼう day 1 : はじめに

descjop で遊ぼう day 2 : 3つのテンプレート

descjop で遊ぼう day 3 : 環境構築をしよう

descjop で遊ぼう day 4 : Helpを見てみよう

descjop で遊ぼう day 5 : デフォルトアプリケーションのビルドと起動

編集後記

vol.118

2015-Oct-22

Cover

今回のカバーは、Stack Overflow DevDaysのイベントをお手伝いしたときの窓からのショット。

Vaqum Web Design Review

創刊以来延々と続くWebサイトレビュー

ミカヅキClojure : ゼロからはじめるClojure入門第2回

Clojureっていうじつに面白いプログラミング言語をとりあげていきます

インフォメーション

おすすめのイベント・勉強会情報を紹介

編集後記

vol.117

2015-Oct-07

Cover

今回は散歩道からのショット

Editor’s Picks

designudgeで扱っている内容に近いジャンルのリソースのうち気になったものなど

U.S. Web Design Standardsを見てみる

今話題となっているU.S. Web Design Standardsの周辺情報など見てみました

Bootstrap 4徹底攻略 (3)

Bootstrap 4のアルファ版がでているので使おう

インフォメーション

おすすめのイベント・勉強会情報を紹介

編集後記

vol.116

2015-Sep-28

Cover

今回は帰省した際に通った三島からのショットです

Vaqum Web Design Review

創刊以来延々と続くWebサイトレビュー

みそじ過ぎからの英語再学習

40を目前に今までサボっていた英語学習をはじめました

Bootstrap 4徹底攻略 (2)

Bootstrap 4のアルファ版がでているので使おう

ミカヅキClojure

Clojureっていうじつに面白いプログラミング言語をとりあげていきます

インフォメーション

おすすめのイベント・勉強会情報を紹介

編集後記

vol.115

2015-Sep-13

Cover

前回と同じ開発合宿のショットから一つ

Vaqum Web Design Review

創刊以来延々と続くWebサイトレビュー

開発合宿へ行こう! : Python mini hack-a-thon 夏山合宿 2015

先週末に行ってきた開発合宿について書きました。

ミカヅキClojure

Clojureっていうじつに面白いプログラミング言語をとりあげていきます

インフォメーション

おすすめのイベント・勉強会情報を紹介

編集後記