講師だって、最初は初心者だもの[番外] 「Webデザイン行く年来る年(Shift7)」に参加して
── 森 和恵 ──

投稿:  著者:


しわっす! 森和恵です。今日は、月曜日です。気合入れてきましょう!

なんかヘンな書き出しとなりましたが、実はこの土日に参加したイベント帰りでして。テンション高めでございます。今回は、そのレポートを書こうと思っております(こんな詳しいレポートは、参加者でも最速なんじゃないかな。多分)。


参加してきたイベントは、
「CSS Nite LP, Disk 31: Webデザイン行く年来る年(Shift7)」です。
< http://takeda-kenko.jp/products/chingai_kyotan/anetonz_liq_pak.html
>
< http://cssnite.jp/archives/post_2596.html
>

Webデザイナーさんたちが多く集う、CSS Nite というイベントコミュニティで、毎年末に開催される特別なイベント「Shift」は、「来年に向けて、頭の中を Shift(移し替え)て行こうぜ!」という目的の内容になっています。今年で7年目。「Shift7」です。

Web制作業界の今年の総まとめ&来年の展望を、業界で活躍する著名な方々が披露するといった豪華なイベントです。

また、イベント後に開催される懇親会は、100名規模になり、全国からWeb系の人々が集まってきます。参加すれば、今年お世話になった方々にまとめて年末のご挨拶ができちゃいます。一度で二度おいしいイベントなのです。

#ちなみに、もう来年の日程が告知されました。早い。
#ご興味のある方は、Facebookイベントで「未定」登録だけでもしておけば、#情報がいち早く届きますよ。
< http://www.facebook.com/events/1377960532442684/
>

●スマートフォンのWebサイト対応の話

2009年ぐらいから、スマートフォンのような小さいデバイスでもWebページが見やすい&使いやすいように…と取り組みが始まった施策も、もう5年目という月日が経ちました。

タブレットも含めるとずいぶん機種も増え、画面サイズもまちまちになってきて、より複雑な対応を迫られるようになり、ついには「マルチデバイスのWebサイト対応」という様相に。

セッション1「スクリーンの先、わたしたちの仕事の先」では、そんな「人とデバイスの関係性」をリアルに追求した内容になっていました。

スピーカーの長谷川恭久さんが、3か月ぐらいかけて、街行く人をウオッチし、スマートフォンをどのように使っているのか? をデータ収集されたそうです。9月〜12月の間に「1,708」件のサンプルを収集したそうです。

そんなリアルなデータを取ってみて、一般的に言われている「スマートフォンの使われ方」が、違っているのではないか? という話になりました。例えば、「女性は手のサイズが小さいから、小さい機種を好む」とよく言われますが、実際には、大きな機種を”両手”で使っている人も多いなど。

制作者は、通り一遍で言われている事柄から抜け出して、本当に、リアルに、人々がWebを通して、どんな風に情報と接し、理解し、利用しているのかを熟考しなければならないということを体現していたような気がします。

「答えは、スクリーンの外にある」と締めくくられていましたが、本当にその通りで、答えは一つではなく、Webサイトの方針によって、さまざまな捉え方があるのだと思います。必要なことは、「知って、検証して、活かすこと」ですよね。

いろんなことを知っていて、めちゃめちゃスゴイ方なのに、誰もが思っていてもやらない「実地データを調査してみて考察する」ということに取り組んだ姿勢も、もちろん、そこから導き出したまとめも、素敵だなと感じました。実際に行動に移して、やりきる。なかなかできることではありません。見習いたいです。

セッション5「スマートデバイス 2013 → 2014」では、スマホ対応されているサイトを調べ、今年のデザイン傾向とスピーカー自身が来年はこんな感じに変わるだろうということが話されました。

上場企業2139社を調べ、スマホ対応されていたのは288社だったそうです。そのうち、Web業界でブレイクしたスマホ対応の技術的手法「レスポンシブWebデザイン」を使っていたのは、7社でした。

わたしたちWeb業界が熱くなっているほど、一般的には、スマホ対応が浸透していないと、個人的には感じました(企業サイトでは、ということですが。ニュースサイトや物販サイトなどを見ていると、スマホ対応の浸透率は半端ないので、ここもセッションでは、多少は触れて欲しかったなと思います。あ。自分で調べればいいのか。やるかな。やろうかな。。)

技術的にお試しをしていた段階は終わり、実務ベースでテッパン的な実装技術も浸透してきたということです(スマホ対応されている画面では、3つの特定のパターンが多くみられたそうで、見せ方が画一的なんだな、というのも気になりました)。

今後は、さらに具体的に進んで「本当にユーザーにとって使いやすい見せ方ってなんなの?」という所を探求することになりそうと締めくくられました。技術が進歩すると、一般に降りてきてどんどん普及していく様子が感じられてき
ますね。スマートフォン対応は、今後も目が離せないトピックになりそうです。

●デザイントレンドのうち、「フラットデザイン」の話

フラットデザインとは、今年のWeb業界を騒がせたデザイン手法のひとつで、「平面的なデザイン」をするというものです。

【今さら人には聞けない、スキューモーフィズムとフラットデザインの違い
:MEMOPATH】
< http://memo.goodpatch.co/2013/11/skeuomorphism-and-flat-design/
>

Microsoft の Windows8 で使われている「モダンUI」や、Apple の iOS7 で使われているような、グラデーションやドロップシャドウなどの立体的に見せる要素をそぎ落とし、ベターっと塗られたデザインを思い浮かべる人が多いのではないか? と思います。

