最優秀賞なしとなってしまったものの、レベルの高い作品が集まったコンテスト

審査員の益子さんも記事を書いていらっしゃいましたが、審査員ごとにどの点を重視するかがちがったためかなり票が割れました。

私が評価させていただいたポイントなど

これから現場で困るだろうHTML5+CSS3の技術を先取りして実装してみることで問題点を洗い出し知識として共有する。

この機会を利用してこれからのスタンダードを業界に示す。

今回のコンテストはこのような目的があったため、HTML5の新しい要素を効果的に使っているか、CSS3のプロパティを活用しているかを最重要視し、そのほかのブラウザへの対策については重要度を下げて審査させていただきました。

ちなみに益子さんは対象外ブラウザ（IE 6、7、8など）への対応を、ひとつの足切り基準としました。とのことです。

まず、コードを見ることなくCSS3へのチャレンジ度をはかるひとつの目安として考えたのが、「画像ディレクトリの中身」です。

課題サイトのデザインは、基本的に画像を利用しなくてもCSSだけで再現できる背景になっていましたので、グラデーションを再現できるプロパティ（-moz-linear-gradientや-webkit-gradientで）などを積極的に利用することで画像数を必要最小限にすることができます。すなわちCSS3を積極的に利用しているひとつの目安となります。

また、HTML5の新要素へのチャレンジ度・適切な意味の場所に適切な要素が使われているか・アウトライン設計は妥当か、などを中心に拝見しました。

私が選ばせていただいたのは・・・（応募順に）

• フランクリーさん
• milkmixさん
• 小林信次さん
• 渕上伸吾さん
• 嶋田保則さん
• Shoon_Miyamotoさん

上の６名の方々と・・そしてあまりにもマニアックで目に止まった３作品：

• XMLで書いていらっしゃった原田直貴さん
• SVGで書いていらっしゃったHitoyamさん
• 表示高速化（リクエスト数最小化）の究極を実現、画像もCSSもスクリプトも何もかもひとつのHTMLにしていらっしゃった岡部和昌さん

以上の皆様を推薦させていただきました。

どの作品も作者さんの考えが伝わってくるものが多く、審査を通してとても勉強になりました。ありがとうございます。

今回のセミナーでは審査発表のみとなりましたが、再演版の CSS Nite LP Disk9.2（reprise）ではコーディングコンテストの解説もおこなう予定です。前回参加できなかった方は是非お申し込みしてみてください！

私が考える「成功するプロジェクト」

• (Web 制作の場合)受注側と発注側が共にゴールを認識しているプロジェクト
• 限られた予算とスケジュールでも、相互納得の上でタスクが決められ、実行できるプロジェクト
• 設定した目標を達成するなど、結果をだせるプロジェクト
• プロジェクトメンバー同士が「やってよかった！」と思えるプロジェクト（→その時の嬉しい気持ちが次の行動をおこす原動力となり、良い循環が生まれるきっかけにもなる）

Web 制作プロジェクトにおいて、Web に直接触るエンドユーザーさんの喜びをイメージして制作するのはもちろんだと思いますが、何よりも制作過程においてメンバーそれぞれがゴールへ向かう意識、それぞれのポジションの役割を果たすことが大切と考えています。

やってよかった！と思えるプロジェクトは、関わる人達にとって心の栄養になりますし、メンバーが常に心地よい状態を保てていると、次にもっと良いアイデアを出そうという気持ちにもなっていきます（行動に結びつきます）。

これはクライアントワークに限らず、社内や何らかの目的を持ったサークルでも同じではないでしょうか。

サイボウズ Live などのツールは、プロジェクトメンバー同士が単に情報交換をしやすくするというだけでなく、コミュニケーションロスを最小限にして、お互いに理解しあうことを促進できるツールだと思います。

規模にあわせて上手に活用していくことでプロジェクト成功に結びつけることができるようになると思います。

