Webデザイン

A collection of 37 posts

Webデザイン

Webデザインにおける『正直』とは

素材に正直であれ Webサイトの品質には、高い技術と表現を盛り込むという『上を目指す品質』と、どのような状況でも必要最低限の見た目と操作性を保証する『地を固める品質』の 2 つがあると説明しました。しかし、これだけではなくデザインにおける普遍的な考え方も品質に大きく関わっています。 ドイツのインダストリアルデザイナー Dieter Rams（ディーター・ラムス） が提案する良いデザインの十ヶ条の中には、良いデザインは正直であるという項目があります。製品を必要以上に大げさに見せるのではなく、ありのままを伝えること。素材や形状を生かし、機能を明確に伝えることをラムス氏は『正直』と捉えています。 Web デザインに限ったことではありませんが、素材に正直であることは良いデザインには欠かせないことです。これは、素材をありのままに使ってシンプルでミニマリストな表現をするという意味ではなく、素材の特徴を最大限に活かして製品を作り出すことを指します。素材の特徴とは、表現を豊かにする源のようなものであると同時に、制約でもあります。一方、素材に正直ではないデザインは、何か別のものを模擬しているように見えますし、模擬している対象の劣化版に見えてしまいます。 Web サイトデザインの品質も、いかに『Web』という素材に正直になっているかで判断できるのではないでしょうか。 Webという素材の特徴
Webデザイン

Webデザインシステムはじめの一歩

CSS フレームワーク活用のタイミング Bootstrap、Foundation をはじめとした CSS フレームワークを一度くらい使ったことがあると思います。制作はもちろん、どのように CSS ファイルを整理すれば良いのか、どのようにデザインのルールを設計するのかといった CSS の書き方を学ぶ際にも使えます。もちろん CSS フレームワークはたくさんありますし、 Gridlex のように Flexbox を活用したグリッドシステムだけといった UI の特定要素のみを提供しているツールもあります。 CSS フレームワークは制作において非常に便利なツールですが、最終成果物として扱うかは注意が必要です。以下のような場合を除いて、CSS フレームワークはなるべく使わないようにしています。 プロトタイプ作成 Photoshop や Sketch のようなグラフィックツールで Web サイトをデザインしても、Web ブラウザで見るまで実際どうなるか分からないことがたくさんあります。例えばテキストの描画ひとつとっても、グラフィックツールと Web ブラウザでは異なります。少しでも早く Web
Webデザイン

Webならではの表現を見つけるために捨てるべきこと

面白いから実装で良いのか コンテンツや利用者体験を重要視する動きは Web でもネイティブアプリでも見られるものの、Web サイトデザインにおいては空回りしているように見えることがあります。ときには Web サイトよりネイティブアプリのほうが良いと思われてしまうような表現や手法が使われていることも少なくありません。 上から下へスクロールするという多くの利用者が期待するユーザビリティでさえ、パララックスデザインという表現によって破壊されていることがあります。パフォーマンスが重要視されているのかと思いきや、10 以上の JavaScript ライブラリを組み合わせた重たいサイトも未だにあります。それも「面白い表現」「ネイティブアプリのような見た目」を実現するためだけに実装されていることもあり、利用者には負荷がかかることがあります。日本人を対象にしていたとしても、誰もが高速回線でデータ量無制限というわけではありません。 Flashサイトではよくないよねとか言われていたのに、HTML5サイトならローディングナウとか、スキップイントロがありになってしまう不思議。おいおい。 — Yasuhisa Hasegawa (@yhassy) June 2, 2014 興味深いことに、10 年くらい前に「バッドプラクティス」と呼ばれていたことが、様々なサイトで採用されています。ローディング画面はもちろん、ニュースレター登録を促すためのポップアップ、自動的に出現するバナー、テキスト選択メニューの過剰なカスタマイズなど、
Webデザイン

15年前の記事が教えてくれるWebの本質

