今週末、3/10 (日) に開催される Web デザイントレンド in OSAKA をより楽しむために過去に紹介したキーワードを紹介していく第 2 回目です。この連載は人によっては「そんなの知ってるよ」が続くことになりますが、今まであまりトレンドを意識してこなかったとか、改めてトレンドを復習しようとしている人に寄り添って発信をしております。
さて、トレンドというのは、現象を観測したその年だけで測れるものではありません。前年や前々年とどう違うかによってようやく今を導き出すことができるようなものです。大阪版だけでも 8 年目を迎える Web デザイントレンドセッションは、初めての人でもわかりやすくなるように気を使ってはいるものの、内容的にどうしてもハイコンテキストになってしまう部分がありました。
第1回目となる前回はみんな大好き「フッター山」について触れました。
第2回目となる今回はこれまで紹介したトレンドの中でも特に息の長い「イアイ」について取り上げていきます。
イアイ
「イアイ」について最初に取り上げたのは、2011 年頃です。翌年の1月には大阪版の Web デザイントレンドが始まることになったので、一番最初からご参加いただいている方は、生で「イアイ」の解説を聞いたことがあるはずです。
当時の大阪版の告知ページをちょっと引っ張り出してみましょう。
セッション概要として以下の内容が記入されておりました。当時はまだ震災の影響が色濃く残る時期でした。
2011年は東日本大震災をはじめ、日本を大きく変える出来事が起きました。IT的なトピックとしては、タブレットや様々なアプリの普及により、閲覧環境スタイルの変化が起きています。これらの社会環境の変化はWebデザインにも影響を与えたのでしょうか？ これまでのトレンドのカウンターとなるスタイルは登場してきているのかもしれません。
「イアイ」について話を戻します。トレンドとしての「イアイ」は、実に明快で、コンテンツの区切りなどをダイナミックに斜めに切るというものです。コンテンツの境界を斜めに切っていくことから「イアイ」と命名しました。
ちょっと 2011 年当時のスライドからピックアップしてみましょう。こんな感じでした。
それまでの大きなトレンドとしてあった、画面全体を色で区切っていくタイプの直線的なレイアウトから、より動きを感じさせるレイアウトへシフトしていく時代の変化を感じたのを覚えています。
以下のような複雑な構成の「イアイ」も様々作成されました。長く残っていくトレンドは、必ずしも美しいものではなく、取り入れやすいという側面も大事なポイントだと思っています。現在でも使われる「イアイ」は「イアイの例 1」のようなシンプルなイアイが定着しています。
その後、グローバル企業や上場企業でも「イアイ」は取り入れられていき、今日まで長く使われるスタイルとして定着しました。
グラフィックデザインではよく見られる斜めの区切りですが、レスポンシブな Web デザインにおいては、画面全体で斜めの区切りを施す場合、解像度の面で悩ましい問題が発生します。初期の「イアイ」においては、画像として表現されていましたが、CSS3 の Transform を利用するなどいろいろな手法が開発されて今に至ります。
ARTICLES
AUTHOR
原 一浩
カンソクインダストリーズ代表 / グレーティブ合同会社代表
1998年に独立し、同年、ウェブデザイン専門のメールメディア DesignWedgeの発行を開始。Webデザイン業の傍ら、海外のWebデザインに関する情報発信を行う。
雑誌への寄稿多数。主な著書に『はじめてのフロントエンド開発』『プロセスオブウェブデザイン』、『Play framework徹底入門』、『ウェブデザインコーディネートカタログ』など。自社製のWebデザインのクロール＆キャプチャシステムvaqumをベースに、様々なリサーチを行っている。Web 検定プロジェクトメンバー。