サイボウズ Live の担当者さんはサービス愛たっぷりでエネルギッシュ！

今回出演させていただいて嬉しかったのは、サイボウズ Live の担当者さんはとってもエネルギッシュで、サイボウズ Live への愛情をたっぷり感じ取ることができたところです。

成功するサービス（ビジネス）に共通しているところは、何よりも作り手、売り手の人が心からサービス（商品）を愛して楽しく使っている姿が伝わってくるサービスだと思っています（私はそういうところをすごく大切にしてしまうのですが）。

真摯に機能追加などの要望に対応していらっしゃったりして、今後どうなっていくか楽しみなサービスのひとつになりました。

HTML5+CSS3の技術を先取り実装してみる楽しいコーディング

今回のコンテストはHTML5+CSS3にチャレンジできる、とっても楽しい内容になっています。対応ブラウザはFirefox3.6, Safari4。これなら普段の制作で強いられるような表示の違いについて悩む時間をかけることなく、思う存分美しく素敵な要素やプロパティを華麗に使うことができますよね！日頃HTMLとかCSSを愛でている人にとっては興奮する内容ではないでしょうか！！

コーディング課題は、Movable Type 5 の紹介ページとなっています。デザインカンプをみるだけで「ああ〜ここのシャドウ♪」「きゃぁ〜このグラデーション☆」などと頭の中がプロパティでいっぱいになりますので（？）コーディング大好きな方は是非応募してみてはいかがでしょうか。

• コーディングコンテストの応募・データダウンロードはこちらからどうぞ。

概要

デザインの構想から完成まで。
デザイナーがどのような工程を経ているのか？何を大切にしているのか？ というようなことを、経験をもとに共有しあい、理解を深めていきます。

勉強会の内容

主に以下のような内容で進行しました。

1. nanapi のデザインプロセスブログ記事（その１、その２）をとりあげ、軽く振り返る
2. 事前アンケートより、関心が高いトピックについて意見を出し合う

ディスカッションを振り返って・・・

関心の高かったトピックのうち、「クライアントとのコミュニケーション」「コンセプトの決め方」「ユーザ調査・分析・ペルソナシナリオ手法」の部分について、制作の現場ではどのようにやっているのかということを中心に意見を出し合いました。

クライアントに提案を行う際に「（サイトができたとして）5年後に何をしたいですか？という質問で、本当の目的が見える」（５年後のビジョンの共有）という意見など、自分のやり方以外のお話をいろいろ知ることができて参考になりました。

反省点など

第0回ということで試験的に、手探りにはじめてみましたが、とくに勉強会の進行についてとても学びが多いものでした。当日の進行においては不慣れなためにあまり上手にできず申し訳なく思います。また、メールやTwitterなどでご意見をいただいた方、ありがとうございます。この場を借りてお礼申し上げます！

• デザイナー・ディレクター・プログラマーといった役割が見えにくいまま幅の広い（どちらかというとディレクション寄り）話題を中心に進めてしまい、結果的にデザイナー視点がぼやけてしまった
• デザインプロセスの前段階・前提となるコミュニケーションについての話が大きくなってしまい、デザインプロセスになかなか踏み込むことができなかった
• 30人で座談会のような形式にしたため、人によっては発言をしづらい状況をつくってしまった

次回以降の課題

• 人数を減らして発言しやすくするか、あらかじめ決めたテーマについてグループワークの上で発表してもらうスタイルにする
• 発言時に普段の役割が見えやすいように名札もしくはその場で見えるポジションペーパーなどを作成する
• テーマを広げすぎない ... 次回はもっと狭いテーマで、「ビジュアルデザインの起こし方」にフォーカスする予定です。

ブログ・Twitter でのレポート

当日、ハッシュタグについて何も触れないままホワイトボードに書いていただけなのに活用いただき、ありがとうございます。今後発信の際には活用していきたいと思います！