2000年4月7日「A Dao of Web Design」という記事が A List Apart で公開されました（日本語訳）。今年は公開から 15 年経ったということで、Web 開発・設計の著名人がコメントを寄せた記念記事も配信されています。道教の教えを基に Web デザインの本質を説いたこの記事は、私も大きな影響を受けています。 2000年は、今では信じられないような状況でした。Web ブラウザが独自のタグを当たり前のように実装。<table> をつかってピクセルパーフェクトな固定レイアウトの全盛期でした。もちろん、マルチデバイスの世界ではなく、パソコンが中心です。せいぜい Windows と Macintosh の違いに頭を悩ませるくらいでした。CSS レイアウトで制作することが大事件だった頃に、「柔軟で適応力のあるデザインが必要である」という「A Dao
Webデザイン

デザインを増幅させる 今使えるWeb技術

コンテンツをスマートにするには、ページの概念を取り払ったコンテンツの細分化と管理が欠かせませんが、利用者へ届けるための技術も無視できません。数年前であれば、ネイティブアプリでしかできなかったことも、Web 技術で可能になりつつあります。 マークアップの仕方がここ数年で変化したように、Web 技術も激変してきています。従来のような全ユーザーに同じコンテンツを表示するのではなく、利用者の環境・文脈に応じてきめ細かな配慮が可能になりつつあります。 Web やアプリのデザインは、技術のことを知っているか知っていないかで大きく変わります。今この瞬間のデザイン（トレンド）だけでなく、これからどうなるのかを考えながらデザインするという観点が今の Web デザインに欠けていると感じることがあります。今 Web でできることは数年前と大きく変化していて、それが新しいデザイン提案に繋がるものもあります。Ajax で動的な見せ方をするだけというのは過去の話なわけです。 以下、今すぐにでも実装できる Web 技術の一部を紹介しています。これらの技術を活用することで利用者の文脈に合わせたきめ細かなコンテンツ配信やデザインを適応することができます。サポート状況は2015年3月9日現在のものですが、最新のサポート状況が知りたい方は Can I Use? を参照してください。 Geolocation API デバイスの位置（緯度経度）を取得できます。
Webデザイン

今のデザインに必要とされるコントロール

本当にコントロールできないのか WD101シリーズの最初に、Webデザインは見た目のコントロールができないという話をしました。スクリーンの大きさが多種多様なだけでなく、利用者が見た目や操作性を自由に変えることができる Web。DTPのような感覚でサイトをデザインしても、誰かの Web アクセスの利便性を損なうと指摘しました。 デザイナーはある種、混沌とした状態から秩序を生み出す能力をもっていると思います。バラバラになった情報を整理して一貫性のあるメッセージを伝えたり、混雑した Web の世界に明確な道筋を示す仕事をしています。秩序を作り出すということは、ある程度のコントロールはなくてはならないわけです。 コントロールすることがデザイナーの仕事であるとすれば、『コントロールができない Web』との相性がよくないように見えますし、デザイナーにとって非常に仕事が難しい環境のようにみえます。しかし、実際のところ今まで以上にデザイナーのコントロールが必要とされています。 制約の中にあるコントロール Web におけるデザイナーのコントロールは従来のデザインで言われるコントロールとは少し異なります。紙のように枠がありませんし、テレビや雑誌のように作り手の意図が 100% 再現されるとは限りません。今までと同じようなコントロールを求めるのであれば、Web は『コントロールできない』ということになります。 それでは Web では何をコントロールしなければいけないのでしょうか。他の分野のデザインも媒体の特性や技術による制約があり、その中でデザインしますが、Web には大きく
Webデザイン

良いWebサイトのなかにある静と動

