ネガティブスペースを活用したり、二つのオブジェクトを合体させたり、そのクリエイティブさに感心してしまうロゴデザインをBored Pandaから紹介します。

「お世話になっております」、「了解しました」、「取り急ぎ、お礼まで」など、ビジネスメールでよく使用する言い回しの間違った使い方、正しい使い方など、ビジネスメールのワンランク上の作法を紹介します。 [ad#ad-2] 下記は、月刊誌「日経おとなのOFF 4月号 美しい日本語」で紹介されている「『美メール』の作法」から、特に気になった箇所をピックアップしてまとめたものです。 日経おとなの OFF 2011年 4月号（amazon） マナー以前のビジネスメールの常識 ワンランク上のビジネスメールの作法 シーン別のビジネスメールの作法 マナー以前のビジネスメールの常識 メールの件名は具体的に 内容が分かる具体的な件名にしましょう。 「こんにちは」「お願い」「なるはやで」は、ダメ。 返信メールの件名は変更しない 同じ議題であれば件名は変更せずに、「Re: 」を付加して返信しましょう。 議題を変更する

CSS3のテクニックはさまざまなものがありますが、その中からまさに今、そして次のプロジェクトに使用したくなるテクニックを紹介します。 The Bright (Near) Future of CSS [ad#ad-2] 下記は各ポイントをピックアップして意訳したものです。 はじめに Styling HTML5 Classing like HTML5 Media Queries Styling Occasional Children Styling Occasional Columns RGB Alpha Color HSL and HSL Alpha Color Shadowy Styles Multiple Backgrounds 2D Transforms はじめに ここでフォーカスするのは、今、そして近い将来に使用するであろうスタイリングのテクニックです。HTML5の要素のスタイリング

最近リリースされたものを中心に、デザイン、スタイルシート、ワイヤーフレーム、データベースなどに役立つオンラインサービス・ウェブアプリケーションを紹介します。

Deaxon's CSS playground [ad#ad-2] 下記に、CSS playgroundで掲載されているデモを紹介します。 これからもどんどん増えるといいなあ。 ※デモを楽しむには、Chromeでご覧ください。

最近リリースされた高品質なフリーのデザインフォントを紹介します。 Lintel Regular 個人・商用利用無料。 St Marie 個人・商用利用無料。 AW Conqueror Sans 個人・

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

ブログ用からEコマース用まで、極小サイズ、手書き風、折り紙風などシンプルでかわいいフリーのアイコンをIconDockから紹介します。 IconDock キャプチャのアイコンは「20 Free Marker-Style Icons」 IconDockで配布されているアイコンから、フリーのものだけを下記にピックアップしました。 有償のアイコンでは更に素敵なアイコンセットが用意されています。 Stock Icon（有償のアイコンページ）

なんとなくグラデーションを使用したり、困ったらグラデーションを使用したり、トレンドだからグラデーションを使用したりしていませんか？ グラデーションを使用しないでデザインする方法をBuild Internet!から紹介します。また、グラデーションをより効果的に必然として使用するためのエントリーでもあります。 多くのウェブデザインのブログで周期的にページデザインのPhotoshopのチュートリアルを紹介しています。これらは素晴らしいウェブページを作成するためにグラデーションベースのデザインが一般的であるというおかしな印象を与えてしまいました。こういった記事を書く我々は間違って解釈されてしまう記事を書いたという罪があります。 ウェブデザインはデザイントレンドがどれだけ含まれているかのチェックリストではありません。何を使用するにしても、何をやめて何をアレンジするか学ぶ必要があります。 WeFunc

グリッドベースのレイアウトを作成すると、ついついdiv要素を多用してしまいがちですが、意味のあるデータにはそれに適した要素を使用し、無駄なdiv要素やclassだらけのマークアップから卒業する方法をWebdesigner Depotから紹介します。 Fight Div-itis and Class-itis With the 960 Grid System 下記は各ポイントを意訳したものです。 はじめに CSSのフレームワーク：960.gsの場合 classの乱用を避ける リスト要素の使用 画像とキャプションの使用 複数の見出しとパラグラフの使用 子要素のclassは親要素に はじめに 数年前までウェブページの設計はテーブルがスタンダードでした。そしてCSSはそれを大きく変え、今日ではCSSのフレームワークがウェブページの設計を容易にしてくれています。 しかしながら、このCSSのフレームワ

スタイルシートは、複数の人間が携わる場合は当然のことながら、自分一人の場合でも長期にわたり携わることがあるので、分かりやすくクリーンなものにしておきたいものです。 スタイルシートを適切に使用し、そして管理しやすくする5つのポイントをSoh Tanakaから紹介します。 CSS Beginners Do's and Dont's Part 2 下記は各ポイントを意訳したものです。 1. classとidは適切に使用する ビギナーは新しいclassをどんどん作成してしまう傾向があります。冗長なものや不必要なclassやidはCSS本来の目的からはずれるものです。 CSSの美しさはデザインをマークアップから切り離すことにあり、それを許すということです。またclassやidを最小限にすることで負荷を減らすことにも繋がります。 Bad p要素それぞれに全て個別のclassを使用しています。 <tex

Simple Horizontal CSS Drop-Down Menu Demo シンプルなドロップダウン。 対応ブラウザはIE5.x+, Fx1.5+, Op7+, Safari2+, Chromeとなっており、IE6以下用のみJavaScriptを使用して動作させています。 ライセンスはGPLとのことです。

今運営しているブログをより魅力的したい、これからブログをつくる、という人向けにブログに必要な8つのデザインエレメントをSmashing Shareから紹介します。 8 Design Elements Your Blog Should Have はじめに 1. RSS/E-mail購読 2. 独自性のあるヘッダ 3. 分かりやすいナビゲーション 4. コメント 5. ソーシャルメディアのアイコン 6. グラフィックのガイドライン 7. スポンサーのスペース 8. リッチなフッタ はじめに ブログのユーザーを幸せにし、あなたのコンテンツに関心を抱くようにしておくために必要な特定のデザインエレメントがあります。 ユーザーは記事を簡単に読め、素早くコメントができ、TwitterやFacebookのアカウントでシェアできることを期待しています。 ブログのデザインはクリーンで、整合性のあるレイアウトを

フリーフォントはたくさんありますが、その中から厳選に厳選を重ねたハイクオリティなフリーのフォントをslodiveから紹介します。 Top 30 Free But Very Professional Fonts For Everyday Use In 2010 上記の元サイトより、いくつか紹介します。 ※各フォントごとにライセンスは異なります。

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

繊細なテクスチャ、透明感のあるパネル、充実したフッタ、光源を模したグラデーション、1ピクラインにこだわったディテールなど最近のウェブデザインのトレンドを取り入れた、ウェブサイトのレイアウトを作成するPhotoshopのチュートリアルを紹介します。

ユーザーの行動への呼びかけを促す「ダウンロード」や「サインアップ」などのボタンをデザインする際に気をつけたい5つのポイントをLee Munroeから紹介します。 Web Design Trends: Call To Action Buttons 先日とりあげた「ハイパーテキストリンクのスタイル大全」の5. ボタンスタイルで紹介されているものです。 以下は、各ポイントを意訳したものです。 はじめに サインアップやダウンロードなど、ユーザーの行動への呼びかけを促すボタンのデザインはウェブデザインにおいて重要なものです。 ボタンはそのページのゴールの一つであり、その目的のためにそれぞれのページをデザインするといっても過言ではありません。 行動を呼びかけるボタン（Call to Action Button）はユーザーの注意を引く必要があります。以下に、そのボタンのデザインの5つの特長をあげます。

写真の主題を引き立たせるために使用される「ボケ」をウェブデザインにとりいれるためのスタディをPSDFanから紹介します。 Inspirational Examples of the Bokeh Effect 以下、各ポイントを意訳したものです。 ボケとは ボケの実例 デジタルアートでのボケ ウェブデザインでのボケ ボケのチュートリアル ボケとは ボケとは、写真撮影の際にレンズを利用して光の焦点をぼかしたものです。このボケは、レンズによってもさまざまなものを楽しむことができます。 通常、ボケは主題を引き立たせるために使用されるもので、主題以外のものをぼんやりとさせます。 ボケの実例 写真撮影でのボケを実際に見てみます。