Tagged

プロセス

A collection of 71 posts

Webデザイン

カンプがなくなったときのデザイナーの役割

手段を再想像する 昨年末に開催された CSS Nite Shift 5 で「Reimagination（再想像する） [http://www.yasuhisa.com/could/article/prototype-the-future/] 」の話をしました。人とコンピュータの関わり方が行動や価値観を再定義しているのと同じように、Webサイト制作にしても同様のことがいえます。今までの当たり前を疑い、未来に柔軟に対応できるワークフローが必要とされています。 例えば従来必須だと言われていたワイヤーフレームも考慮対象です。少し前に ASCII へ「柔軟性あるデザインプロセスへ移行するためのヒント [http://ascii.jp/elem/000/000/776/776868/] 」という記事を寄稿しました。ワイヤーフレームが果たそうとしているコミュニケーションの目的は間違っていませんが、つくるためのツールや手法に問題があるのではないかという疑問を投げかけた記事。絶対いると思い込んでいるものも、今の時代にマッチしなくなってきているものは少なくありません。 また、Photoshop や
プロセス

講師をして感じたプロトタイプの可能性

昨年暮れから今年のはじめにかけて デジタルハリウッド大学院 [http://gs.dhw.ac.jp/] 秋葉原校にて「未来のインターフェイス」講座の講師をしていました。全 8 回のこのコースは、予測不可能な社会でデザインをしていく上で、少しでも早くアイデアを形にして伝えるためのノウハウと実践に近い演習を行いました。未来的（SF的）なインターフェイスを考えるというよりかは、今あるデザインの課題へのアイデアをプロトタイプし、未来へ繋げていくためのプロセスを学ぶ講座になりました。 昨年の 5 月から、青森 [http://www.yasuhisa.com/could/article/webdesign-and-prototyping/]、 名古屋 [http://www.yasuhisa.com/could/article/paper-prototyping-seminar/]、金沢 [http://www.yasuhisa.com/could/article/uxkanazawa-prototyping/] でプロトタイプに関するセミナーやワークショップを行いましたが、デジハリ大
プロセス

コラボといっても平等ではない

2人以上が共通のゴールに向かって協力して進めるコラボーレション。クリエイティブな環境ではコラボレーションが発生しやすいわけですが、複数人がプロセスに参加するだけという形だけのコラボレーションだと、良いアウトプットが生まれません。ただ集まるだけではなく、参加者それぞれの意見やアウトプットがしやすくなる環境をつくるには、以下の条件があると考えられます。 * 信頼関係が築かれているか * プロセスが透明かどうか * オープンな対話が可能か * リスクをとることができるか * 間違いを許すことができるか 多くの人がプロセスに参加しやすい環境をつくることがコラボレーションの第一歩ですが、ゴールに向かうためのディレクションや最終的な決断を下す人がいなければ、 らくだになる [http://www.yasuhisa.com/could/article/we-just-made-a-camel/] 可能性があります。皆が平等な立場でプロセスに参加できるコラボレーションですが、ひとりひとりのアウトプットまでが平等というわけではありません。また、時には独裁者のような存在によってゴールに向かう
プロセス

未来をプロトタイプしよう

12月15日に年末恒例のイベント CSS Nite Shift [http://lp25.cssnite.jp/] が開催されました。今年はカバーする分野もグッと広がり、合計 9 セッションという大イベントになりました。また、参加者のおよそ半数が都外からの方で、 Web サイト制作に関わる専門家たちが全国から集まった日になりました。 今年の基調講演は 未来をプロトタイプしよう というタイトルで話をしました。今年は何度か プロトタイプをテーマにした話 [http://www.yasuhisa.com/could/article/webdesign-and-prototyping/] をさせてもらいましたが、昨年から感じていた課題へのひとつの回答だと思っています。 繋げるためのプロトタイプ 昨年の CSS Nite Shift [http://www.yasuhisa.com/could/article/shift5-the-end-of-websites/] で、従来の Web サイト制作のあり方は終わり始めているという話をしました。当時は、Web サイトを制作することだけを
プロセス

ツールなんてどれでも良いですよ

以前から ピクセルパーフェクトなカンプを作ることに意味はない [http://www.yasuhisa.com/could/article/cssnite-takamatsu/]と話してきました。Photoshop や Fireworks のような絵描きツールは、様々は誤解を引き起します [http://www.yasuhisa.com/could/article/visual-tools-and-webdesign/] し、ピクセルパーフェクトな世界を作り上げることは、可変で自由自在に変化する [http://www.yasuhisa.com/could/article/wd101-no-edge/] Web の世界では不可能に近いです。開発の初期段階でカンプと呼ばれる架空の完成図を作り込むことのリスクは実は大きかったりします。 しかし、それが「Photoshop / Fireworksを使うな」という意味ではありません。 絵描きツールは、ビジュアル面での試行錯誤するときに [http://www.yasuhisa.com/could/article/creative-lag
ソーシャルメディア

私的ソーシャルを活用した電子書籍の作り方

先日、日本の Kindle ストア [http://www.amazon.co.jp/Experience-Points-ebook/dp/B0096PTV7I/]でも発売が開始された電子書籍「 エクスペリエンス ポイント [http://www.yasuhisa.com/book/exp/]」。発売当初に制作の意図と大まかな過程 [http://www.yasuhisa.com/could/announcement/experience-points/] について解説しましまたが、今回はソーシャルメディアをいかに活用して電子書籍を作ったのかを体系化してみようと思います。 今回の電子書籍は具体的に作り出す前から、長い下準備をしていました。電子書籍の制作自体はひとりで行いましたが、多くの方に関わっていただくことで、またひと味違う電子書籍のあり方をつくれるのではと思いました。以前 LEAF という対話のサイクル [http://www.yasuhisa.com/could/article/socialmedia-leaf/] について解説したことがありますが、それを基に以下のプロセス
プロセス

皆の「良い」を作り、話し合うプロセス

2012年10月20日、金沢歌劇座で UX Kanazawa [http://uxkanazawa.15vision.jp/ux-kanazawa-vol-4-20121020/] が開催されました。先月、basecamp NAGOYA でおこなったプロトタイピングのセミナー [http://www.yasuhisa.com/could/article/paper-prototyping-seminar/]の金沢版になります。主催者の @ichigami [https://twitter.com/ichigami] さんのご好意で急遽金沢で開催することができました。かなりギリギリの告知だったのにも関わらず定員オーバーでキャンセルなしという高出席率の会になりました。 基本的に名古屋で行った内容を継承していますが、3時間半という長い時間を活用して名古屋ではカバーできなかったことを金沢で行うことができました。ワークではチーム別で作ったプロトタイプの意図を発表する時間を設けることができましたし、批評の場をもつことが出来たのが長時間イベントの魅力。私の心配とは裏腹に懇親会に持ち越して話
デザイン

変化する媒体、進化するクリエイティブ

クリエイティブは、媒体の特性と配信方法に影響されることがあります。 音楽の世界を見てみましょう。 アルバムの起源ともいえるレコード（LP）が生まれたのは 1948 年（音楽を録音・再生できるレコード自体は 19世紀からあります）。LPは、両面におよそ 20 数分の音楽を保管することができました。ミュージシャンは 20 x 2 分の範囲に入るように音楽を構成しました。ラベルのデザインも LP ならではのものが生まれましたし、ジャケットにしても同様のことがいえます。 その後、さらに小さく、さらに多くの曲を保管できる CD が普及しはじめます。曲の長さも大幅に増え、トラック数も自在に増やせることから、その特徴を活かした曲が作られるようになりました。裏返して再生する必要がなくなった CD のラベルは、LP に比べて大胆になり、ジャケットも印刷技術の発展の恩恵を受け、デザインも多彩になりました。 ボブ・ディランのアルバム「Freewheelin’ [https://www.amazon.co.jp/dp/B0000024RQ/ref=
デザイン

妥協の先にあるデザイン視点

本当に妥協のない体験なのか Microsoft が自社製のタブレット Surface [http://www.microsoft.com/surface/en/us/default.aspx] を発表しました。着脱可能な超薄型キーボードを搭載。タブレットとしても、ノートパソコンとしても使うことができるのが最大の特徴です。 2012年4月、東京都内で開催された開発者向け会議「BUILD」で、あらゆる機器で「妥協のない」体験 [http://pc.nikkeibp.co.jp/article/news/20120424/1047264/"]を Windows 8 は提供できると話していましたが、それを形にしたのが Surface だと思います。ひとつの OS でタブレットもノートも関係なく操作ができるという、Windows 8 の強みを活かしたプロダクトといえるでしょう。 両方ともで使えるということに「妥協をしていない」Windows
デザイン

デザインの試行錯誤とラグをなくすプロセス

ワイヤーフレームやスケッチで、ある程度カタチになっているアイデアも、スクリーン上に実際に描いてみないと分からない場合があります。ラフでは良い感じに見えるものでも、いざ色を付けたりレイアウトを組み上げていくと「あれ？」と思うこともしばしば。ワイヤーフレームやスケッチとして出てきた設計図をそのまま型にすれば上手くいくというわけでもないのが、デザインの難しいところであると同時におもしろいところです。 Photoshop [https://www.amazon.co.jp/dp/B007STFL50/ref=as_li_ss_til?tag=could-22&camp=1027&creative=7407&linkCode=as4&creativeASIN=B007STFL50&adid=1SDQQZA8J767WJSDH9D2&] や、Fireworks [https://www.amazon.co.jp/dp/B007STFV9G/ref=
デザイン

触れる・動くによって変わるデザインプロセス

5月26日、青森にて今後のWebサイト制作との向き合い方 [http://www.aoit.jp/20120526/]というイベントが開催されました。今回は これから求められるWebコミュニケーションスキルと題してプロトタイピングの基礎を解説しました。 CSS Nite in TAKAMATSU [http://www.yasuhisa.com/could/article/cssnite-takamatsu/] のとき「静的なカンプは過去の手法」と話しましたが、ではどうしたら良いのかを考えるキッカケとして本セミナーは参考になったかと思います。 「とりあえず見せて」の解釈について 人は誰しもアイデアをもっていると思います。 自分の頭の中ではハッキリしていたとしても、人に伝えることが出来なければアイデアは活かされることはありません。アイデアはどうすれば伝えることが出来るのでしょうか。 「話せば分かる」という言葉がありますが、そう簡単にはいかないのが現実。同業者で同じような知識を持っていたとしても、同じ言葉が違ったふうに解釈される場合があります。 Webサイトデザインのアイ
コンテンツ

利用者の意図から探るサイトデザインの最適化

以前から文脈によってコンテンツ配信が活かされる [http://www.yasuhisa.com/could/article/context-content/] という話はしてきました。テクノロジーを活かすことで、適確な文脈を読み取ってコンテンツ配信が可能になるのではないかという提案をしてきたわけですが、デザインプロセスとしてコンテキストを考えることが重要になることもあります。今回は企業の製品ページに注目して、文脈とコンテンツ配信がどう結びついているのかを検証していきます。 [http://mb.softbank.jp/mb/smartphone/product/104sh/]機能や料金がすぐ分かる HTML ベースのページ。表示速度もはやく、ページ遷移も機敏。 [http://k-tai.sharp.co.jp/dash/s/104sh/special/ ] 雰囲気を重要視した Flash サイト。読ませるというより、眺めることを目的としている。このように製品ページに HTML版と Flash版と 2つ用意されていることがあります。 同じ AQUOS PHONE の紹介ページです
プロセス

「could」という言葉とデザインとの繋がりについて

1998年4月16日「could」という名前で Web サイトを始めました。 当時は大学生だったということもあり、日々の生活を綴る日記を書いていました。内向的な日記を書いていましたが、　2001年にはログ（リンクに一言添えたもの）を始め、2003年に自作 CMS をつくり、今は WordPress へ移行して Web と デザインに関わる記事を書いています。 時々「cloud （雲）」と間違われていることもありますが、なぜこんな奇妙な名前を使い続けているのか。書いている内容は変わり続けているのにも関わらず、この名前を使い続けているには理由があります。 「could」という言葉は can の過去形として扱う直接法だけではなく、「…できる(なら)」「…できるだろう 」といった仮説法も含まれていて、このサイトはそんな可能になるかもしれない未来への想いを題名に込めています。私たちは常に何か違った可能性を秘めながら生活や仕事をしています。無数の可能性や過去にしてきた決断について考えたい・・・それが私にとっての could だったりします。 なぜ今更自分のサイトの由来について書いているのかと
UI

習慣になるまでの UI と操作の変化

タッチしてもらうための第一歩 タッチデバイスへの違和感や不安をもっている方はまだ少なくないと思います。 毎日の生活に登場するタッチデバイスの代表といえば、ATMや電車の切符販売機がありますが、処理速度が遅くスクリーンのオブジェクトを触れている感覚はあまりありません。そのせいか、スクリーンを強く押している方をたまに見かけます。また、タッチインターフェイスだけでなく、触れて押すことができる物理的なボタンが用意されている場合もあります。タッチへの不安を解消するための配慮なのかもしれません。 毎日の生活から比較すると、タッチデバイスでスイスイいろいろな操作が出来るというのは、未知の世界に見えてもおかしくありません。操作の仕方が分かる iPad や Galaxy の CM が TV で流れているとはいえ、「本当にタッチでこんなに動くのか」という不安をもっている方もいるはずです。 UI デザインのひとつのアプローチとして、親しみやすさをつくる という方法があります。特に新しいアイデアや価値を提供しなければならないときに有効で、広く知られているもの、ターゲットにしている人にとって既に知っているこ
WD101

WD101: モニターの外をデザインするのが大半である

このシリーズでは Web Design101（WD101）と名付けて、ウェブデザインをより深く理解するための最初の一歩になる知識やノウハウをコラム形式で紹介していきます。 * Webは見た目のコントロールがきかない [http://www.yasuhisa.com/could/article/wd101-nocontrol-in/] Webサイトをデザインするといっても、スケッチブックに描いたワイヤーフレームを基にグラフィックツールで装飾をすれば完成するわけではありません。たとえ、見た目がよくても操作がしにくい、読み難い、何処になにがあるのか把握しにくいのであれば意味がありません。つまり外観を作るというのはデザインプロセスのほんの一部でしかなく、それ以外のことを考える必要があります。 見た目だけではデザインが完結しない・・・という意味では、Web デザインはグラフィックデザインというより、プロダクトデザインに近いでしょう。プロダクトデザインも単に絵が描けて、美しいフォルムを作れば良いというわけではありません。プロダクトが置かれる環境、どのような人がどういったシーンで使
Webデザイン

ビジュアルツールのもつジレンマとツールの選び方

先日、Quora のほうで Life Without Photoshop [http://www.quora.com/Joel-Lewenstein/Life-Without-Photoshop/] というエントリーを見つけました。Quora.com のデザインは最初からコードで作り始めたというエピソードとブラウザ上でデザインすることのメリットがまとめられています。 Webサイトデザインで国内外で人気なのはやはり Photoshop [https://www.amazon.co.jp/dp/B003F783DG?tag=could-22&camp=1027&creative=7407&linkCode=as4&creativeASIN=B003F783DG&adid=1XQTJXR1M0YQZZVPQC4C&] と Fireworks [https://www.amazon.co.jp/
openwebdesign

今月のデザイン変更点

昨年8月に「記事ページのアクセス通信簿 [http://www.yasuhisa.com/could/diary/report-on-article-design/] 」と題して記事ページのデザインの変更の意図とその効果について解説しました。その後、いろいろ機能を追加して模索をしているのですが今月が大きな機能が幾つか追加されたのでその紹介も含め、効果と課題について紹介していきます。 次に繋げるための工夫 まとめ系記事を除いて、記事は非常に高い割合で最後まで読まれている場合が多く、滞在時間も長いです。コンテンツの質も月ごとで若干異なるのでなんともいえないですが、今月は直帰率も低かったので読者が滞在してくれた月といえるかもしれません。 しかし、このサイトは検索やソーシャルメディアなどを通じてサイトにアクセスする方が多いこともあり、一期一会の関係で終わってしまう場合が多々あります。平均ページビューを増やすにはどうにかしたらいいのか、どのサイトも頭を悩ませているかと思います。たくさん選択肢を与えればクリックするわけでもありませんし、メインコンテンツ (記事) の邪魔をしていたら逆効果です。
デザイン

デザインについて語れる批評をするコツ

批判ではなく批評 個人プロジェクトでない限り、公開前に誰かにデザインを見せる機会があると思います。相手はクライアントかもしれませんし、同僚・上司なのかもしれません。デザイナーの中には見せるのを躊躇している方もいるのではないでしょうか。知恵とスキルを出し切って作り上げた子供のような存在なので、万が一批判されたのであれば自分自身も批判されているように感じるのではないでしょうか。IDEOの Time Brown 氏が TED の講演で「デザインはデザイナーだけに任せるには重要過ぎる [http://www.ted.com/talks/tim_brown_urges_designers_to_think_big.html] 」という言葉を残しているとおり、デザインを皆で考える機会を作るべきです。デザイナーは早い段階から他の誰かとアイデアを共有するべきですが、会話が批判的なものになりすぎているのであればデザイナーも積極的に参加もしてくれませんし、デザインを前提とした会話にはならないでしょう。 「この色は違う」「使いにくそうだ」「分かっていない」 自分の作りだしたアイデアに対してこんな言葉が出
コンテンツ

UXから除外されているもうひとつのU

コンテンツ管理者も利用者 「利用者中心」「訪れた方へのケアを」という言葉は私たちがよく使うフレーズ。忘れてはならない視点ですし、今はその視点を抜きしてコンテンツの開発や情報を整理しても成功しないといっても過言ではないでしょう。それゆえ近年、ペルソナ、シナリオ、エスノグラフィなど利用者への深い理解と共感が注目されています。 利用者第一というのは当然のことですが、ここで私たちがいう利用者とは誰のことでしょうか。恐らく多くの場合は、パソコンやモバイル機器などを利用して、情報を求めて Web サイトへアクセスする方達を指すと思います。いつも私たちは Web サイトへアクセスする人たちのことを忘れませんが、コンテンツを管理する人たちも利用者であることを忘れてはいないでしょうか。 サイトに訪れる方達にとって価値のあるコンテンツを提供することが出来なければ、彼等はすぐに離れていきます。訪問者・顧客との関係を繋ぎ合わせる重要なコンテンツですが、素晴らしい Web サイトを作ったところで魔法のようにコンテンツが表れるわけではありません。デザインを見せて善し悪しを判断している場合もありますが、デザイン
プロセス

ブレないワイヤーフレームを作るコツ

すべてのワイヤーフレームは平等ではない 「ワイヤーフレーム制作の５つのアプローチ [http://www.yasuhisa.com/could/article/5-approaches-of-wireframes/] 」で一見同じようにみえるワイヤーフレームにはそれぞれ特徴があり、目的に応じて使い分けた方が良いという話をしました。違うアプローチが幾つもあることは分かりますが、ではどのようなときにどれを使えば良いのでしょうか。選択するためのチェックポイントは４つあります。 ワイヤーフレームを作る目的はなにか作ることで何を達成させたいのかを明確にします制作プロセスのどのフェイズで用いるのか どのタイミングで作るかによってワイヤーフレームが果たさなければならない役割は変わります誰がワイヤーフレームを見るのか クライアントなのか、デザイナーなのか、開発者なのかで異なりますし、彼等のプロジェクトに対する理解度にもよります誰がワイヤーフレームを活用するのか ワイヤーフレームを使ってデザインをするのか、開発を進めるのか、それとも特定のインタラクションを確定させたいのか ワイヤーフレームを作るという