シンプルな言葉のなかにあるニュアンスの違い 「なぜ、Web サイトが必要なのか？」 とてもシンプルな質問ですが、回答は様々です。 「利用者にとって良いコンテンツや体験を提供したいから」という回答をする人もいるでしょう。しかし、この模範解答のような言葉でさえ、人によってニュアンスが異なります。特に、マーケッター寄りの人と人間中心設計を実践している人では『良い Web サイト』の捉え方が大きく異なります。 マーケッターの視点で Web サイトをデザインするとは、どういうことでしょうか。彼等が考える「良いコンテンツ」は、サービスや製品を購入してもらうための説得材料です。写真、映像、文章、機能リスト・・・、こうした要素は、説得するために必要だと考えています。顧客が Web サイトへ訪れることによって、「買ってみようかな」と思ってもらえるような画面に設計することが重要だと考えられています。 それでは、人間中心設計の視点で Web サイトをデザインすると、どうなるでしょう。彼等が考える「良いコンテンツ」は、
Webデザイン

コンテンツからはじまる新しいWebワークフロー

4月27日にCSS Nite in AOMORI Vol.7 が開催されました。毎年、来青させていただいていますが、CSS Nite として参加するのは今回で 2 回目になります。今回は コンテンツからはじまる新しい Web ワークフロー と名付けて、コンテンツの設計をしっかりしないと、モバイルをはじめとした他デバイスに向けて Web サイト制作をしても意味ないよというメッセージを込めた講演を行いました。そして、コンテンツを基軸にして画面構成やビジュアルデザインを組み立てていく新しいワークフローの提案も行いました。 今までこのサイトでも何度かプロトタイプとコンテンツの話をしてきました。一見、まったく違う分野の話をしているように見えますが、この 2 つは密接な関係をもつ重要なキーワードです。それがなぜ繋がっているのかを解説するにも絶好の機会でした。しかし、40 分という短い講義の中では説明しきれなかったことが多々あるので、補足情報も含めて紹介していきます。 ツールやテクニックの変化では足りない この講演で静止画のようなデザインカンプはコミュニケーションの負荷が高過ぎるという話をした 1 週間後にFireworks の開発中止ニュースが報じられました。これは、アドビ社が Fireworks
Webデザイン

Fireworks後のツールとワークフロー

Fireworks 以外の選択肢は？ Adobe Creative Suite が終了し、Cloud の一本化が発表されました。今回の新製品ラインナップでニュースになったのが、Fireworksの開発中止 のニュース。最新版の Fireworks CS6 の次期 OS へのサポートをすると宣言しているので、すぐに使えなくなるということはありませんが、視野を広げて別の選択肢を探さなければならなくなるでしょう。 Fireworks が数年後には使えなくなるかもしれないから、Photoshop に移行するべきなのかといえばそうでもありません。写真やグラフィックといったビットマップ画像編集であれば Photoshop は素晴らしいですし、ベクターシェイプやレイヤースタイルを使えばある程度柔軟性を保つことはできます。しかし、Webサイトデザインにふさわしいツールとはいえません。 Fireworks のすべての機能を補うことは出来ませんが、代わりになる選択肢は年々増えてきています。 ベクター画像 昨年のバージョンアップで大幅に機能と UI が改善された Sketch はおすすめ。デザイン素材も今年に入ってグッと増えてきています。既に Sketchgem のような素材を集めたコミュニティがあります。 デザインアセット アイコンやボタンの書き出しに便利なのが
Webデザイン

世界最初のWebサイトが教えてくれるデザインの原則

4月30日は World Wide Web にとって重要な日。先日 CERN が、W3 の関連技術をパブリックドメインにしてから、20 年を迎えました。CERN 公式サイト では W3 の歴史を振り返ると共に、1993 年に公開された 最初の Web サイト もオリジナルの URL に再公開されました。 構造化された情報は未来に繋げるためのディープインプレッションになると話した「スマートフォン戦略から始まる新たなコミュニケーションデザイン」 世界最初の Web サイト（上図）は、コンテンツとデザインに関する講演をする際に何度か取り上げています。例えば、2011年ロフトワークが主催した いまさら聞けない！？ 企業のスマートフォン対応 で、20年前に作られたサイトにも関わらずスマートフォン対応されていると紹介しました。 シンプルなマークアップですし、装飾も一切ないので表示されて当然かもしれません。しかし、今まで私たちが作ったサイトの中で、作った当時には予測もしなかったデバイスでも情報をきちんと伝えることができるのがどれだけあるでしょうか。
Webデザイン

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