フラットデザインは、Webデザイナーたちの間でも、物議をかもしだしました。

「すっきりしてて、見やすくてイケル!」「装飾要素を使わなくなったから、楽じゃん!」という肯定的な捉え方の人もいれば、「手抜きっぽい」「どこもかしこもベタっとしてて、わかりにくいし使いにくい」「装飾ができなくなって、デザインがどこかぼんやりしてて、バチッと決まらない…」という否定的な人もいます。

セッション7「OSのフラットデザインを考える」では、Microsoftの春日井さんが、フラットデザインについて語られました。その背景、歴史から、現状はもちろん、MicrosoftがWindows8で採用しているフラットデザインのことまで、じっくりとわかりやすく。

すでにスライドが一般公開されているので、フラットデザインが気になる人はぜひご覧になってみてください。
< http://www.slideshare.net/ykasugai/os-29200926
>

特にスライド36枚目から始まっている「モバイルフロンティア・iOS7 Design Resources・Android Design Principles・Windows8 design principles」の所は必見です。フラットデザインを推奨している人、メーカーの個々で「フラットデザインで気をつけるべきポイント」がまとめられています。

私自身は、フラットデザインを比較的冷めた感じで見ていて「流行のひとつ」としてしかとらえていませんでした。このセッションで春日井さんも語られていましたが、「ごてごてと甘いデザインが流行った後には、シャープですっきりしたデザインが流行る」というように、流行には賞味期限があって、回って行くもので、その流れとしてしか思っていませんでした。

ですが、このセッションをきいて、デザインが成熟していくと「フラットデザイン」に行きつくのかも…と思うようになりました。それほど、デザインの理にかなっていると感じたからです。

デザインを習う時に「引算のデザイン」という言葉を聞くのですが、これは、デザインする側は、どうしても不安になって、ゴテゴテと飾りたくなるものだけれど、それを止めて本当にいるものだけを残して、画面を整理するのが、本当のプロなんだということを表しています。

フラットデザインは、「引算のデザイン」なんじゃないか、と思いました。同時に、簡単そうに見えて、デザイナーの腕が試されるという、怖い土俵なのではないかな、とも。

コンテンツ(記事)を読むことに気持ち良く集中してもらえるような、サイトデザインをするためには、インターフェースは限りなく主張をなくし、透明になる必要があります。でも、本当に透明になってしまったら、次のページに進めない、つまり、使いにくいサイトですよね。

そのギリギリのラインをどう攻めるかが、フラットデザインの形なのだと思いました。

セッション8「Webデザイントレンド:キャプチャで振り返る2013年」で紹介された今年のWebサイトたちの中にも、フラットデザインを取り入れているサイトは多く、また、難しい手法だけに、間違った迷走ぶりも紹介されていました。

海外のサイトでは、フラットデザインが花盛りで、使われてから成熟期を迎えているので、セッションで紹介されている意外にも、自分でいろいろと調べてみる必要があるなと感じました。

また、日本のサイトでも、取り入れているサイトは多いようですが、フラットに思い切って振り切る勇気が持てずに、中途半端なフラットデザインになっていて、その良さを殺してしまっている…という結果には、日本らしさを感じてしまいました。

私自身がこれまで軽んじていたことがあり、フラットデザインに対して、勉強すべきいろいろ課題はありますが、まずは、フラットデザインを取り入れだした、Microsoft・Apple・Googleの三社のWebサイトや製品を研究してみようと思います(まとめ…たいなぁ。まとめるか!)。

……さて、今回はここまで。

Shift7のイベントのより詳細が知りたい方は、当日の様子がわかるTogetterもおすすめです。いろいろなキーワードを拾ってみて、自分で深く掘り下げるのも面白いかと思います。
< http://togetter.com/li/602801?page=1
>


次回は、2014年年明けになりますね。なんと、記念すべき連載50回目を迎えます。ほそぼそと書き続けてきましたが、なにか面白いことをやろうかなーと思います。お楽しみに。(^θ^)

※記事へのご意見・ご要望は下記より受付ます。
< http://goo.gl/rN5Dg
>

【 森和恵 r360studio 〜 Web系インストラクター 〜 】
< site: http://r360studio.com
> < twitter: http://twitter.com/r360studio
>
< mail: r360studio@gmail.com >
< サイト制作の教科書 r360study: http://www.facebook.com/r360study
>


今回のイベントで上京した折に行ってきたのが、江戸前寿司の京辰とKITTE。どちらも、東京駅にあります。新幹線の待ち時間なんかにおすすめですよ。

・すし京辰 東京駅サウスタワー店
< http://tabelog.com/tokyo/A1302/A130201/13052222/
>

お友達がお寿司を食べていたので、たまらず自分も! と思いたって食べてきました。江戸前寿司は初めてだったのですが、一貫ずつ丁寧に仕事がされていて、目も舌も楽しめました。ランチ時で、10貫+かんぴょう巻き+あら汁がついてきて、2500円はお安い。立地がわかりにくく、土日のお昼でも空いてて使い勝手が◎。

・KITTE B1 「KITTE GRANCHE」
< http://jptower-kitte.jp/floor/B1F.html
>

郵便局を改装してオープンしたKITTEのB1フロアには、全国から集まった美味しいものが勢ぞろい。お土産を買いに行ってきました。全国のお土産が集まる「諸国フーズプラザ&おかしプラザ」は、圧巻です。インスタントみそ汁でお馴染みの天野実業さんの「天野フリーズドライステーション」では、具とお味噌を別々にチョイスできますよ。