サイドスリーブログ

明日の仕事にすぐ使える、webの「今」を学べるよ!CSS Nite in KOBE


                明日の仕事にすぐ使える、webの「今」を学べるよ!CSS Nite in KOBE

デザイナーのちぃさんです。
WEB業界に入って2年目。
業務ではやりがいも感じ、楽しい毎日を過ごしておりますが、実務での知識やスキルはまだまだ勉強中の身でもあります。

それでなくても、この業界は「トレンド」というものがあり、時代の移り変わりによって、WEBサイトにおけるコーディング機能の向上、デザインの主流などが刻々と変化、進化しています。
それらを追いかけるために、サイドスリーでは勉強会を開いたり、情報交換に努めたり、とにかくネットで調べたり、しているのですが、実際それって正確な情報?という感じで、情報が社内のみで自己完結しがちです(特に作業レベルのスタッフは同業種の方とつながりや情報交換できるような機会がとても少ない…)。
そこで、最近私が参加してとっても良かったイベントがあるのでちょこっとご紹介とレビューをいたします。

その名は、CSSnite(シーエスエス・ナイト)

「CSS Nite」は、Web制作に関わる人のためのセミナーイベント。
今年で12年目を迎え、これまでに、440回を超える関連イベントを通して、のべ51,000名を超える方が参加(2015年1月現在)しています。

イベントは全国的に展開されていて、それぞれの開催地によって「CSS Nite in OKAYAMA」などと末尾に開催地名がつきます。

サイドスリーは神戸元町が拠点なので、私は7月に開催された「CSS Nite in KOBE Vol.17」に参加してきました。

CSS Nite in KOBE Vol.17『PATTERN LAB-柔軟性と拡張性をデザインに取り込む方法-』

7月に参加したイベントは、「パターンラボ〜誰もが使いやすく感じるwebサイトにするために、柔軟性と拡張性をデザインに取り込む方法を探るワークショップ」というものでした。
講師は、サイトやアプリの設計・運用サポートに携わるデザイナー兼コンサルタント 長谷川恭久氏。
内容は、講演とワークショップの2形式でした。

柔軟性と拡張性をデザインに取り込む方法って?

講義の内容としては、ユーザーがサイトに訪問し、ページ遷移、閲覧など一連の動作をする過程の中で、操作画面や操作方法を学習していけるようなデザインを心がけましょうという内容でした。
(めっちゃざっくり言ってしまってますが、実際は2時間超のかなり濃くて深いいお話しでした)
リンク、バナー、見出しなど、サイトにはページが変わっても、同じ仕様を持つコンテンツが登場します。
それらを分類し、それぞれの仕分けごとにデザインをパターン化し、ユーザーが、「このボタンは、さっきのページでクリックした時トップへ戻ったな。じゃあ今回も “トップへ戻る”だな」とデザインを通して体験的に学習してもらうことで、とても使い勝手のよいサイトにしていきましょうね、というものです。

(写真はCSS nite in KOBE公式サイトより)

それをふまえてワークショップでは、

参加者がグループに分かれて、例題として挙げられたwebサイトの各ページに登場する「見出しタイトル」や「記事本文」「一覧を見る」「他カテゴリへのリンク」などのコンテンツを見比べながら、デザインの共通化はできているか、できていなければどうすればいいか、みんなで考えてみようというものでした。

例題として挙げられたサイトは、プリントアウトして配布され(多分20ページくらい)ページ内の各種コンテンツをハサミでチョキチョキ切りながら分類、仕分けします。

そこから、グループで相談しながら、デザインのパターン化を図っていきました。

(写真はCSS nite in KOBE公式サイトより)

それをふまえてワークショップでは、

参加者がグループに分かれて、例題として挙げられたwebサイトの各ページに登場する「見出しタイトル」や「記事本文」「一覧を見る」「他カテゴリへのリンク」などのコンテンツを見比べながら、デザインの共通化はできているか、できていなければどうすればいいか、みんなで考えてみようというものでした。

例題として挙げられたサイトは、プリントアウトして配布され(多分20ページくらい)ページ内の各種コンテンツをハサミでチョキチョキ切りながら分類、仕分けします。

そこから、グループで相談しながら、デザインのパターン化を図っていきました。

(写真はCSS nite in KOBE公式サイトより)

そんなの大体できてるんじゃないの?と思いがちなそこのあなた!

実際に作業してみるとページごとに同じ「見出しタイトル」であるはずなのに、フォントが違ったり、背景色がフラットだったり、はたまたグラデーションだったり。
「一覧を見る」のリンクもボタン化されているものもあれば、テキストそのままのもあったり。
全体というよりもそれぞれのページに合わせたデザインになっているんだなぁという事が分かります。
それというのも、サイト規模が大きくなればなるほど、関わるデザイナーや制作会社が多岐に渡ったり、年数を重ね、ページ数も増えていくと、徐々にデザインのバリエーションが増えていき結果的に統一性を欠いていくそうです。
それを防ぐためにも、はじめにデザインを行う際に、きっちりと今後の運営のことも視野に入れ、他の制作会社や他のデザイナーが作業を行うとしても、統一性がとれるよう、パターン化や、デザイン仕様書の作成を行う必要があるとの事でした。

まとめ

イベントに参加してみた感想は「明日早速使ってみよう!!」でした。 実際の現場でデザインをする時、お客様にご相談された時に、今回学んだことは実践的に活用できるものばかり。
CSSNiteは、私のようにWebについて勉強中の人や、業界の「トレンド」が社内共有だけでストップしてしまってるという方にはぜひオススメです。
神戸での次回開催は、9月17日(土)「カスタマージャーニーマップ作成ワークショップ 〜顧客行動を可視化してあなたのビジネスを再チェック!〜」ですが、こちらはもう予約がいっぱい。

毎回すぐに満員御礼になるので、公式サイトで随時チェックしておくと良いかもです。