手段を再想像する 昨年末に開催された CSS Nite Shift 5 で「Reimagination（再想像する） 」の話をしました。人とコンピュータの関わり方が行動や価値観を再定義しているのと同じように、Webサイト制作にしても同様のことがいえます。今までの当たり前を疑い、未来に柔軟に対応できるワークフローが必要とされています。 例えば従来必須だと言われていたワイヤーフレームも考慮対象です。少し前に ASCII へ「柔軟性あるデザインプロセスへ移行するためのヒント」という記事を寄稿しました。ワイヤーフレームが果たそうとしているコミュニケーションの目的は間違っていませんが、つくるためのツールや手法に問題があるのではないかという疑問を投げかけた記事。絶対いると思い込んでいるものも、今の時代にマッチしなくなってきているものは少なくありません。 また、Photoshop や Fireworks で作られたカンプと呼ばれる静止画像を作るのも、これからの Web デザインにおいて足かせになりつつあります。この話題は昨年何度もセミナーで取り上げていますし、プロトタイプの重要性を取り上げた講義やワークショップも行っています。 ひとつのプロトタイプを作るのではなく、目的に応じて最適なツールを選んで作ります。 カンプもワイヤーフレームと同様、コミュニケーションの目的は正しいのですが、ツールや手法に問題があります。例えば、カンプひとつにしても以下のような項目を暗に提示しています。 レイアウト タイポグラフィ 色
Webデザイン

体験のレイヤーをつくるWebデザイン

2012年10日6日は、神戸ITフェスティバルの講演に続いて CSS Nite in KOBE でも登壇しました。神戸での記念すべき第一回目ということで、技術話がほとんどない働き方をテーマにした話題が中心でした。私のセッションは、終わりなき Web の旅と題して、予測不能でトレンドも目まぐるしく変わる Web の世界で変わらないもの、目標にできるものを紹介しました。 再考 Progressive Enhancement 今頃「Progressive Enhancement」なんて言葉を使うなんて古いと考える方もいるかもしれません。不幸にも日本語で最適な表現がなく、カタカナ表記でプログレッシブ エンハンスメントとしてもピンと来ないのが、言葉のもつ意味が浸透しないひとつの要因ではないかと考えています。例えば、昨年からよく耳にするようになったレスポンシブ Web デザインにしても、Progressive Enhancement の設計概念を取り入れずに、テクニックから入ると落とし穴にハマることがあります。今後の Web デザインにおいて外すことの出来ない考えだからこそ、WD101シリーズで詳しく解説しました。 今回の講演で、私は Progressive Enhancement
WD101

WD101: Webデザインであるもの、そうでないもの

このシリーズでは Web Design101（WD101）と名付けて、ウェブデザインをより深く理解するための最初の一歩になる知識やノウハウをコラム形式で紹介していきます。 Webは見た目のコントロールがきかない モニターの外をデザインするのが大半である Webは寛容性をデザインする場である Webのデザインは枠のない世界である Web や書籍を見ていると、様々な「素晴らしい Web サイト特集」があり、一体何を基準に評価しているのか分からなくなることがあります。人間中心設計をしようという声が高まっていると同時に、グラフィカルで一方的なコミュニケーションのサイトも評価が高いですし、Web という媒体への理解や解釈が様々なので、評価がバラつく場合もあります。 もちろん、Web の捉え方は人それぞれで良いと思います。しかし、それにより「Webデザインしたい！」と考えている人たちが、何をもって良い Web デザインなのかが見え難くなる場合があります。 そこで、今回は Web デザインであるもの、そうでないものを幾つか挙げてみました。 これらをすべて理解して実践するのは、大変難しいです。しかし、こうした Web デザインの基礎的な考え方を基に、
WD101

WD101: Webのデザインは枠のない世界である

