Web Design Clipはホームページ・Webデザイン制作の参考になる日本のWebデザインギャラリー・クリップ集です。トレンドを押さえたクオリティーの高いWebサイトをクリップしています。
スマートフォンの普及を背景に、「レスポンシブWebデザイン」(Responsive Web Design)という制作手法が海外で注目を集めている。レスポンシブWebデザインとはどのようなアプローチなのか? 実例で解説する。 ウィンドウサイズを基準にデザインを調整 レスポンシブWebデザインとは、デバイスごとに複数のデザインを用意するのではなく、ブラウザーのウィンドウサイズに合わせてデザインをフレキシブルに調整する制作手法だ。モバイルサイトの制作では、デバイスやスクリーンサイズごとにページを振り分ける方法が一般的だが、レスポンシブWebデザインではHTMLはそのままに、CSS3のメディアクエリーを利用してスタイルシートだけでデザインを変更する。 レスポンシブWebデザインは、2010年5月、米国のイーサン・マルコッテ氏によって提唱され、海外では企業サイトを含む多くのWebサイトで採用されてい
ミニマルなデザインにはまる、シンプルで美しいフリーフォントをYou the Designerから紹介します。
ウェブサイト・アプリケーション、Eコマース用をはじめ、音楽、スポーツ、乗り物、料理・キッチンなど多種多様なカテゴリが揃っているアイコン素材を紹介します。 しかも、リクエストに応じてアイコンを無料で作成してくれたりもします。 Icons8 | Order Icons for Windows 8 for Free [ad#ad-2] 全149種14カテゴリのアイコンをご紹介 あなたの欲しいアイコンをつくってもらえるかも アイコンの利用にあたって 全149種14カテゴリのアイコンをご紹介 アイコンは14カテゴリ149種、ウェブサイトやアプリケーションでよく使用するものから、音楽・スポーツ・料理など多種多様なものが揃っています。 ダウンロードできるアイコンのフォーマットは透過PNGで、下記に全種類を紹介します。
HTML5について 最近、HTML5のコーディング案件についての問い合わせや質問があります。そこで早速、HTML5でコーディングされている企業サイトを調べましたので今回ご紹介したいと思います。 それともう1つ、今回調べて気づいたのですが多くのWEB制作会社が自社サイトをHTML5で作り直しているようです。 私も取り残されないように日々精進したいと思います。 ○アップル このサイトは説明不要ですよね。アップルの特設サイトです。アップルが提供する「Apple HTML5 Showcase」 http://www.apple.com/html5/ ○Google Google「ウェブの進化」 Google Chromeのリリース3周年を記念して制作されたコンテンツで、Web技術やブラウザの進化の歴史を視覚化。1990年から現在まで約20年に渡る年表を色鮮やかなインフォグラフィックとしてHT
UX や HCD の勉強をしてみたり、ワークショップに参加しても、会社内での理解を獲得するのが難しい場合があります。装飾より広い範囲でデザインを考えことは時間 (コスト) が必要だけでなく、同僚のデザインプロセスの参加は不可欠です。しかし、成果物として見え難いプロセスですし、「自分はデザイナーではない」と最初から拒否されることもあります。外で入手した様々なデザインアプローチをひとりでいきなり始めても何も変わりませんし負担が大きくなるだけです。UX を社内の文化として取り入れるよう働きかけ、デザインがしやすい環境作りがまず必要になります。 つまり、勉強の次は啓蒙活動です。 社内勉強会をしているところであれば、そこで外で学んできた知識を共有することはできると思います。やっていない企業でも忙しいスケジュールの中から2,3時間ほど共有する時間を絞り出すことは出来るはずです。では、そこで何を話せば良
ウェブサイトの構築といっても、立場関係を考慮することなく、コラボレーションのようなデザインプロセスになってきています。デザインプロセスのどのフェイズにおいても、開発メンバーやクライアントを交えて意見を交換するときがあります。皆でサイトを作り上げて行くわけですから、会話をすることはとても大事な時間ではありますが、建設的な意見ばかりが出て来るわけではありません。時には会議が迷走してしまったり、開発メンバーの士気を下げてしまう可能性もあります。 チームメンバーだけでなくクライアントにも伝えておきたい、建設的なフィードバックの仕方。よりよいウェブサイトを皆で作って行くために覚えておきたい項目を5点紹介します。 感情を含む熟語を含めない 「好みではない」「違う気がする」といったネガティブな表現だけでなく、「好きだね」も使うのを控えたほうが良いです。もちろん、違う意見を言うことは悪い事ではないですし、
批判ではなく批評 個人プロジェクトでない限り、公開前に誰かにデザインを見せる機会があると思います。相手はクライアントかもしれませんし、同僚・上司なのかもしれません。デザイナーの中には見せるのを躊躇している方もいるのではないでしょうか。知恵とスキルを出し切って作り上げた子供のような存在なので、万が一批判されたのであれば自分自身も批判されているように感じるのではないでしょうか。IDEOの Time Brown 氏が TED の講演で「デザインはデザイナーだけに任せるには重要過ぎる」という言葉を残しているとおり、デザインを皆で考える機会を作るべきです。デザイナーは早い段階から他の誰かとアイデアを共有するべきですが、会話が批判的なものになりすぎているのであればデザイナーも積極的に参加もしてくれませんし、デザインを前提とした会話にはならないでしょう。 「この色は違う」「使いにくそうだ」「分かっていな
HTML5・CSS3対応のブラウザが増えてきて、制作のコンセプトも変化してきました。 プログレッシブエンハンスメントなどユーザーのブラウザ環境に焦点を置いた制作コンセプトをまとめました。 足りない知識を埋めながら書いたので一部認識が間違ってる箇所があるかも知れませんが、その場合はご指摘頂けると助かります。 Progressive Enhancement Graceful Degradation Polyfill Progressive Enhancement(プログレッシブエンハンスメント) どのブラウザでも基本的な水準のユーザーエクスペリエンスを提供をし、 新しく高水準のブラウザにはCSS3やjsなどでよりリッチなデザインや機能を提供するという考えです。 またProgressive Enhancementには下記の原則があります。 基本的な内容は、すべてのブラウザでアクセス可能である必要
先日、CSS Nite in Ginza, Vol.59「DreamweaverによるレスポンシブWebデザインの実装」に出席してきました。 とても勉強になったので復習も兼ねてレスポンシブwebデザインに関して、セミナーで学んだ内容に自分の調べた点を加えてまとめます。 (一部の図はセミナーの資料を元に作成してます。) 始めに:スマートフォンサイト制作の選択肢 スマートフォンサイトを制作するには幾つかの方法があります。 アプリ 独自系 スクラッチ(0からスマートフォンサイト用に構築) jQuely mobileを使用 流用系 現在のデザインをほぼ流用、調整のみ レスポンシブ・デザイン どの方法にもメリットデメリットはあり、どれが最適かは サイトのコンセプトや規模、予算など複合的に考えて選択する必要があります。 今回のエントリーではレスポンシブ・デザインのみにふれます。 レスポンシブwebデザ
レスポンシブwebデザインからグリッドデザインまでよく使われているwebデザインのレイアウト用語をまとめました。 レスポンシブwebデザイン エラスティックレイアウト リキッドレイアウト フレキシブルレイアウト 固定幅レイアウト グリッドレイアウト 可変グリッドレイアウト レスポンシブwebデザイン(Responsive Web Design) PCやスマートフォン、タブレット事に複数のデザインを制作するのではなく、 ディスプレイの幅に合わせてデザインを最適化する方法。 CSS3のMedia Queriesを利用してディスプレイサイズに応じてデザインを変更します。 メリット 一つのソースで複数デバイスに対応できるのでメンテナンスが容易です。 また今後デバイスの種類が増えてもそれに対応できます。 それぞれのデバイスに合わせた形で調整できるのでユーザーエクスペリエンスも高くなります。 デメリッ
IE 9が登場! ユーザーの閲覧環境がますます多様化! 4月26日、ついに日本でもInternet Explorer(以下、IE) 9が公開されました。また、マイクロソフトは早くもIE 10のプレビュー版を公開しており、CSS3やJavaScript周りが、さらに強化されるなどリッチなWeb表現が加速してきています。 IEのみならず、Firefox、Safari、Google Chrome(以下、Chrome)など他のWebブラウザもすさまじい勢いで進化してきており、スマートフォンやタブレットPCなどのデバイスも続々と開発され、ユーザーの閲覧環境がますます多様化してきています。 そうした流れの中で、必然的に欠かすことができなくなる知識が、この「プログレッシブ・エンハンスメント」という概念です。 プログレッシブ・エンハンスメントって何? Webブラウザや端末などの閲覧環境が多様化してきていま
エレメント同士を水平に配置したり、垂直に配置したり、またそれが対称だったり非対称だったりなど、ウェブデザインでヴィジュアルのバランスを実現する5つの方法とバランスに大きな影響を与える5つの要素を紹介します。 Developing Balance in Web Design [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに バランスの5つのタイプ バランスの5つのプロパティ はじめに もしあなたのウェブサイトのデザインがヴィジュアル的にバランスがとれていないなら、あなたのサイトは混乱に陥っているようにユーザーは感じるものです。そして、心地悪く感じさせるでしょう。 あなたのデザインは魅力的であり、ユーザーにリラックスして見回してもらえるようにするべきです。それを達成する最も良い方法はヴィジュアルのバランスです。 ヴィジュアルのバランスとは、デザインエレメントのバランスをとるだ
ナビゲーションはウェブサイトにとって重要なエレメントであり、基盤となるものです。素晴らしいナビゲーションは豊かなユーザエクスペリエンスを与えます。 ユーザーは使いにくくない困惑されないナビゲーションを望み、シンプルなナビゲーションはたいていの場合、ダイナミックなものよりユーザフレンドリーなものです。ここではダイナミックでクリエイティブなナビゲーションの素晴らしいインタラクションと若干の欠点をSmashing Magazineから紹介します。
去年から恒例イベントになっているWebSig 1日学校。古い学校の校舎を使って正に学校で学んでいるような気分で参加できるこのイベント。今年は「デザイン視点のコミュニケーション術」というタイトルで講師をさせていただきました。主催者からの依頼が非常に難易度が高く、扱うトピックからスライドの完成まで悩みながら作りましたが、そのプロセスで見えたところもたくさんあり、イベントも含めて学びと出会いがたくさんありました。 なぜ『作る』以外について語ったのか デザイナーの仕事はレイアウト、UI、ルック&フィールなどを作る人。コンセプトや潜在的にあるものを視覚化出来る人と捉える方が多いと思います。作り出すことがデザイナーの能力ではありますが、語られる部分が「作る」という部分に集約してしまいがちです。しかし、実際のところ「作る」部分というのはデザイナーの能力のほんの一部でしかなく、それ以外が重要だったりします
Spur [ad#ad-2] Spurの使い方 入力フォームにチェックしたウェブページのURLを入力して、「Spur it on」ボタンをクリックします。 画像でチェックしたい場合は、「Spur it on」ボタンの下にある「Upload an image」をクリックします。 クリックすると、ウェブページに7種類のエフェクトを与え、そのままでは気がつきにくい面からさまざまなポイントを確認することができます。 以下、その7種類のエフェクトを紹介します。 Grayscale グレースケールはデザインからカラーを取り除くことで、ユーザーの目がページのどこに引き寄せられるか確認するのに役立ちます。 見出しはブラックの背景にホワイトのテキストで高いコントラストを確認できます。 ロゴとナビゲーションはコンテンツサイトにドロップバックしています。 最新情報のコンテンツはグレースケールになると、コントラス
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く