デザインが伝わらないシンプルな理由
ぬるま湯の会話が生む勘違い デザイナーだけに限った話ではないですが、クリエイティブ職の方との会話が楽なのは、感覚的なところもスッと通じ合えるところだと思います。見せるだけで「そうだよね！」「ちょっと違うよね」のような会話が始まります。こうしたコミュニケーションはひとつの理想ですが、言い換えると『ぬるま湯』です。気持ちが簡単に伝わるコミュニケーションだけしていると、それが当たり前と勘違いするだけでなく、周りが理解しないことに不満を抱いてしまいます。 例えば、何も文脈を共有していないまま以下のような言葉でデザインを説明しても伝わりません。 信頼性 シンプル ブランドに合う 使いやすい かっこいい かわいい 感情に響く エモい デザイナー同士であればこうした言葉ですんなり伝わってしまうので、ついつい使いがちです。しかし周りからすればこれらはユルフワな表現で、何が言いたいのか分かりません。「信頼性
デザインシステムに採用する色を決める5つのルール : could
始めの一歩としての色共有 ひとりのデザイナーに頼らず、チームで運用できる体制を作るためにも デザインシステム は有用なツールです。しかし、様々な UI コンポーネントと決まりごとが揃ったものを作るのは骨が折れる作業です。デザイナー（もしくはエンジニア）が独自で作って「さぁ使いましょう」と公開しても、使ってもらえるとは限りません。また、デザインシステムをどこで共有して、どのように使われるのかも考慮しなければならず、他社の真似事では済まないこともあります。 作る前から課題が山積みでなかなか手が出せないかもしれませんが、何か始めなければゴールに辿り着くことはありません。そんな現場でデザインシステムを作る場合、色から始めることをオススメしています。 色なんて単純なところは出来ていると思う方は多いと思います。デザイナーであればパレットにしてまとめているでしょうし、エンジニアであれば色は変数にして整理
きちんとデザインの価値を伝えるための心得
良いものは理解される … わけではない 良いデザインは語らなくても、相手に伝わるという言葉を耳にしたことがあります。そういった瞬間に出くわすこともありますが、少し見るだけでも伝わるデザインばかりではありません。一見シンプルなものでも、デザイナーがどのような経緯でそこへ辿り着いたかを理解するのは困難です。 良いものを作れば理解してもらえる場はあります。しかし、デザインへの理解を共有していない人が相手だと、見せただけでは伝わりません。そもそもデザインを専門分野にしていないからこそ、デザイナーにデザインを頼んでいるわけですから、当然だと思います。デザイナーは、良いデザインを生み出すことは当然ですが、それと同じくらい自分のデザインを営業する能力も必要です。 「デザインを理解してくれない」と嘆くのはナンセンス。デザインを理解してもらうのはデザイナーの仕事ですし、それを相手が理解できる言葉で伝える工夫
コンテンツからみるWebアクセシビリティの課題と提案 : could
コンテンツは本当にアクセシブルか Webアクセシビリティは、大きく分けて 2 つの『デザイン』があります。ひとつは、情報を分かりやすく整理し、目的の情報へた辿り着くための Web アクセシビリティ。この要素は、色、形状、動き、スピードなど、UI デザインの課題と重なるところが多いです。もうひとつの要素は、情報の構成や文章のスタイルといった「編集」とも呼べる Web アクセシビリティです。 前者の情報構造や操作性は、明確なガイドライン化がしやすく、チェックもしやすいですが、後者の編集の部分は、パッと見では判断がしにくいだけでなく、ガイドラインとして共有するのも難しいです。 Webアクセシビリティにある 2 つの『デザイン』 もちろん JIS X 8341–3:2010 でも「利用者が理解できるコンテンツ」を制作・維持できるようにすることが重要であると書かれていますが、技術で解決できるところに
コンテンツのアクセシビリティが未来を保証する
「その情報にアクセスできるかどうか」 これが私にとっての Web アクセシビリティです。一般的に Webアクセシビリティといえば、主に高齢者や障がい者への配慮という見方が強いですが、数年前からは私は上記のように捉えて仕事をするようにしています。少し極端な考え方かもしれませんが、「その情報にアクセスできるかどうか」ということを意識して設計するときに、高齢者や障がい者といったごく一部のグループを考えることはありません。 全ユーザーが特殊な存在 近年の Web 利用者の動向をみると、高齢者や障がい者を意識しなかったとしても、情報にアクセスできるかどうかを真剣に考えなければ、見られない・読まれないコンテンツになることが分かります。 デスクトップだけでなく、タブレット、スマートフォンなど様々なスクリーンサイズをもったデバイスで Web にアクセスしている。また、デバイスにより初期設定やカスタマイズ方
カンプがなくなったときのデザイナーの役割
手段を再想像する 昨年末に開催された CSS Nite Shift 5 で「Reimagination（再想像する） 」の話をしました。人とコンピュータの関わり方が行動や価値観を再定義しているのと同じように、Webサイト制作にしても同様のことがいえます。今までの当たり前を疑い、未来に柔軟に対応できるワークフローが必要とされています。 例えば従来必須だと言われていたワイヤーフレームも考慮対象です。少し前に ASCII へ「柔軟性あるデザインプロセスへ移行するためのヒント」という記事を寄稿しました。ワイヤーフレームが果たそうとしているコミュニケーションの目的は間違っていませんが、つくるためのツールや手法に問題があるのではないかという疑問を投げかけた記事。絶対いると思い込んでいるものも、今の時代にマッチしなくなってきているものは少なくありません。 また、Photoshop や Fireworks
体験のレイヤーをつくるWebデザイン
2012年10日6日は、神戸ITフェスティバルの講演に続いて CSS Nite in KOBE でも登壇しました。神戸での記念すべき第一回目ということで、技術話がほとんどない働き方をテーマにした話題が中心でした。私のセッションは、終わりなき Web の旅と題して、予測不能でトレンドも目まぐるしく変わる Web の世界で変わらないもの、目標にできるものを紹介しました。 再考 Progressive Enhancement 今頃「Progressive Enhancement」なんて言葉を使うなんて古いと考える方もいるかもしれません。不幸にも日本語で最適な表現がなく、カタカナ表記でプログレッシブ エンハンスメントとしてもピンと来ないのが、言葉のもつ意味が浸透しないひとつの要因ではないかと考えています。例えば、昨年からよく耳にするようになったレスポンシブ Web デザインにしても、Progres
楽天から学べる日本的なWebアプローチ
学べるところが多い楽天ページWebデザインに関わる様々な情報やノウハウが世界中で共有されているとはいえ、お国柄は存在します。Yahoo!でも、世界共通にみえる UI コンポーネントがありますが、アメリカと日本と中国ではアプローチが異なります。情報にメリハリをきかせているアメリカ。今の話題を中央にたくさん詰め込めるように工夫してある日本。クリックをしなくても膨大な情報を消化することができる中国。ポータルサイトをひとことで言ってもやり方がいろいろあることが分かります。 各国の Yahoo! を見て「欧米はシンプルなのに、日本や中国はなんかごちゃごちゃしている」と感じた方はいるかもしれません。なぜそんな小さなところに情報を詰め込むのか、なぜページを整理しなのか、メッセージを絞ってメリハリをつけないのか、といった悩みを抱えるデザイナーもいるかもしれません。 日本らしい忙しいデザインの代表例としてよ
WD101: Webは見た目のコントロールがきかない
このシリーズでは Web Design101（WD101）と名付けて、ウェブデザインをより深く理解するための最初の一歩になる知識やノウハウをコラム形式で紹介していきます。 DTPという名の足かせ Webデザインはよくも悪くも DTP のノウハウを受け継ぎながら徐々に成長してきた領域です。今でも根強く残っている「ページ」という概念。タイポグラフィ・グラフィック・レイアウトなど DTP が培ってきたノウハウは CSS と HTML （ときどき JavaScript）を使って再現されたりしています。DTPの概念とノウハウがなければ Dreamweaver のようなソフトは生まれなかったでしょうし、Dreamweaver のようにコードを手打ちしなくても DTP 感覚で Web デザインに入り込めるソフトがなければ、Web デザイナーを職業とする方もこれほど増えなかったかもしれません。 しかし、D
OmniGraffleを便利に使うあれこれ
制作のためにいろいろなソフトを使っていますが、数年経っても相変わらず使っているもののひとつに OmniGraffle があります。ダイアグラムやワイヤーフレームを手軽に作れますが、多機能なので奥が深いソフトのひとつ。以前もOmniGraffleを使ったテンプレート作りで便利な使い方を幾つか紹介しましたが、今回も最近（やっと）見つけたものも含めて6つ紹介します。 下準備を忘れずに Webサイトのワイヤーフレームを作るのであれば新規文書をそのまま使わず、キャンバスのサイズをきちんと調整しましょう。ディフォルトではルーラの単位がインチになっている場合もあるので、まずはピクセルに切り替えます。グリッドの間隔もインチではなくピクセルにしておくと設計がしやすくなります。OmniGraffleでは、グリッドをオブジェクトに手前に表示させることが出来るので、厳密な設計を好む方は手前に表示したほうが作りやす
デザインを知るきっかけを作る Design with Intent
イギリスのデザイナー Dab Lockton 氏が中心になって開発されたDesign with Intent は、デザインをより深く考えるのに便利なツールキットです。カードがリリースされたのは今月ですが、プロジェクト自体は 2008 年から続いている長いプロジェクト。何度か形を変えたり、コンテンツが加わって現在の形になりました。 このツールキットはブレインストーミングやアイデアをつくるための材料として作られたそうですが、ひとつひとつ読むだけでも勉強になります。カードサイズであることから文字数も限られているので、英語でもさらっと読める感じ。101枚あるカードは8つのカテゴリ (視点) に分類されています。ダウンロードページには 101 枚分まとめてダウンロードするリンクと各カテゴリごとにダウンロード出来るリンクの 2 パターンが用意されています。以下が、分類カテゴリとその要約です。 建築的
Webデザインがつまらなく見えてしまう理由
魅力が伝え難いWebデザイン Webデザインを説明するのは非常にやっかいです。このサイトでも何度も取り上げては書き続けていることですが、上手く説明しきれていない部分は少なくありません。 最近よく感じることが Web サイトの魅力を伝えるのは難しいということと、そもそも「魅力・良さ」という部分も人それぞれであるという点です。いろいろな意味が含まれていると思いますが、Web における「魅力・良さ」は、見た目や動きに集約されることが多いです。 ときどき、Webデザイン専門学校の先生とお話をすることがありますが、HTML の勉強をずっとしてても、最終的に出て来る作品がフルFlashということがあるそうです。当然 Flash サイトが魅力的ではないわけはありません。良い Flash サイトもたくさんあります。学生さんが Flash を選んだ気持ちも分かります。パッと見たときの魅力やインパクトは Fl
OmniGraffleを使ったテンプレート作り
OmniGraffleは、ワイヤーフレームをささっと書くのに大変便利なツール。以前「サイト制作に便利なOmniGraffleステンシル」という記事で、高品質のステンシルを幾つか紹介したことがあります。これらを使えば手軽に完成品に近い見た目の絵図を作ることが可能になります。なかなか便利な OmniGraffle ですが、通常版とプロ版の２つあり、どちらか迷っている方もいるのではないでしょうか。今回紹介するハウツーは通常版でもある程度出来ますが、プロ版で効果を発揮するテンプレートの作り方です。 変数を活用する 書類を制作する際に、何度も同じことを書く場合や、ページ番号を挿入したい場合があります。こうした情報を手入力していると大変手間がかかります。OmniGraffle にはテキストフィールドに変数を利用することが出来、ダイナミックに文字や数字を生成することが出来ます。例えば、各キャンバスをペー
サイト制作に便利なOmniGraffleステンシル : could
UIワイヤーフレーム サイト制作に便利なOmniGraffleステンシル 制作メンバーの体勢やスケジュールによっては HTML でプロトタイプを作ることがありますが、そうでない場合はワイヤーフレームを OmniGraffle で作っています。 OmniGraffle では、オブジェクトを揃えたり調整が簡単ですし、マルチページにも対応しているのでクリックしたら別ページに移動といった効果も作れます。もちろん書き出した PDF もクリック可能なマルチページになっているので、他の方との共有した際もページの遷移がみえやすいです。レイヤーの表示・非表示といったアクションもオブジェクトに充てることが出来るので、ダイナミックなページも表現出来なくはないですが、レイヤーの表示・非表示は PDF に書き出した際になくなってしまうのが残念。Professional版ではプレゼンテーションモードがあるので、出先で
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
