Design」という記事を読んでいて衝撃を受けたので、このブログでもご紹介したいと思います。Design」には、ウェブ制作の歴史と未来が記されています。Web」にも通じる内容です。Design」が、いま一度、日本で見直される必要があると感じています。Apartに掲載されたものです。Samurai」のメンバーでもある人で、現在もウェブ開発者として制作をする傍ら、世界中で講演を行っています。Directions」というウェブ・プロフェッショナル向けカンファレンスの創設者であり主催者でもある方です。Design」が引用されていて、レスポンシブWebデザインの根底にある考え方が記されています。Design」から学ぶべき3つの「ウェブの哲学」この記事のすごさは、これからのウェブ制作(特に日本の)に必要な考え方がぎっしりつまっているところにあります。それらは、いまの日本のウェブ制作において見直されるべき重要な「哲学」だと思います。スマホの波が日本に大きく押し寄せているいまだからこそ、日本でのこの記事の意義が増しています。Design」から抜粋されたもので、それに添えられた日本語は、記事の内容をふまえ僕が意訳したものです。all.柔軟であることはウェブの性質である。デザイナーや開発者として、私たちはその柔軟性を喜んで受け入れるべきだ。柔軟であることで、すべての人にアクセシブルなページを制作するべきである。ウェブが作られたとき、ページ作成の見本とされたのは印刷媒体のレイアウトやデザインでした。本や雑誌のデザインやレイアウトから、いろいろな要素を借りてきて初期のウェブは作られました。ウェブはそもそも印刷物のように物理的に固定されたものではないのです。god.印刷媒体ではデザイナーは神である。印刷物ではデザイナーが、紙のサイズ、レイアウト、フォント、フォントサイズ、色など、使われるすべてのデザイン要素を完全にコントロールすることができました。ウェブという媒体では、それらのコントロールがある程度ユーザに委ねられる柔軟な作りになっています。Webは、さまざまなデバイスや回線環境からアクセスされることを想定し、誰でもアクセスできるオープンなものであるという理念のもとに作られたものです。本や雑誌の場合、物理的な紙のサイズがあり、そこには変えることができないデザインやレイアウトがあります。あるユーザにとって文字が小さ過ぎても、それを変えることはできません。電車などの狭いスペースでは読みにくい新聞も、物理的な紙面サイズを変えることはできません。(綺麗に折りたたんで、狭いスペースで器用に読んでいる方もいますが。)反対に、ウェブサイトではユーザがフォントサイズを読みやすい大きさに変えたり、ウィンドウサイズを変更して自分好みの読み方で「紙面」を読むことが可能です。sprang.印刷物という媒体から生まれ、デザインの手法、言語、ルールは印刷から大きく影響を受けてはいますが、ウェブは新しい媒体です。それにもかかわらず、ウェブは「印刷」という概念から抜け出せずにいます。※強調は僕が追加しました。nature.「印刷されたページ」の習慣から抜け出し、新しいウェブという媒体やその特性にしっかり向きあうべきだ。ウェブはユーザがユニバーサルにアクセスでき、自分の好きな時に好きなように閲覧できる、自由で柔軟な媒体です。以下の3つの環境が整ったいま、その柔軟で自由な媒体を最大限に活かせる時代になってきています。スマホやタブレットなどの端末3Gや4Gの回線、公共WiFiなどのインフラどの端末からでもアクセスできるクラウドサービス今までの印刷的な固定された考え方やコントロールからウェブを解き放って、その柔軟さや自由さを最大限に活用するべき時代です。Design」から12年以上の時が経ちますが、「印刷媒体」からの脱皮のプロセスは今もまだ続いているように思います。僕自身もつい最近まで「コントロール」にこだわって「脱皮」できずにいました。ウェブにとって変化の時代これら「ウェブの哲学」は、ウェブデザイナー、コーダー、プログラマーなどの制作側、開発側だけでなく、ウェブサイトを発注するサイトオーナー側、また、できればユーザにも広める必要のある、大切な考え方だと思います。テーブルレイアウトからCSSレイアウトへ。CSSレイアウトからウェブ標準、セマンティック・ウェブへ。いま、レスポンシブWebデザインのような、より柔軟な形にウェブが変わろうとしています。僕は15年以上ウェブ制作に携わっていますが、いまのウェブは変化の時代にあり、とてもエキサイティングな時だと心から感じています。数十年前に考えられた「理念」がうねりとなって実現に向かっている。そんなふうにも感じます。「印刷媒体」から自分を解き放ち、この「ウェブの柔軟性」という特性を活かすことにこだわってみたら、新しい道が見えてくるように思います。その道はウェブのビジネスや社会への貢献にも通じているように思うのです。page.デザイナーとして、その役割を考えなおす必要がある。コントロールを放棄し、ウェブページとの新しい関係を探す必要がある。ウェブはそもそもその設計上、柔軟なつくりなっています。ウェブデザイナーは、その柔軟性を無理やりコントロールし、フォントを固定し、レイアウトをすべてのブラウザで同じように閲覧できることにこだわり、画像を多用して印刷物に負けない「固定された」美しいページ・デザインを作ろうとしてきました。controllers.根底にあるのはデザイナーはコントロールする者であるという考え方だ。instance).デザイナーはユーザの望みや閲覧環境に関するユーザの選択を覆したいのである(たとえば、フォントサイズを固定することで)。perfect...デザイナーは全知全能で、すべてのブラウザで1ピクセルもずれない完璧なレンダリングを求めている。皮肉な表現もありますが、いままでのウェブ制作は、実際このように行われてきたと思います。どのブラウザでも同じように表示させたい願望は、自分も長い間持ち続けて来ました。今でも捨てきれていないかもしれません。難しいと思いつつも「ウェブデザインに対する考え方を変えるべきだ」と、頭の中で葛藤を続けています。レスポンシブWebデザインでウェブ制作をはじめてみて、「コントロールから自分を解き放つ」という考え方が一層深まっています。繰り返しになりますが、ユーザは自分の好きなデバイスで、好きな方法で、好きな時に情報を消費したいのです。ユーザの問題を解決し利便性を提供することで利益を享受するウェブサイトで、デザイナーがそれを邪魔する意味はどこにもないはずです。web.もしかしたら、コントロールできないことはウェブのバグであり「制限」なのかもしれません。page.時としてウェブ媒体でも望まれる「印刷媒体」でのデザイナーの持つコントロールは、印刷物の制限の一つでしかないとも考えられる。things”.ウェブには同じような「制約」がないことを喜んで受け入れるべきだ。はじめにコントロールできること、できないことを受け入れる必要がある。余分なものばかりが目立って、肝心な本文が読みにくいウェブサイトは、ReadabilityやInstapaperのようなツールを使って、ユーザによって読みやすい方法で読まれるようになるのです。そのウェブサイトでそれが不可能なら、ユーザは他に読みやすいサイトを探すでしょう。future.ページのデザインをコントロールするためではなく、ページのデザインを「提案する」ために、そして、情報を伝達するためにスタイルシートに依存しないように適切に使えば、作られたページは過去や未来のどんなブラウザでもうまく「動作する」はずだ。※強調は僕が追加しました「スタイルシートはページのデザインを提案するもの」という考え方は、僕にとっては衝撃的なものでした。どちらかというと、僕は「スタイルシートはページのデザインをコントロールするもの」だと考え、ウェブページを作ってきたからです。ユーザがそれらの「コントロール」を崩すことをあまり好ましく思っていませんでした。考えてみると、それがユーザのためにならないのであれば、「コントロール」する意味はない。いまでは、そんなふうに思うように変わってきています。スタイルシートで行うレイアウトやデザインは、制作者である自分がユーザに提供する「1つの提案」でしかないと心から思えるようになってきました。ウェブをコントロールから解き放て!ちょっと大げさかもしれませんが、古い考えを捨てて、新しい時代への一歩を踏み出そう!そんなふうに思います。デザイナーはウェブの柔軟な特性を受け入れ、印刷媒体から引き継がれたウェブでの「コントロール」から解き放たられるべきだと思います。その「コントロール」をユーザに委ねることができる自由な発想で新しいデザインやレイアウトを考えるべきだと思います。今はないウェブデザインやレイアウトが、日本の優れたデザイナーや開発者に生み出されることを想像すると、今からワクワクしてしまいます。browsers)....順応性のあるページを制作するべきだ。ユーザが選ぶ(または選ばなくてはならない)ブラウザの種類や、プラットフォーム、スクリーンに依存しないアクセシブルなページを制作するべきだ。それは、スクリーン解像度やサイズ、色数に関係なく可読性に優れたページを意味する(また、ページが印刷されること、音声リーダーに読み上げられること、点字リーダーを使って読まれることを忘れてはならない)。size.それは、視力が良くないユーザや文字を大きくしたいと望むユーザのニーズに順応するページを意味する。テーブルレイアウトからCSSレイアウトに移行してデザインとコンテンツを分離させ、ウェブ標準を学び、セマンティック・ウェブについて考えウェブ制作をしてきました。いまレスポンシブWebデザインで制作を始めてみて、それらの重要性を再度認識しています。それらはAllsopp氏が述べている「順応性のあるページ」につながっていると思います。デザインとコンテンツの分離スタイルシートを利用してコンテンツとデザインを分離させることで、レスポンシブWebデザインのような手法は成り立っています。3G回線のような遅い回線でのウェブサイトのパフォーマンスを考慮して、CSS3のような新しい技術を活用して画像の使用を最小限に抑えるといった工夫が必要になります。標準に準拠したウェブ制作デスクトップ端末でもモバイル端末でも、技術はものすごいスピードで進化しています。ウェブの技術であるHTML5やCSS3だけでなく、カメラ、GPS、各種センサー(方位センサー、加速度センサーなど)など、新しい端末技術を最大限に活用できるように新しい仕様の標準化も進められています。それら新しい仕様をサポートするブラウザを搭載したさまざまな端末で、うまく「動作する」ウェブサイトを作ることを考えると、自然と標準に準拠したウェブ制作にならざるを得ません。コンテンツの意味に忠実なマークアップユーザは、コンテンツを自分の好きなときに、好きなように消費したい。考えると、コンテンツのポータビリティが重要になります。RSSリーダーで読まれても、ReadabilityやInstapaperのようなリーダーアプリを介して読まれても、うまく「動作する」ウェブサイトにするには、コンテンツの意味に忠実なセマンティックなマークアップをすることが必須になります。「モバイル対応」をきっかけとして、スマホやタブレットなど、さまざまな端末でもうまく「動作」する、アクセスできるウェブサイトを考えることで、閲覧環境に依存しない「順応性のある」ページ制作ができるようになると思います。レスポンシブWebデザインのような手法を用いることで、さまざまな閲覧端末に順応するウェブサイトを制作し、スタイルシートでユーザが望む閲覧体験に近いレイアウトやデザインを「提案する」ことができると思います。flexible.旅路はコントロールを手放し柔軟になることからはじまる。ウェブ制作者が「ウェブの柔軟性」を心から理解し、ウェブサイトでデザインやレイアウトを完璧にコントロールすることから自らをを解き放つことで、ウェブという媒体の持つ特性を最大限に引き出せるようになると信じています。Web」といった考え方につながっていくと思います。逆に、これら「ウェブの哲学」を理解せずに、本当の意味での「レスポンシブWebデザイン」はできないと考えています。「レスポンシブWebデザイン」を小手先だけの対応だけで終わらせないためにも、モバイル対応が早急に求められているいま、これらの「ウェブの哲学」を見なおして、ウェブ制作を次のステージに持っていく必要があるのだと思います。author「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。ウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。Queriesが動かなくなったレスポンシブWebデザインが必要な理由を分かりやすく伝える画像3ついまさら聞けないRetina対応のための「ピクセル」の話レスポンシブなデザインにするなら知っておきたい。使ったときに戸惑ったことのまとめレスポンシブなデザインにするなら知っておきたい。以上の内容とは反しますが、大変参考になったのでここに載せていただきます。「我々は500年間印刷し続けていて、Webはたかが数十年しか経っていないことを考えると、まだ正しいものを見い出せきれていないのは別段おくべきことではない。