ウェブデザインで大切な空白スペースの効果的な5つの使い方
空白スペース（ホワイトスペース）が、ウェブサイトのユーザエクスペリエンスに与える5つの重要な効果を紹介します。 5 Ways How Whitespace Affects The User Experience 下記は各ポイントを意訳したものです。 はじめに：空白スペースの基礎知識 1. 空白スペースがデザインに使いやすさを加える 2. 空白スペースがコンテンツに読みやすさを加える 3. 空白スペースがビジターに休憩を与える 4. 空白スペースがデザインをモダンに見せる 5. 空白スペースがあなたのデザインに感動を与える はじめに：空白スペースの基礎知識 空白スペース（ホワイトスペース）は、ウェブデザインにおいて非常に人気の高いデザイン要素です。この空白スペースは元々は印刷デザインからのもので、「テキストとグラフィックの欠如」を現します。と同時に空白スペースは「空きスペース」以上の役割を果
Webサイトの作り方のまとめ！ブラウザチェック。
サンプルサイト制作を通して「Webサイト制作」についてまとめてます。 前回の記事で、トップページのコーディングがひと通り完了したので、下層ページのコーディングに移る前に、一旦ブラウザチェックしてみようと思います:)。 以下は目次です。クリックすると各項目へ移動します。 対象ブラウザ。 ブラウザの種類 ブラウザのバージョン ブラウザの進化 チェックすべきブラウザ ブラウザチェック。 ブラウザチェックツール BrowserStackを使ったブラウザチェック VMware＋IETesterでブラウザチェック Internet Explorerでバージョン別チェック チェック結果 表示の崩れを整える。 IE8での表示を整える IE7での表示を整える IE6での表示を整える モダンブラウザと同じくらいまで整える。 transitionの動きをjsで実装する IE8以下でも:last-childとか使
なぜ日本のWebデザインはダサいのか？ | Goodpatch Blog
こんにちは！ みなさんQuoraというサイトをご存知ですか？QuoraはFacebookの元CTO（最高技術責任者）が立ち上げたQ&Aサイトです。実名+肩書きの登録が必要なので、他のQ&Aサイトより回答者のクオリティが高い事が特徴のようです。（日本だとYahoo知恵袋が似ているWebサービス） 今回Quoraで日本のWebデザインについての興味深い質問を見つけたので、その質問と回答のいくつかを記事にしてみました。（記事ネタQuestion :Why is web design so bad for Japanese websites?） 【Question】 これまで日本のWebサイトは一般的にきれいなものだと思っていたが、実際は違った。アメリカのWebサイトより5年から10年の遅れを取っているように思えます。多くのWebサイトにFlashが使われているし、アメリカのものよりごちゃごちゃし
ここがヘンだよRWD（レスポンシブWebデザイン） / Maka-Veli .com
定義がいまだ曖昧 何を指して「レスポンシブ」なのかと。 モバイルファーストという考え方は素晴らしいです。レスポンシブとするならば、やはり制限のあるスマホでの閲覧は考えるべきで、そこにどうアプローチできるかは優先的に考慮しなければ、そもそもRWDを取り入れる必要性は無いわけですから。 いや、スマホでのアクセス見込みは切り捨てで、おまけ程度で見せたいからRWD採用って手も無くは無いか・・・ 極端な話、こういったサイト、プロジェクトならばPC閲覧時のデザイン、装飾は極限までにそぎ落とし、スマホ閲覧時にどれだけ快適にできるか、つまりPCサイト（PC表示時）はシンプルで良いんじゃないかなと思います。（この時のポイントは企画段階時のRWD導入の見極めかなと思います） しかし、PC閲覧の最適化が後回しになり、最終的にPC閲覧時、特にまだまだ使用率の高い解像度1024、1280（共に横）などでの閲
【レスポンシブデザイン】お役立ちサイトのチャンプルまとめ。 | バシャログ。
あ、sass3.2来てら。hakoishiです。 横目に見つつ、本日はレスポンシブまとめ。 構想の参考にしたい事例から、実制作で役立つ技術記事までチャンプルです。 ギャラリー 21 Inspiring Unique Responsive Web Design Examples 海外のレスポンシブ事例集。 Responsive Web Design JP | 日本国内の秀逸なレスポンシブWebデザインを集めたアーカイブサイト タイトルの通り、国内のレスポンシブ事例集。 スマホ、タブレット、PCのプレビューが表示されていてザッピングにも便利。 Responsive Layouts, Responsively Wireframed 汎用的なワイヤー例。右上のナビでPC、モバイル表示を切り替えてみましょう。 直感的で解りやすいので、お客様への説明にも使えるのではないでしょうか。 あと、このサイト自
Wireframing, Prototyping, Mockuping - What’s the Difference? - Designmodo
Wireframing, Prototyping, Mockuping – What’s the Difference? Wireframing, Prototyping, Mockuping – What’s the Difference? UX DesignMarcin Treder • September 08, 2016 • 6 minutes READ A couple of years ago I realised that a lot of my IT, non-designer, friends were using the names of my beloved design deliverables synonymously. They assumed that a wireframe, prototype and mockup are exactly the same
PhotoShop&FireworksでWebデザインする為に必要な情報をまとめてみた
PhotoShopでWebデザイン PhotoShopVIP PhotoShopだけでなく、他のソフト共通で使える素材やネタも多い。 これからPhotoshopでWebデザインをしたい初心者さんのためのツールパネルとかいろいろ PhotoshopをつかってWebデザインする視点で使う機能解説なので、知ってることも多いけど、ここはまず抑えておいたほうがいい！ Webデザインの1pxを作るためのPhotoshopのレイヤースタイルいろいろ この辺りの設定数値は覚えておこう！他のソフトでも応用できます。 PhotoshopでWebサイトのモックアップをつくるチュートリアル 海外のチュートリアルの日本語訳での解説、グリッドシステムの勉強にもなる。 日本語で読めるPhotoshopチュートリアル集 まとめ まずは、日本語でのチュートリアル！どんな使い方をしているのかを知るのが大事！ photos
25 Beautiful Examples of Illustration in Web Design
Examples of Illustration in Web Design can be found all over inspiration galleries and the trend towards colorfully illustrated websites has only grown with the widespread adoption of modern approaches that allow for richer images and faster-loading graphics. These illustrated […] Examples of Illustration in Web Design can be found all over inspiration galleries and the trend towards colorfully il
2011年のウェブデザインのトレンドを振り返る
2011年のウェブ制作の話題の中心はHTML5とCSS3でしょう。 ここではデザイン面を中心に、2011年に人気が高かったウェブデザインのトレンドを紹介します。 Popular Web Design Trends in 2011: Over 50 Inspiring Examples [ad#ad-2] 下記は各ポイントを意訳したものです。 Responsive Web Design 点線 サークル レトロスタイル リボン マジックナンバー『3』 少しめくれてるペーパー ボーダーレス グリッド 対角線 Responsive Web Design Responsive Web Designとは、ユーザーが利用する環境（スクリーンサイズなど）に合わせて最適なレイアウトを提供する方法です。デスクトップ用のブラウザだけでなく、iPhoneなどのスマートフォン、iPadなど、あらゆるデバイスに最適な
[CSS]スマートフォンからデスクトップまで、Responsive Web Design用のCSSのフレームワーク -MQFramework
Demo: Fluid: 768pxで表示 [ad#ad-2] MQFrameworkの特徴 スクリーンサイズ 5つの異なるスクリーンサイズに対応。 320px, 480px, 768px, 960px, 1140px グリッド グリッドは12カラムをベースにし、さまざまなレイアウトに対応。 タイポグラフィ @font-faceを使ったタイポグラフィ。 使い方が簡単 スマートフォンからデスクトップまで対応したResponsive Web Designのサイトを簡単に構築。 カスタマイズ カスタマイズも容易。 カスタマイズ用のスタイルシートファイルもあります。 MQFrameworkの使い方 必要なファイルを一式ダウンロードし、使用するページに外部ファイルとしてスタイルシートを指定します。 <link rel="stylesheet" href="css/master.css" type="
Web制作者は知っておきたいwebサイトのレイアウト7選 │ Design Spice
レスポンシブwebデザインからグリッドデザインまでよく使われているwebデザインのレイアウト用語をまとめました。 レスポンシブwebデザイン エラスティックレイアウト リキッドレイアウト フレキシブルレイアウト 固定幅レイアウト グリッドレイアウト 可変グリッドレイアウト レスポンシブwebデザイン(Responsive Web Design) PCやスマートフォン、タブレット事に複数のデザインを制作するのではなく、 ディスプレイの幅に合わせてデザインを最適化する方法。 CSS3のMedia Queriesを利用してディスプレイサイズに応じてデザインを変更します。 メリット 一つのソースで複数デバイスに対応できるのでメンテナンスが容易です。 また今後デバイスの種類が増えてもそれに対応できます。 それぞれのデバイスに合わせた形で調整できるのでユーザーエクスペリエンスも高くなります。 デメリッ
Webデザインにある駆け引きとコダワリ
Webは人とデータに開放された世界 電子書籍の登場で、再び DTP デザインと Web デザインが比較されることが増えてきた印象があります。もちろん以前から「DTP デザインの呪縛」のようなものが Web デザインの世界で長く受け継がれています。随分 Web に最適な手法が盛り込まれているものの Dreamweaver のような老舗アプリは「DTPデザイナーでも Web サイトが作れる」というコンセプトが今も残っています。Webデザイナーは表現の仕方の違いからフラストレーションをためている方もいると思いますし、発注者側も DTP と Web の違いを伝えてもらっていないことからコミュニケーションに困っている場合もあると思います。 紙には物理的な境界線があることから情報量に限界がありますが、完全に隔離された世界を作ることができます。その世界は紙という媒体によって完全に守られていて、デザイナー
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
海外のウェブサイトから学ぶ、ディテールにこだわったデザインのテクニックのまとめ
WDS
新着記事