※レポートの際に、トラックバックでお知らせいただけると嬉しいです。

• Twitter ハッシュタグ（#povcc）
• WEB勉強会POINT OF VIEWに参加してきました！｜しらさかブログ-デザイン事務所で働く東洋人の成長日記-

私がデザインをご依頼いただいたときに踏むデザインプロセス

1. 目的を明確にし、戦略を決める
2. 要件定義を行い、サイトの構造を決める
3. ページの骨格を決めたり、ページの中で見せたい情報に優先順位をつけたりする
4. 見た目の表現を形にする

大枠に考えるとこのようなフローでデザインを行います。プロトタイプを作ってから問題点を見つけてブラッシュアップをする場合は2〜5をいったりきたりすることも多いです。

また、そのときのコンディションによって順序が入れ替わることもあります。

デザインプロセス（その１）でやってきたことを振り返ると、まだ1.の段階というわけで、入り口にようやくたったというところでした。

※nanapi ではロケットスタートさんが考えていらっしゃる中期的・長期的戦略があるのですが、まずはリリース後＞集客に成功するというフェーズでのデザインに絞って書いています。

Step2〜3：要件定義を行い、サイトの構造を決め、ページの骨格を決める

Step4 見た目の表現を形にする

おそらく、この工程はデザイン工程の中でもかなり悶々とする時間が長いところだと思っています。

実際にnanapiを制作した時には、Step4をやりながらStep3を考えるような感じですすめていったので、左脳（目的や理由がはっきりした設計を考える）・右脳（心地よさなど感情に訴えかける見せ方を目指す）がフル稼働し、脳みそがたっぷり汗をかいたような気がしています。

苦労したのはグローバルナビゲーションの設計

このような感じでほぼ現状に近づいてきましたが、自分が利用者になったときのことをイメージすると、どうしてもグローバルナビゲーションの導線が自分の欲求とあわない気がしていました。

また、一部の女性テスターの方々に、メニューが黒いせいか重たい印象という意見をいただいていたこともあり、ナビゲーションの設計だけでなく見た目の面でも改良しなければ私自身も納得がいきませんでした。

おわりに

私は好きがこうじて、独学でひたすらデザインの勉強をやってきてこの業界にとびこんでしまった人です。デザインの勉強をしてきたときに、あまりこうしたプロセスを具体的に紹介しているところが少なくて自分なりに苦労したりもしました。

弊社の代表、大日田はデザイン思考が身についた開発者だったので、そういう面ではとてもよい刺激を受けていたのですが、具体的な受託制作の進め方などというものに関しては、正直に言って2人とも勝手がわからないところだらけでした。
私たちに仕事を依頼してくださるお客様に対して、自分たちの力をできるだけ発揮したい。そのためにはどうしたら良いのかということを軸に、試行錯誤で色々とやってきて今のようなかたちになってきているという感じです。
他のプロの方からみたらおかしなところもたくさんあるかもしれません。もちろん、まだまだ改善できる点はたくさんあると思っています。デザインの仕事は、お客様と一緒につくりあげる仕事だと考えています。ご一緒にお仕事をさせていただく中で、より良いかたちを共につくりあげていけたらと考えています。

エスカフラーチェでは、お客様のビジネスを成功に導く手段のひとつとしてデザインを特に重要なものと位置づけています。

デザインの面白いところは、美しいだけでもだめ、教科書的に使いやすいだけでも差別化にならない。それらを超えて、人の感情に訴えかける力が必要とされているところだと思います。
これからもデザインによって人の生活がもっと豊かになるようなお手伝いができたら嬉しいです。

ロケットスタートに全力投球を誓った、けんすうさんからのご依頼

ある日、ロケットスタートの社長、けんすうこと古川健介さん（以下、けんすうさん）から

：HOWTOサイトをつくりたいからデザインを依頼したい！

ということで早速じっくりとお話を伺うことにしました。