このシリーズでは Web Design101（WD101）と名付けて、ウェブデザインをより深く理解するための最初の一歩になる知識やノウハウをコラム形式で紹介していきます。 Webは見た目のコントロールがきかない モニターの外をデザインするのが大半である Webは寛容性をデザインする場である Webサイトのデザインは、グラフィックデザインやエディトリアルデザインと同じような感覚でデザインをすると、柔軟性・拡張性が欠けたものになるだけでなく、特定の環境でしか見れないものになることがあります。 こうなるひとつの要因として、グラフィックデザインやエディトリアルデザインが、特定の環境で見るということを前提にしてデザインしているからだと考えられます。A4の紙であったり、名刺サイズだったり、特注のコーティングを施したビルボードなど、決められた枠の中で世界を作り上げるデザインに対し、Webは枠があるようでありません。作り上げた世界をまとめるための「枠」が存在しないのが Web です。 どの枠にするか定められない Ratina Display で見た細長くなった Webサイト【参照】。パソコン向けの横幅にしているつもりでも、見た目が大きく異なる場合がでてきています。 一見、Webでも枠があるように見えます。モニターの大きさや、Webブラウザのサイズもそうですし、CSS の width や height
Webデザイン

レスポンシブとか、そういうことの前に

レスポンシブWebデザインに関する話題を見渡すと、そこまで気にして実装を踏みとどまる必要ってあるのかな？と思うことがあります。 もちろん、レスポンシブWebデザインがパーフェクトなソリューションではありません。しかし、Webにおいてパーフェクトなソリューションが存在するのでしょうか。簡単に作れるツールがないから。古いブラウザへの対応が困難だから。レスポンシブに画像を対応するための最適な方法がないから。実装をしないための理由はいくらでも作ることができますが、実装しない理由は、スマートフォン専用サイトを作ることでも、CSSレイアウトにすることでも、たくさん並べることができます。 Webは完璧な世界ではありません。そして、完璧な世界が訪れることを期待してはいけない場でもあります。予測不可能な世界であり、すぐに新しいものスタンダードになる世界。不完全でありながらも、進化を繰り返すのが Web です。Webが不完全であるのと同じように、ソリューションも不完全なものばかりです（普及しているものであっても）。 完璧／成熟していないから、実装しない。最適な方法がないから作らない・・・こうした考えを持ち続けていると、Webでは何もできなくなります。 全く何もしないのか。それとも不完全ではあるものの利用者に最低限のコンテンツを提供することができるのか。この2つに1つだと思います。利用者にとっては、何もないよりかは、何かがあることのほうが重要だったりします。 レスポンシブWebデザインを実装するとなると、パフォーマンス、リクエスト数、ファイルサイズなど様々な課題にぶつかると思います。また、
Webデザイン

Transformative Web Design という言葉に隠された意味

6月9日に開催されたSwap Skills doubbble05で、基調講演を行いました。昨年に引き続き二度目の基調講演。昨年は、迫り来るモバイル機器中心の世界に備えてコンテンツファーストを実践しようというのがテーマでした。今年は「Transformative Web Design ～変化にしなやかに対応するデザイン力～」と題して、コンテンツを Webという特有の場でより活かし、デザインしていくのはどうしたら良いのかというテーマで話をしました。 既に日本のスマートフォンユーザーは 30%を超え、タブレットをはじめとしたパソコン以外で Webへ接続できるデバイスが増え続ける今日。「Webはもうパソコンだけのものではない。むしろ、マイノリティである」という考えも、昨年では予測でしかなかったかもしれませんが、既に現実になっています。デバイスという垣根を超えて、利用者が欲しいタイミングで欲しいコンテンツを得れるような環境が整いつつあるわけですが、Webデザインの考え方や設計の手法が、それに着いて行っていないのが現状です。 ギャップを埋めるのがデザイナーの仕事 長年、私のサイトをご覧になっている方はご存知だと思いますが、このサイトは Webデザインに関する記事だけではなく、マーケティングやビジネスなど Webに関わることであれば幅広く取り扱っています。その理由のひとつとして、他の視点を理解するためというのがあります。デザイナーが技術を知ること、マーケティングを知ること、社会を知ることによって表現の幅や、伝えるための手法を増やせると考えているからです。
Webデザイン

