WD101

A collection of 7 posts

WD101

WD101: PC脳な制作者にありがちな8つのアプローチ

このシリーズは Web Design101(WD101)と名付けて、ウェブデザインをより深く理解するための最初の一歩になる知識やノウハウをコラム形式で紹介していきます。 Webは見た目のコントロールがきかない モニターの外をデザインするのが大半である Webは寛容性をデザインする場である Webのデザインは枠のない世界である Webデザインであるもの、そうでないもの WD101: 画面ではなく部品から始めてみよう あなたはPC脳ですか? 「PC脳」とは、私が UI やデザインの講座をするときに、よく使っているフレーズです。 従来は、ノートパソコンやデスクトップパソコンが Web 接続可能な主力デバイスでした。しかし、今は徐々に台数が減り続けており、代わりにスマートフォンやタブレットといったデバイスの台数が伸びてきています。さらに、パソコンの次に買う 2 台目のデバイスとしてではなく、パソコンは買わずにスマートフォンやタブレットだけで良いと考える人たちも増えてきています。 Google の Our Mobile Planet より。スマートフォン所有率は、2011年から2012年のときのような急成長はしなかったものの、2013年も確実に伸びています。また、年齢別でみると若い世代の伸びは今年も著しい。

WD101

WD101: 画面ではなく部品から始めてみよう

このシリーズでは Web Design101(WD101)と名付けて、ウェブデザインをより深く理解するための最初の一歩になる知識やノウハウをコラム形式で紹介していきます。 Webは見た目のコントロールがきかない モニターの外をデザインするのが大半である Webは寛容性をデザインする場である Webのデザインは枠のない世界である Webデザインであるもの、そうでないもの Windows中心設計は5年前の話 すべてのデバイスやソフトウェアで同じように Web サイトをデザインするのは不可能といっても過言ではありませんし、むしろ違いを受け入れ、利用者の環境やニーズを尊重するのが Web デザインの本来あるべき姿です。柔軟性・拡張性をもつ Web ですが、Web デザインはページの概念を強く意識したビジュアルデザインが最優先された時期がありました。 パソコンが Web アクセスの中心だった頃は、利用環境が限られていたので、同じような見た目を再現するのは難しくありませんでした(もちろん IE6 問題などはありますが)。グラフィックデザインの要素が強いページデザインでも、どのパソコンからでも見ることが出来たので柔軟性や拡張性が重要視されることがあまりありませんでした。「Windows で見れればだいたいの人が見れる」と考える人がいたのも、Web アクセスするための OS の 9

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

WD101

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

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

WD101

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

このシリーズでは Web Design101(WD101)と名付けて、ウェブデザインをより深く理解するための最初の一歩になる知識やノウハウをコラム形式で紹介していきます。 Webは見た目のコントロールがきかない Webサイトをデザインするといっても、スケッチブックに描いたワイヤーフレームを基にグラフィックツールで装飾をすれば完成するわけではありません。たとえ、見た目がよくても操作がしにくい、読み難い、何処になにがあるのか把握しにくいのであれば意味がありません。つまり外観を作るというのはデザインプロセスのほんの一部でしかなく、それ以外のことを考える必要があります。 見た目だけではデザインが完結しない・・・という意味では、Web デザインはグラフィックデザインというより、プロダクトデザインに近いでしょう。プロダクトデザインも単に絵が描けて、美しいフォルムを作れば良いというわけではありません。プロダクトが置かれる環境、どのような人がどういったシーンで使うのか、トラブルが起きたときの対処方法など見た目だけでは解決できないことを製品の一部として取り込まなければいけません。 モニターの外にある8つのレイヤー Webデザインも同様に、レイアウトやグラフィックなどモニターに映し出されているもの以外を考慮する必要があります。それらを8つのレイヤーとして分類することができます。これらを意識的に考えてペルソナ設定や仕様書としてまとめる場合もありますが、無意識に(又は前提として)考えてデザインに落とし込まれている場合もあります。 それぞれのレイヤーには異なる課題があり、それらがレイアウトやグラフィックの作り方を左右します。 ソフトウェア Webサイトを表示させるためのソフトウェアは何か?そこで実現できるテクノロジーはなにか?そのソフトウェア独自の機能や表示法はあるか? ハードウェア 最新の機器でアクセスしなくても適切な動作ができるか?ハードウェアの機能を Web サイトに活用することは可能か?

WD101

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

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