ベンチャーだからこそできる！？合宿的制作スタイル

以前けんすうさんと一緒にお仕事させていただいたときに双方にとってよかったことがあります。

それは、デザインカンプができあがるまでのプロセスの段階で、短期間ながらじっくり直接やりとりする時間をつくる、ということでした。

宿泊こそ伴わないものの、合宿に似たようなスタイルです。
長い時間をかけるので一見コストがかかるようにも見えますが、直接やりとりすることで得られる情報量は多く、行き違いが少なくて結果的にスピードアップできるとお互い（以前お仕事したときに）感じていて、今回もそのようなスタイルで取り組むことにしました。

ちなみに通常の制作スタイルだと・・１回の打ち合わせ（長くても２時間くらい）でお客様の要望を最大限に吸収して、潜在的に何を求めているのかをじっくりと考えて…その後メールや電話でのやりとり、ということが多いのですが、合宿的スタイルではメールや電話によるタイムラグも発生せず、短期間に成果を出すときに効果的だと思っています。

最初のヒアリングのメモ書き

Howtoサイトをつくりたい、ということでけんすうさんが考えていることを聞き出しメモにとりました。

▲最近、サイト制作の前にヒアリングをする際には、自分の手になじむアナログなやりかたでメモをとって、イメージを忘れないように気をつけています。
個人的にはマインドマップ的にかいておくと、全体像を忘れにくいと思っています（クリックで拡大）

コンセプトをはっきりさせるまでの道のり

デザインをご依頼いただいたとはいえ、見た目をどうのこうのというだけでなくそもそもどうあるべきかというところからアドバイスが欲しいということでした。
そもそも私がデザインを考えるときにどうしても根本的な目的とか、何をもってゴールなのか、というのを明確にしておかないと良いデザインは生み出せないですから、最初の段階の話し合いにはかなりの時間をかけました。

けんすうさんが最初に考えていたイメージ

▲ワイヤーフレーム案（クリックで拡大）

この画像はヒアリングの時点で、けんすうさんが持ってきてくださったワイヤーフレーム案です。「家電量販店で一番お得にポイントを使う方法」といった、今のnanapiにもありそうなネタをタイトルに置くなど、やりたいイメージというのが伝わってくるワイヤーフレームでした。
コミュニティの運営について多くの実績をもっているけんすうさんだからこそ出てくるアイデアが詰まっています。（今のnanapiのレベルシステムの原型とか、評価システムの原型がちゃんともりこまれているのがわかります）

サイトリリース時点でどうあるべきか、をはっきりさせる

具体的にデザインに落とし込むには、「サイトリリース時点でどうあるべきか」をはっきりさせる必要があります。

売上やPVは指標としてとてもわかりやすいですが、リリース時点ではまず

• 多くの人にサイトを知ってもらう（具体的な数値はここでは割愛します）
• 書き手にとってよい体験を与える
• 書き手にとって書きやすいUIにする
• 読み手にとって有益な情報を与える
• 読み手にとって「やってみたい情報がたくさんあるね」「使えそうだね」というイメージを与える

といったような目標を定めました。

ロケットスタートのお２人が心から楽しく取り組める事業であってほしい

私としては、せっかく同じベンチャーで新しいサイトを立ち上げる以上、何よりロケットスタートのお２人が心から楽しくとりくめる事業であってほしいという思いがありました。

けんすうさんが今までに作ってきたサービスの共通点は、どれもギスギスしていなくてほんわかしていると思っていたので、けんすうさんの良さをサイトに取り込むのはサイトにとっても大変メリットが大きいと考え、女性向けに絞ってみせていくのはどうかと提案してみました。

「ライフレシピ」という概念

そこで考えたのが「ライフレシピ」という概念です。
Howto記事といえばブックマークサイトでも多く人気にあがってきたり、何かと効率の良いやり方はライフハックとも呼ばれて多くの人の注目を集めていますが、もっと女性にも親しみやすい呼び方を考えたときに、お料理のレシピのごとく、よりよい生活のやり方（ライフレシピ）というのがしっくりくると思ったのです。

