タグ別アーカイブ: UX Design

hireLink vol.10 コンセプトからのコンテンツ設計&超具体的なワイヤーフレーム作成のコツ

11/18 hireLink vol.10 コンセプトからのコンテンツ設計&超具体的なワイヤーフレーム作成のコツ

今回のアジェンダ

良いWebデザインを作るにはデザインに入る前のコンセプトとコンテンツ設計が大事!…と知識としてはわかっていても、こと実務においては難しさを感じているWebデザイナーさんも多いのではないでしょうか。
今回は株式会社ビットエーCMO/日本ディレクション協会会長の中村健太さんにお越しいただき、一貫したコンセプトをコンテンツ設計に落とし込む技術についてお話いただきます。さらに、ワークショップ形式でワイヤーフレーム作成のコツを超具体的に学んでいきます!

講師

中村健太

12064149_993853870653784_781326440_n

株式会社ビットエーCMO/日本ディレクション協会 会長
品川の制作会社ビットエーに所属するCMO兼Webディレクター。
元コーヒー屋の店長で元個人アフィリエイターという異色のキャリアを持つディレクター。
リアルビジネスの経験と観点から発想する企画・運営・解析を得意とし、大規模メディアの運営をはじめディレクターとし数多くのサービスを展開、成功させてきた実績を持つ。
現役のディレクターとして活動するかたわら、2013年からは日本ディレクション協会会長を務め、数多くの講演に登壇。
筋トレとランニングをこよなく愛する二児の父。

hireLinkとは

logo600

hireLink(ハイアリンク)はクリエイターとエンジニアのための無料勉強会 / 交流会です
その名前には”hiring”=雇用と”higher link”=志の高い者同士のつながりという意味が込められています
成長企業のエンジニアやクリエイターを招き、パネルディスカッション形式で最新トレンド技術を学習
勉強会後の交流会では企業代表と直接お話しいただき、就業やキャリアアップにつなげていただけます

詳細

■日時: 11/18(水) Open 19:00 / Start 19:30
■会場: 株式会社トライブ 3F ラウンジ
■住所: 〒150-0044 東京都渋谷区円山町5-5 NAVI渋谷V3F
■オフィシャルサイト: hireLink
■入場料:無料
■進行

19:00 開場
19:30 – 19:35 開演 / Introduction
19:35 – 20:20 中村健太氏登壇
20:20 – 20:35 ワークショップ
20:35 – 20:40 質疑応答
20:40 – 21:30 交流会
21:30 終了

■定員: 30名
■持ち物:筆記用具とお名刺をご持参ください。
■主催: 株式会社トライブFAbank事務局
■協賛: 株式会社アント
Info: TEL:03-5428-5170
Mail: fabank@tribe.bz

アクセス

JR、半蔵門線、銀座線、副都心線、東急田園都市線、京王井の頭線「渋谷駅」より徒歩8分
マークシティ口より徒歩2分
京王井の頭線「神泉駅」より徒歩5分
詳細はこちらを御覧ください。

お申込み

■FAbank登録者の方(お席を優先確保いたします): こちらから「hireLink参加希望」と書いてメールしてください。
■Connpassから応募: Connpassから応募

hireLink vol.4 簡単そうでむずかしい!「シンプルなデザイン」の裏側 イベントレポート

こんにちは!FAbank事務局の工藤です。本日は去る9月2日に開催されたhireLink vol.4 簡単そうでむずかしい!「シンプルなデザイン」の裏側 イベントレポートをお送りいたします。

今回のアジェンダ

今回のアジェンダは今話題のデザイン。中でも数年前からトレンドとなっているシンプルなデザインさらにフラットデザインに関して『フラットデザインの基本ルール』という著作をお持ちの佐藤好彦先生に徹底解説していただきました。

フラットデザイン流行の要因

近年Webの世界でフラットデザインが流行している(もはや流行と言えないほど主流になってきていますが)理由には以下の要因があるといえます。

  • Web技術の変化 - Webfont、SVG、レティーナディスプレイの登場
  • モバイルの普及 - ファーストビュー重視からスクロールへ、コンテンツ量を抑制したシンプルなサイト構造へ
  • ユーザーの慣れ - UIからコンテンツ重視へ
  • 美意識の変化 - 抽象と感情移入
  • グローバルIT企業の戦略 - Apple, Google
  • 社会環境の変化 - メタファーが意味を持たない、スキューモーフィズムの限界

