iPhoneなどの小さいサイズのモニターをはじめ、2560pxの大きいサイズのモニターなど、それぞれの幅に適したレイアウトを自動的に適用するMedia Queriesをしっかりと身につけるためのスタイルシートのチュートリアルを紹介します。 Adaptive & Mobile Design with CSS3 Media Queries [ad#ad-2] 下記は各ポイントを意訳したものです。 デモページの確認 HTML CSS Media Queries 完成したデモの確認 デモページの確認 チュートリアルの前にまず、それがどのように見えるかデモページをチェックしてみてください。 このデモページはHTML5+CSS3 Media Queriesで作成されており、ユーザーが使用しているビューポートのサイズに適したレイアウトに自動調整して表示されます。 デモページ 左から、ノーマル、ナロウ、ス

ネガティブスペースとはホワイトスペース（空白）としてもよく知られており、コンテンツに占拠されていないエリアのことで、特定のアイテム間のスペースであるとも定義できます。 そんなネガティブスペースを巧みに使用したロゴデザインを紹介します。

ナビゲーション、ボタンなどのエレメントをはじめ、ページレイアウト、アイコンなど、商用でも無料で利用できるウェブデザイン用のPSD素材を配布しているサイトを紹介します。

SEO担当者はもとより、デザイナー、コンテンツライターのための、サイトのユーザーエクスペリエンスも強化するSEOのテクニックを紹介します。 User-Friendly SEO [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに 1. 見出しの最初にプライマリキーワードを 2. キーワードのために太字のテキストを 3. リストの活用 4. 重要なリンクにはキーワードを 5. タイトルの始めにプライマリキーワードを 6. 内部リンクの強化 7. イメージの最適化 多くのキーワードが必要ですか？ デザイナーとSEO担当者とライターのチームワーク はじめに 若干のデザイナーが、そして多くのコンテンツライターが、ウェブの効果的な戦略においてSEOを必要悪だと見なします。 しかしながら、SEOを適切に行えば、それは減るよりむしろ、ユーザーエクスペリエンスの強化をはかることができます。こ

10 Great Tips to Boost Creativity [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに ウェブサイトをデザインするとき、ワンパターンに陥ってしまうことは簡単です。デザイナーは自分が何が得意であるか知っており、それを強みにして常用してしまう傾向があります。しかしながら、通常とは異なる視点をとることで、創造的なアプローチを新しい限界へとおし上げることができます。 創造力をアップさせることはウェブデザインの現在のトレンドを学び、何がそれを成功させたかを理解し、そしてあなた自身のユニークなスタイルを使ってそれらのテクニックを実行することから始めます。 あなたの創造力をあふれ出るようにするために、ここに考慮に入れるべき10のヒントがあります。 1. カラーを考えてみる サイトをゼロから作成する時や修正する時、コンセプトを強くするためにカラーの知識を深め

角丸、ドロップシャドウ、グラデーションなど多彩で面白いスタイルをCSS3では簡単な記述で実装できます。 CSS3でいったい何ができるのか、どのように記述するのかなど、ベーシックなものから実践的なテクニックまでサンプルやコードなど実装例が掲載されているサイトを紹介します。

黄金比、フィボナッチ数列、ファイブエレメンツ、サインウェーブなど数学的な要素を巧みにウェブデザインに取り入れる方法をSmashing Magazineから紹介します。 Applying Mathematics To Web Design 下記は各ポイントを意訳したものです。 また、当サイトでも黄金比をウェブデザインに取り入れる簡単な方法を紹介していますので、あわせてどうぞ。 黄金比をサイトのデザインに取り入れる簡単な３つの方法 はじめに 1. 黄金比（黄金四角形） 2. フィボナッチ数列 3. ファイブエレメンツ 4. サインウェーブ [ad#ad-2] はじめに 「数学は美です。」 数字嫌いの人には、ばかばかしく聞こえるかもしれません。けれども、自然や宇宙にある美しいもの、最も小さい貝殻から最も大きい銀河まで、数学的な要素を持っています。 数学ははるか昔から今日まで芸術や建築のデザインに

総務省によると世界の国の数は193（2010年1月1日現在）とのことですが、全部で240種類の国旗のアイコン素材を紹介します。 2400 Flag Icon Set [ad#ad-2] ダウンロードできるアイコンのフォーマットはPNGで、サイズは16, 24, 32, 48, 64の五種類、それぞれ立体感のあるものとフラットなものが揃っています。 アイコンのサイズは五種類 国旗アイコンのファイル名は、国名とカントリーコードの二種類があります。 アイコンの利用にあたっては個人でも商用でも無料で利用が可能です。 商用の場合は特に寄付を受け付けています、とのことです。また、足らない国旗があれば随時追加するので連絡をください、とのことです。

ウェブデザインで使用しているパンくずのデザイン集とパンくずの由来や概要、特長をはじめ、設置の判断基準、実装のよくある間違い、デザインのポイントを紹介します。

ウェブデザインをはじめ、印刷にも役立つ基本的だけど大切なタイポグラフィのルールをfred designから紹介します。 Simple rules for good typography もしくは、Typophile 下記は、その意訳です。 はじめに ここにウェブや印刷のためのタイポグラフィに役立つ基本的なルールがあります。もちろん、このルールは基本であり、そしてルールは破られることを意図されているものです。 しかしながら、もしあなたが一般的にきちんとしていて美しくみえる何かを制作するためには良いルールです。 1. たくさんのフォントを使わない ウェブサイトなどのドキュメントに一貫性は非常に重要な要素です。一貫性は統一と一つのアイデンティティーをもたらします。 この一貫性を守るためには、一つのドキュメントに対して3つ以上の異なるフォントを使用しないことです。 2. ヒエラルキー ページ内の階

<textarea name="code" class="css" cols="60" rows="5"> textarea { background: url(images/benice.png) center center no-repeat; /* This ruins default border */ border: 1px solid #888; } </textarea>

6 Things To Include for a User Friendly Footer 以下、その意訳です。 ウェブサイトのフッタは、ユーザーが情報を得るための有用かつ大切なコンテンツとなり得ます。 フッタに情報を配置するということは、ウェブサイトに関する重要な情報を見つけるきっかけを与え、素晴らしいナビゲーションにもなり、ユーザーに与える第一印象にも影響します。 下記に挙げる6つの要素をあなたのサイトのフッタに配置すべきか検討してください。 1. About Us Link 「About Us」のリンク あなたやあなたの会社についての基本的なインフォメーションへのリンクを設置します。 ユーザーがあなたのサイトを確かめる手段の一つになります。 2. Contact US Link 「問い合わせ」のリンク サイトの所有者あるいは担当者に連絡を取る手段を提示します。 サイト上のタイプミス

サイトマップを独立したページとしてではなく、フッタに配置する際のポイントとその効果をWeb Designer Wallから紹介します。 Modern Sitemap and Footer 下記は、その意訳です。 昔はほとんどすべてのウェブサイトで、コンテンツをリストアップしたサイトマップを独立したページとして設置していました。 サイトマップの重要な目的は、ユーザーや検索エンジン（スパイダー）がサイト内の情報を探し出すのに役立つことです。 現在は、多くのモダンなウェブサイトでサイトマップページを設置していません。代わりに、サイトマップをフッタに配置しています。 サイトマップをフッタに設置する効果 クリック数やページビューの増加 ユーザーはページを隅々までじっくり見るわけでなく、スクロールしながらざっと見ることがほとんどです。 そして、多くのユーザーがスクロールして最後に見る場所は、フッタです

20 Vital Techniques & Best Practices For Effective Web Design 下記、各エッセンスの簡単な説明とワンポイントとサイトの紹介です。noupeのサイトでは他にも多くのサイトが紹介されています。 1. ビビッド カラー 2. グラデーションとライトのエフェクト 3. 透過 4. グランジ 5. 手書き風のデザイン 6. 押さえた色味 7. 水彩画のエフェクト 8. ネイチャー系のエレメント 9. 写実的でリアルな背景 10. 特大のタイポグラフィ 11. デコラティブなタイポグラフィ 12. 大胆な背景 13. レトロやヴィンテージのエレメント 14. アイキャッチなヘッダ 15. コラージュしたエレメント 16. テクスチャを使った背景 17. タブ型のナビゲーション 18. ブラックとホワイト 19. 水平方向のスクロール 20.

CSS3やHTML5などをはじめ、トレンドのフォント、見出しのデザイン、クオリティをアップする背景など2010年に押さえておきたいウェブデザインのトレンドをWeb Designer Wallから紹介します。 Design Trends (Predictions) in 2010 下記は、各ポイントを意訳したものです。 元記事では、サンプルも豊富に掲載されています。 はじめに 1. セリフフォント 2. 大きい見出し 3. 埋め込みフォント 4. 繊細なテクスチャ 5. ミニマリストとグリッド 6. CSS3 7. モバイル対応 はじめに 2010年はウェブデザインが今まで以上に刺激的で試行錯誤に満ちたものになるかもしれません。 HTML5、そしてCSS3の魅力的な新機能をデザイナーとデベロッパーが巧みに取り入れようとしています。 去年からのトレンドだと、現在は手描き風や大きい背景は少なくな

Appleの美しいウェブサイトから学ぶ実用的な15のデザインヒントをDesign Shackから紹介します。 15 Design Tips to Learn From Apple 下記は各ポイントを意訳したものです。 サイトのキャプチャは可能なものは日本サイトのものにしています。 はじめに Apple社は高級なデザインと類語です。Appleが発信する偉大なデザインを観察することから、学べることはたくさんあります。 ここにあげた15のポイントはあなた自身の仕事に活用されることを意図したものです。この素晴らしいサイトデザインをあなたのインスピレーションとして使用してください。 1. Keep it Simple アップル Appleのウェブサイトを一目見てください。そして、あなたの目に見えるものではなく、見えないものについて注目してみてください。 例えば、空港でトイレを探していると想像してくだ

さまざまなサイトに利用できるよう、アイコンのサイズやカラーが豊富に揃った無料のアイコンをSome Random Dudeから紹介します。 Iconic Icon Set – 84 icons in raster and vector format アイコンは全部で84種類あり、PNGとSVGフォーマットでダウンロードできます。 PNGのサイズは8x8, 12x12, 16x16, 24x24, 32x32が用意されており、他のサイズが必要な場合はSVGから適宜サイズを変更することができます。 また、カラーもあらかじめ13色が用意されています。