ということで早速トップページでどういう見せ方をするかブレスト

生活を良くするというアプローチでは、そもそも現状に満足していたり問題だと認識していない場合にとても届きにくいものになってしまいます。
どんな見せ方をするにしても、結果的に多くの人に読みたいと思ってもらえる仕掛けが必要です。

２種類の見せ方

このように大きく分けて２つの見せ方があるという仮説をつくり、問題提起型の一つの例をプロジェクトメンバー（けんすうさん・wadapさん・私）で考えました。

▲問題提起で見せるイメージのラフスケッチ（クリックで拡大）

すると・・・
モテない・ドケチ・・などといったネガティブワードが混在してきて、３人共に

「なんかちがうなー・・・」

ということで仕切り直し。

nanapiの原型が生まれる

最終的にけんすうさんが「セブンリッチ・すべての問題は７つにしぼる」と言いだしたのをきっかけに、ななつ・・語感がいいから「ナナピ！」というノリで、nanapiという名前が生まれました。
７つの問題をあてはめることで、７つのカテゴリーも生まれたわけです。

▲nanapiのラフスケッチ。現状と少し違いますが、ずいぶん近づいてきました。（クリックで拡大）

私が特にいいなと思ったサイト

• フルFlashのサイトだとしてもプラグインのない環境の人に正しく情報が伝わる
• キーボードだけでもサイトが操作できる
• 目的にあったビジュアル表現がされている
• 重要な情報とそうでない情報にきちんとメリハリがついている
• 多くのユーザにとって使いたい機能が使いやすい位置に配置されている
• サイト内で出てくる文言にも気配りがなされている

どんな立場で参加したか

サイト制作者＆サイト更新者の立場で参加しました。

CMSの興味深いところは、制作者の立場・更新者（ライター）の立場・コンテンツ管理者・決裁者それぞれの立場で、ニーズが異なるというところという気がします。
そして、それぞれの立場にとってやりたいことを効率良く叶えてくれるツールであってほしいのです。

「Power CMS for MT」のプレゼンをされた、アルファサードの野田さんのスライドの最後にあった言葉が印象的でした。

ぶっちゃけ。そのCMSで儲かんの？

CMSを利用する以上、使わなかった時よりも儲かる（メリットがある）ようでなくては本末転倒になってしまいます。忘れてはならない視点だと思いました。
Web制作では、お客様（もしくは現状何かに困っている方々）にとって、適切なツール（解決策）を考え、提案する必要があります。
MTの良さはとても理解していてお客様にも提案しやすいのですが、他のツールについてはあまり知りませんでした。今回知るきっかけをいただけてとても良かったです。

製品説明会色の強いセミナー

今回新鮮だったのは、他の技術系セミナーとは異なり、製品のPRを聞くことによってCMSを知るというスタイルになっていたことです。
そのため、どうしても製品そのものの品質を正確に知ることはできず、プレゼンの質・配布物の質によって左右されてしまうように感じました。

本当にそれぞれの立場で良いかどうかは、実際に触ってみないことには本当に理解することは難しいものと思います。
とはいえ、なかなか全てのツールを使って比較ということは時間もかかりますし現実的ではないので、自分（制作者）あるいはお客様にとって優先的に叶えたいことは何か、ということに焦点をしぼって機能比較すると良さそうだと思いました。

余談

もともとMTをきっかけにこの業界に入ったほど筋金入りのMT好きです。
MTは
・表示させたいと思ったことのほとんどを簡単に実現できる
・蓄積したノウハウを活かせる
ということもあり、少なくとも私にとってはメリットが大きいですが、今後は今回知ったCMSも選択肢に入れつつ、柔軟に使い分けしたいと思います。