コンテンツ視点で考えるレスポンシブ戦略

SEOならレスポンシブに PC版の Facebook でオススメのリンクをみたら、モバイル版だった。 スマホで Twitter を見ていたら、PC版のサイトに誘導されて操作が面倒だった。 モバイルサイトのアドレスに注目すると、「m」「mobile」「i」など、のサブドメインが最初に付いている場合があります。これは、PC版の『本家』Webサイトとは別のバージョンを表示していることを意味しています。スマホやタブレットなど、デバイスに応じて最適化されたサイトを表示しています。 利用者のために最適な環境を提供するという意味では、専用サイトは適した対策です。しかし、SEOの視点で見ると専用サイトを作って、URLを細分化してしまうのは良くない傾向です。モバイルユーザーであれば、モバイルで見たサイトをそのまま共有するでしょうし、デスクトップユーザーにしても同様です。10のリンクが付いたかのように見えても URL を見ると 2 つ 3 つに分散しています。 URL をひとつにして、サーバー側で変換するという方法もありますが、サイト全体にかかる負荷を無視するいことは出来ません。デザインの決断を SEO だけで決めるわけにはいきませんが、より多くの方にシームレスな
Webデザイン

今後のWebデザインとの向き合い方

2012年2月25日 CSS Nite in TAKAMATSU vol.6 が開催されました。CSS Nite は、ツールの使い方や制作のノウハウなど、テクニックを扱うことが多いイベントですが、今回は全編を通してコードが出ないという珍しい構成でした。いつもとは少し違う雰囲気ではありましたが、他の CSS Nite にはない満足感を得た方も多かったのではないかという印象を受けました。イベントの様子はTogetterでまとまっているので参照してください。 私のセッションは、Webデザインのウソ・ホント ～ Web らしくデザインするためのヒントと題して、未来を見据えた Web のデザインを行う上で必要な考え方や取り組み方法を紹介しました。 今月はセミナーで登壇する機会が3回もあり、過密なスケジュールでした。準備は大変でしたが、3回を通して一貫としたテーマがあったかと思います。なんとなく「未来のWebデザイン三部作」と呼べる内容だったかもしれません。まず最初の福井での講演で、予想不可能な未来だからこそ身軽で早く動く体勢が必要であると解説。東京の公演では、未来への対応のひとつとしてレスポンシブWebデザインを紹介。そして先日の高松では、過去のWebデザインのあり方をおさらいしながら、未来への進み方を紹介しました。全部聴いた方はいませんが、通して聴くと繋がるところがある内容になったと思います。
Webデザイン

レスポンシブWebデザインから始まる適応への道

2月22日 Web担当者Forum 主催のイベント 企業サイトのスマホ“対応”とその一歩先の”最適化”とは？ に登壇させていただきました。今回はレスポンシブ Web デザインの話題を中心に、Web への窓口がますます増える今後にどう対応していけば良いのかを、技術・デザイン・企画・そして具体的なソリューションなど様々な視点で講演されました。 今回は、先月執筆したレスポンシブにデザインするために克服することをキッカケで話すことになりました。「未来へレスポンシブに対応するための設計と戦略」と題して、スマートフォンやタブレットだけでなく、もう少し視野を広げてレスポンシブの実現について話をしました。 クロスオーバーする時期が来た 制作者向けのセミナーであれば、レスポンシブ Web デザインを語るのにふさわしい人は他にいると思うのですが、今回は Web担当者Forum という制作者以外の方が多く参加されるセミナーだったので講演が楽しみでした。 実のところ、Media Queries を利用したレスポンシブ Web デザインの制作自体はそれほど難しい話ではありません。では、何が難しいのかというと、設計の部分であったり、ワークフローであったり、
WD101

WD101: Webは寛容性をデザインする場である