「シンプルデザイン」とは何か

さて、そもそもシンプルなデザインとは何でしょうか?アップルのチーフデザイナー、ジョナサン・アイブは「シンプルさは、秩序によって実現される」と述べています。
Jonathan_Ive_2009
Jonathan Ive 2009” by Gary CohenJonathan Ive Objectified. Licensed under CC BY-SA 2.0 via Wikimedia Commons.

なにかモノを作る時には直感的な判断と、論理的な判断の両方を行いながら作業をすすめていきます。直感や感情を重視して作り出されたものよりも、バランスを重視して理性的に作ったほうが秩序のあるものになります。感情表現を重視する意匠を凝らした装飾的な造形を表現主義とすれば、意匠よりも構造を、感性よりも理性を、直感よりも理論を重視する造形は構成主義的です。この構成主義的造形のほうが、秩序があり、シンプルなデザインに近づきやすくなります。

これは1920年代に登場し建築の世界を席巻したインターナショナルスタイル - 意匠つまり装飾を排除することで個人個人の感性や地域性を超える、世界的に共通する様式の創造を目指したもの - に通じる考え方というわけですね。
Bauhaus
Bauhaus” by Mewes in de-Wikipedia – Own work. Licensed under Public Domain via Commons.

これは縄文土器と弥生土器にもなぞらえられます。
Jomon_vessel_3000-2000BC
Jomon vessel 3000-2000BC” by Chris 73 / Wikimedia Commons. Licensed under CC 表示-継承 3.0 via ウィキメディア・コモンズ.
Footed_jar
Footed jar” by Elmo rainy day投稿者自身による作品. Licensed under CC 表示-継承 3.0 via ウィキメディア・コモンズ.
この二つのどちらがシンプルなデザインといえるのかは一目瞭然ですし、それはどちらが機能的であるかとほぼイコールで結ばれるでしょう。
スティーブ・ジョブズの言葉「多くの人がデザインと聞くと、どのように見えるかを重視して考えるが、私たちはどのように”機能”するかを一番に考える」もこの考え方を裏打ちしていますよね。

まとめ

シンプルなデザインを作るには、単に要素を少なくするとか、色を少なくするとかではなく(それも大事なのですが)、計算に基づいて本質的な構造や機能を表現することが大事という事がよくわかりました。
また、その本質を理解するためにもヴィルヘルム・ヴォリンガー『抽象と感情移入』とか、ニーチェ『悲劇の誕生』といった古典を面倒臭がらずに読んでおくべきなだなあと感じました。

…またコーディングを行うこともある自分としてはhtml cssのマークダウンにおいてもpxではなくrem (root em, 指定されたフォントサイズを基準とした倍率)を使うことが多くなってきているのもその辺が関係してるのかなと思いました。「ルートに対する」という部分が大事になりますし、常に意識することになりますからね。

質疑応答

マテリアルデザインはフラットデザインとどこが違うのか?

「フラットデザインは2012年のWindows8のMetro UI登場くらいから市民権を獲得し、以後どんどんフラット化が進んでいきましたが、画面上のどこが押せる要素かがわかりにくいなどの問題もあった。そこで2014年、グーグルはフラットデザインを推し進めた考え方である「マテリアルデザイン」を提唱しました。フラットデザインとどこが違うのかというと、それはコンポーネントにより質感(マテリアル感)を与えているということです。全くの平面を組み合わせるのではなくボタンやカードには影をつけ、質感、モノ感を表現している。先ほどの話に戻ると、構造:意匠の比が9:1か9:2のデザインといえるのではないでしょうか。(Googleのマテリアルデザインのガイドラインはこちら)」

新刊情報

この日インプレスさんからは佐藤さんの新著「ビジネス教養としてのデザイン」を頂戴いたしました。こちらはデザイナーさん向けというよりはあらゆる人に向けたデザイン思考をわかりやすく解説している内容となっており大変オススメです!
71-Bp4pInVL
佐藤先生、ご来場いただいた皆さまどうもありがとうございました!