お久しぶりです、ライターのYUKIです！ モービル・ファーストやレスポンシブ・デザイン、リーンUXやアジャイルなど、デザイナーとして押さえておきたいトピックはたくさんあります。私自身がまだまだ勉強不足なこともあり、今回はここに挙げたもののうちおそらく皆さんもよくご存知のレスポンシブ・デザインと同意味で使われることがある、アダプティブ・デザインについての個人的な見解をシェアさせて頂こうと思います。 「レスポンシブ・デザインて何？」という方は、まずLIGの過去記事をどうぞ。 必読！5分でわかる流行のレスポンシブWebデザインまとめ 必読！5分でわかる流行のレスポンシブWebデザインまとめ その2 必読！5分でわかる流行のレスポンシブWebデザインまとめ 制作編 はじめに レスポンシブ・デザインとアダプティブ・デザインが混同される理由 スマートフォンやタブレット、スマートテレビなどの普及により、
by tetue on filcker スマートフォンをはじめとするデバイス環境の変化に合わせて、様々なデザイン手法が提唱されています。今回は、その中でも、”モバイルファースト “というデザイン理念についてご紹介したいと思います。 「モバイルファースト」という考え方 by Hnygard on flickr 「モバイルファースト」は、米国のデザイナー／ディベロッパーである、Luke Wroblewski氏（http://www.lukew.com）が提唱したと言われ、モバイルでの利用を起点にサイトやサービスをデザインするという考え方で、レスポンシブWebの基にもなっているデザイン理念です。 これまでは、PCファーストこれまでは既存のPCのサイトがあり、次にモバイル向けにいかに対応するか？というアプローチがメインでした。しかし、今後のユーザーとサービスとのタッチポイントや滞在時間を考えた時、
私が運営しているレスポンシブWebデザインのギャラリーサイト「Responsive Web Design JP」ですが、Andy Clarke氏のセミナーで「中にアダプティブデザインのサイトも混ざっている」と指摘されてしまいました（「今のレスポンシブWebデザインは誤解されている」英の著名デザイナーAndy Clarke氏が話す3つの修正点）。 例えばSONYのサイトのように、「特定のスクリーンサイズ（ブレーク・ポイント）ではWebサイトが正しく表示され、テキストを読んだりボタンを押すことが可能だが、それ以外ではテキストが見切れたりボタンが押すことが難しい」ということだそうです。 まさか著名人のセミナーに自分のサイトが活用されるとは思っていなかったので、実は結構嬉しかったりして会社の同僚に自慢したりもしたのですが、この部分については自分の考えを明らかにしておきたいと思います。 「アダプティ
前回の投稿「レスポンシブ・デザインとアダプティブ・デザインの定義を整理してみた」に対して、「覚え書き@kazuhi.to」で「続・レスポンシブWebデザインとかアダプティブWebデザインとか」として、再度レスポンシブとアダプティブについての木達さんの解釈をまとめています。記事中でおっしゃっている通り、僕とは見解が違うところもありますが、特に図解の部分はウェブ制作に関わる人には必見だと思ったので、こちらでも共有させていただきます。マルチデバイス時代のウェブ制作において考慮すべき技術的な制作手法の分類がすっきり整理されています。 ※上図は「続・レスポンシブWebデザインとかアダプティブWebデザインとか」の2013/6/23の時点のものを内容を変更せずに、そのまま掲載させていただいています。（木達さん、ありがとうございます！） 「レスポンシブ」や「アダプティブ」という言葉の扱いはとりあえずわき
2013年6月19日 著 渡辺さんが、レスポンシブ・デザインとアダプティブ・デザインの定義を整理してみたのなかで僕の記事に言及してくださったので、改めて自分の解釈を覚え書きしておきます。 身もふたもないことを先に言っておくと、どうもこの「レスポンシブ」やら「アダプティブ」という言葉が最近、好きではありません。意味的にも発音的にも紛らわしく、厄介なことこの上ない。これらをそのまま日本語圏で（カタカナ表記にしろ英語表記にしろ）使うことについては、どちらかというと反対の立場。渡辺さんの記事で説明されているように、「アダプティブ」と言ってもそれがコンテンツの適応性を指すのか、それとも表示上の適応性のみを指すのか、文脈次第で変わるのも好きになれない理由。 閑話休題。レスポンシブWebデザインにしろアダプティブWebデザインにしろ、Webコンテンツをマルチデバイスに対応させるうえでの考え方であることは
「レスポンシブからアダプティブへ – 必要な情報を、必要なときに、必要としている人へ」という記事を読んでいてレスポンシブ・デザインやアダプティブ・デザインの言葉の定義を一度整理しておいたほうが良さそうだと感じたので、遅ればせながら自分なりにまとめてみました。 レスポンシブ・デザインやアダプティブ・デザインについて話をする際に、そもそもの定義がずれていると話が噛み合わず、無駄な討論をしかねません。さんざん討論したあげく「ところで、アダプティブ・デザインってどんな意味で使ってる？」と問いなおしたら、お互いに勘違いしてたとか、結構ありそうな話です。 どれが正しいとか正しくないとかではなくて、僕が知る範囲で一般的に使われている定義をまとめてみました。いくつかの意味で使われていることを知っておけば、ミス・コミュニケーションも未然に防げる可能性が高くなるのではないでしょうか？ ※ここで紹介する定義を「
2013年5月31日 著 （ [2013-05-31 追記] Google+ のほうでツッコミいただきましたが、引き合いに出している記事における話が「Webの」デザインなのか、もっと広い意味でのデザインなのか、がやや不明瞭であるにもかかわらず、自分のほうで勝手に前者＝Webデザインの話として一方的に解釈のうえ記事を書いてしまいました。その点は自分の読解力不足であり、反省すべくこのまま恥を晒しておきます。） 社内でもレスポンシブからアダプティブへ - 必要な情報を、必要なときに、必要としている人へ | Digital experience Universityという記事が話題になったので。自分がこの記事で気になったのは、センサーを搭載したデバイスを用いてパーソナライズされた情報を届ける「アダプティブデザイン」というコンセプトという出だし。何も知らない読み手であれば、アダプティブWebデザイン
Responsive Web Designを日本語で表記する際、人によってさまざまな表記があります。今のところ、見受けられるのが レスポンシブ・ウェブデザイン レスポンシブウェブデザイン レスポンシブ・Webデザイン レスポンシブWebデザイン レスポンシブwebデザイン といった具合。さて、どれを採用すべきか。私の場合、これまで「レスポンシブ・Webデザイン」を採用してきました。「Web」という言葉はアルファベットで表記するのが一般的である事、「Webデザイン」はここでは1単語で利用することから、「レスポンシブ」と「Webデザイン」の間に中黒を打つのが良いと判断しました。 しかし今回、Googleが公開したブログ記事では「レスポンシブ・ウェブデザイン」が使われています。 Google がお勧めするスマートフォンに最適化されたウェブサイトの構築方法 日本で出ている、書籍の名称もこれを採用し
2012年6月16日 著 自分でもしつこ過ぎてキモいとは思うけれども、敢えて書きます。このへんの続きの話ね： レスポンシブWebデザインと「最適化」 Re: Responsiveの本当の意味を考えてみる必要がある。と思う今日この頃です。 去る6月6日、Official Google Webmaster Central BlogにRecommendations for building smartphone-optimized websitesという記事が掲載されました。Google先生がこうもレスポンシブWebデザイン（Responsive Web Design、以下「RWD」）に対し肯定的な態度を示したというのは、RWD派（誰）に対して良い追い風になると思ったし、そりゃコンテンツをクロールしたり順位付けする側の視点からすればURL周り（何）はシンプルなほど都合は良いはずで、見方によれば当
2012年5月2日 著 レスポンシブWebデザイン（Responsive Web Design、以下「RWD」）は、いま自分が注力している旬なテーマのひとつであり、それゆえに取り上げている記事などもいろいろ読んだりしているのですが、RWDが「最適化」の3文字と共に紹介されているのを見かけると、ちょっと首を傾げたくなります。RWDの記事に限らないかもしれませんが、おそらく「最適化」という言葉が使われるとき、何に対しどういう尺度でもって最も適していると言っているのか、そのへんが明示されていないことが多い、というあたりに原因がありそうです。そういう明示がされないままで、半ば盲信的にRWDをプッシュされていたりすると尚更「なんだかなぁ」と思います。 デバイス固有のスクリーンサイズに対し、Webページのレイアウトやビジュアルデザインがフィットしているかどうか、一定の使いやすさを提供できているかという
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