このシリーズでは Web Design101（WD101）と名付けて、ウェブデザインをより深く理解するための最初の一歩になる知識やノウハウをコラム形式で紹介していきます。 Webは見た目のコントロールがきかない モニターの外をデザインするのが大半である コンテンツと、取り囲む要素のバランス Webは、コンテンツを配信・消費するために最適化された媒体（又はシステム）です。テキスト、画像、ビデオなど様々な種類のコンテンツが存在しますが、それらコンテンツを通して人と人、コンテンツとコンテンツ、人とコンテンツが繋がる場が Web です。デザイナーであろうと開発者であろうと、この前提を抜きにして Web デザインを語ることはできません。 コンテンツは純粋な形であればあるほど、より多くの人に届けることが出来ます。装飾された画像テキストより、010111011101 のバイナリーで書かれているテキストのほうが、数十年先もアクセスできるコンテンツです。しかし、コンテンツを生の形で公開しておけば良いというわけではありません。コンテンツに装飾を入れることで、より人の感情に響くことがあります。インタラクティブにすることで、コンテンツに触れやすくなります。構造を作ることで、自分の思い通りに操作できるようになります。 コンテンツを補助するためにデザインが必要になるわけですが、ここで駆け引きが発生します。マークアップ、
Webデザイン

楽天から学べる日本的なWebアプローチ

学べるところが多い楽天ページ Webデザインに関わる様々な情報やノウハウが世界中で共有されているとはいえ、お国柄は存在します。Yahoo!でも、世界共通にみえる UI コンポーネントがありますが、アメリカと日本と中国ではアプローチが異なります。情報にメリハリをきかせているアメリカ。今の話題を中央にたくさん詰め込めるように工夫してある日本。クリックをしなくても膨大な情報を消化することができる中国。ポータルサイトをひとことで言ってもやり方がいろいろあることが分かります。 各国の Yahoo! を見て「欧米はシンプルなのに、日本や中国はなんかごちゃごちゃしている」と感じた方はいるかもしれません。なぜそんな小さなところに情報を詰め込むのか、なぜページを整理しなのか、メッセージを絞ってメリハリをつけないのか、といった悩みを抱えるデザイナーもいるかもしれません。 日本らしい忙しいデザインの代表例としてよく出てくるのが楽天です。楽天というひとつのショッピングモールではあるものの、表現はお店に委ねられているので統一性はあまりありません。10,000 ピクセルにもおよぶ長いページのどこに購入ボタンがあるのか分からないこともあります。次から次へと目に入ってくる画像を見ているうちに、何を買いに来たのかさえ忘れる人もいるでしょう。 それでは、楽天の店舗ページが悪いデザインかというと、私はそうは思いません。楽天のデザインは、欧米のデザインを見ているだけでは分からないことを教えてくれます。日本で求められているもの、表現上の制約や可能性、良いとされている基準が何であるかを知るキッカケになると考えています。 なぜ楽天ページは楽天ページでいられるのか 装飾が要素が多く、ひとつでも多くの情報を表示させ、宣伝文句が書かれた大きな画像が次から次へと登場する楽天ページ。楽天ページだけではありませんが、
Webデザイン

レスポンシブにデザインするために克服すること

画像の課題は解決されつつある 先日 Web担当者 Forum で、レスポンシブ・ウェブデザインの功罪とモバイルファースト という記事が掲載されました。Media Queries を活用するなど実装のための概要を説明した上で、非表示だけど読み込まれているから膨大な画像素材が存在する PC サイトのレスポンシブデザインは不適切であると書かれています。 現存の Web サイトを Media Queries だけでレスポンシブ・ウェブデザインをするのであれば、Web担当者 Forum での指摘は間違っていませんが、実際のところレスポンシブにデザインすることは、Media Queries による対応だけではありません。例えば、画像の表示のさせ方を工夫すれば、記事で指摘している課題はある程度解決できます。Web担の記事からもリンクされている CSS Rador でも取り上げられている解決策もありますが、こちらでも紹介。 設計を再考する Media Queries だけでも、簡単なところでは背景画像から始めることができます。うまく切り分ければスマホでは読み込まれないように制御出来ますし、content属性を活用するのも手段です。 サーバーサイドで処理する
Webデザイン

Webデザインが抱える制約と評価の仕方

先週になりますが、Don Norman 氏が PHD-DESIGN のメーリングリストで発した言葉が話題になりました。カリフォルニア大学デービス校デザイン課の Web サイトが酷いというので彼が厳しく避難した内容。こんな文字が小さい Web サイトをつくるデザイン課を受講する意味はないと言い放っています。その後、Webマスターも登場するなど様々な意見が交換されています。 Webサイトをみると分かりますが、10年くらい前につくったように見えても仕方ない見た目です。文字が小さいだけでなく、文章の背景にアニメーションを付けたいがために Flash を導入したのだろうと思わせる演出もあります。Webデザインを仕事にしている方なら思わず突っ込みたくなるところがあると思いますし、Norman 氏のような意見を発する人もいるかと思います。 私も Web デザインを仕事にしている端くれなので、言いたいところは多少なりともあります。しかし、デザインの評価というのは単に完成品をみればできるというわけではないのが難点です。このサイトが作られた背景を知らずして「こんなデザインは駄目だ」と評価するのは感情的な意見を述べているだけであり、批評・評価とはいえないでしょう。 例えばこうした大学のサイトの場合、幾つかの『制約』のなか制作・運営されている可能性があります。 サイトを改善するための費用がない 限られた大学の予算ではプライオリティが他にある カリキュラム上、生徒に作らせるようにしている 学部で決定権がある人のテイストやWebの知識に大きく左右されている場合がある
Webデザイン

企業の透明化がブランドを高める理由

デザインに関わる様々な物事を再考しなければならない時期にきていると考え、2008年くらいから Web デザインとそれをとりまく考えや手法を『現在・未来』と照らし合わせながら記事にしています。数年前から気になっているのが、測定の仕方について。ページビューは死んだと言われて久しいですが、未だにページビューを軸にした広告モデルが根強く残っています。また、Like やフォロー数といった近年の『ソーシャル指数』にしても同様で、基本的に「どれだけ露出したか」が価値に直結しているのが現状です。 企業が伝えたいイメージを様々な媒体を活用し、何処にでもある状態をつくることで、顧客にイメージを植え付ける 「どれだけ露出したのか」「どれくらい人は時間を過ごしたのか」を大きな価値にしているのがブランディング。企業が伝えたい世界観をひとりでも多くの方に伝えるために、CM、雑誌広告、ビルボードなどを活用します。オフラインの世界では厳密な測定が出来ないとはいえ、人の頭には伝えたイメージが残っている場合があります。企業や製品名をみると、広告塔になっている芸能人や、テーマソングが脳裏に浮かんでくるのは、オフラインの世界では『刷り込み発信』が上手く機能しているからなのでしょう。 オフラインでのコミュニケーションをそのまま流用したブランドサイト。 未だに Web でもページビュー、Like数などが重要視されている理由のひとつは、オフラインにおけるブランドの露出という価値観と重ねやすいからなのかもしれません。作ったイメージ（
WD101

WD101: Webは見た目のコントロールがきかない

このシリーズでは Web Design101（WD101）と名付けて、ウェブデザインをより深く理解するための最初の一歩になる知識やノウハウをコラム形式で紹介していきます。 DTPという名の足かせ Webデザインはよくも悪くも DTP のノウハウを受け継ぎながら徐々に成長してきた領域です。今でも根強く残っている「ページ」という概念。タイポグラフィ・グラフィック・レイアウトなど DTP が培ってきたノウハウは CSS と HTML （ときどき JavaScript）を使って再現されたりしています。DTPの概念とノウハウがなければ Dreamweaver のようなソフトは生まれなかったでしょうし、Dreamweaver のようにコードを手打ちしなくても DTP 感覚で Web デザインに入り込めるソフトがなければ、Web デザイナーを職業とする方もこれほど増えなかったかもしれません。 しかし、DTP との関連付けがあまりにも強くなり過ぎたことで、Web という紙とはまったく異なる仕組みに対してデザイン（設計）しているのにも関わらず、DTP の感覚から抜けきれなくなったのも事実。