今年もCSSの進化が止まりません。 これからのプロジェクトに使ってみたくなるような素敵なアイデア満載のクリエイティブなスタイルシートのテクニックを紹介します。 利用する時にネックになるのがIEですが、来年になるとXPのサポートが終了、そういえばGmailなどのGoogle AppsでのIE9のサポートも終了しました（参考：サポートされているブラウザ -Google）。来年はより多くのテクニックが利用できるようになりそうですね。 というわけで、まずは今年もクリエイティブなCSSをたくさん生み出したCodropsからご紹介。

コーポレートカラーなど、一つのカラーをベースに配色セオリーからカラースキームを設計したり、同系色やグラデーションを作りだしたりできるオンラインツールを紹介します。 またカラーのストックを増やしたり、カラーをベースにしたムードボード作りに役立つツールもいくつか。 最初は、国産のツールから。 配色の見本帳 | キーカラーで選ぶ配色パターン 一つのカラーをベースに、さまざまな色の法則から配色パターンを表示します。 上は緑みの青（#0099CE）をベースにしたもの。キャプチャの他に、彩度や明度による配色、色相環による配色など、さまざまな配色を表示します。説明付きなのも嬉しいポイントです。

ウェブサイトに使用されるナビゲーションはこの一年の間に、大きく変わりました。スクリプトやスタイルシートを使い派手なアニメーションやインタラクションを取り入れることもできますが、最近のトレンドはよりシンプルで、すっきりしたデザインが好まれています。 最近のナビゲーションのトレンドを紹介します。 Up and Coming Navigation Trends 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。最近海外のブロガーから他ブログでの無断翻訳・転載の声を聞きます。 ナビゲーションの欠如 スクロールベースのナビゲーション ミニマルなナビゲーション サイドのナビゲーション サークル状のナビゲーション 終わりに ナビゲーションの欠如 最初にあげるナビゲーションのトレンドは、ナビゲーションの欠如です。これは二つの条件が揃えば機能します、一つは

ビジネスサイトでも個人ブログでも無料で利用できる、ソリッドとベタ塗りの2種類が揃った高品質のアイコン素材を紹介します。 アイコンのアイテムは128種類、それぞれにソリッドとベタ塗りが揃っています。 ダウンロードできるアイコンのフォーマットは3種類、それぞれ30px, 60px用が用意されています。 .ai .eps .psd .psdはシェイプで作成されているので、サイズやカラーの変更も簡単です。 .psdをPhotoshopで開いたキャプチャ アイコンの利用にあたっては個人でも商用でも無料、とのことです。 詳しくはダウンロードファイルの「license-README-FIRST.txt」をご覧ください。 アイコンは全部で4パック。 ご利用の際は、各ページよりダウンロードしてください。

プレゼンテーションや企画書などに使える、PowerPointやKeynoteのテンプレートがダウンロードできるサイトを紹介します。 プレゼンの参考になるコレクションサイトをはじめ、無料や有料の高品質なテンプレートやグラフ・チャートや背景がたくさん揃っています。無料のは多くがページ数が少ないですが、有料のは少額でもページ数が揃っているものが多いです。

先日、日本語版がローンチしたPinterestから、ウェブのレイアウトやUI/UXデザインの参考になるボードを紹介します。 日本語版を利用するのは簡単です。 Pinterestにログインして、idをクリックしアカウント設定を選択します。

等間隔に水平・垂直にガイドを設定したい、よく使うブラシのサイズを登録しておきたい、方眼紙やカンバスで新規ドキュメントを作成したい、鉛筆やボールペン・マーカー・水彩・エアブラシなどすぐに使いたい、ノイズやブラーやグロウなどをブラシ感覚で使いたいなど、さまざまな機能が備わったPhotoshop CS5, CS5.5, CS6対応の機能拡張を紹介します。 NKS5 -Natural Media Toolkit NKS5はナチュラルなエフェクトを便利に使えるようコンパクトにまとめたツールで、小さいツールパレットにさまざまな機能が備わっています。 下記は、Photoshop上のNKS5のツールパレットと簡単な説明です。

ピクセルベースでデザインされた、かわいい柄やノート地、ドット、ヘキサゴン、波線などのパターン素材を紹介します。 最後には雪やツリー、プレゼントなどのかわいいクリスマス柄のパターン素材も！

いくらデザインが素晴らしくても、コンテンツのコピーテキストが貧弱だと魅力的に見えません。良いコピーは分かりやすく、そして効果的にその魅力を伝えます。 Google, GitHub, Pinterest, Flickr, Etsy, Facebookなど、成功しているウェブサイトやアプリケーションで使用されている名コピーをコレクションしているサイトを紹介します。 僕はサイトを作る時に一番時間がかかるというか、力を入れるのが、各コンテンツのコピーを考える時ですね。ウェブ用に作ったコピーが他メディアに展開したら、嬉しい限りです。 Content Snippets Content Snippetsでは各コピーテキストが9つのカテゴリに分けられ、登録されています。 Advertising プロダクトやサービスを購入するように促すテキスト Empty States 検索結果や買い物カゴなど、初期状態で

角丸や三角形、アイコンなどを添えたり、CSS3アニメーションを加えたりなど、CSSで実装するパンくずを紹介します。 機能的にはもちろんシンプルなテキストベースのものと同じですが、サイトのUIにあったデザインのパンくずも素敵ですよね。

最近リリースされたものを中心に、高品質なフリーのデザインフォント・タイプフェイスを紹介します。 まずは、エレガントで美しいフリーフォントから。

ピンクのカラーとマカロンが大好きな仏のデザイナー：Marie Dehayesが作成した、キュートなカラースキームでかわいくデザインされたUIエレメントが揃っているPSD素材を紹介します。 Freebie - Flat Design User Interface Elements ダウンロードできる素材のフォーマットはプレビュー用の.pngとレイヤーが保持された.psdで、.psdでは各エレメントがベクターで作成されています。

最近リリースされたものを中心に、高品質なフリーのデザインフォント・タイプフェイスを紹介します。 まずはiPhoneを暗闇で動かして光の軌跡で描いたフォントから、最後にはかわいいマトリョーシカのフォントもありますよ。

草・木をはじめ、ざらっとした紙、デニム地、布地、皮、ライトとダークな繊細な柄など、シームレスなパターン素材をWeb Designer Labから紹介します。 素材は全て個人でも商用でも無料、リンクなども必要なしで、もちろんリンクしてくれる分には大いにありがたい、とのことです。

個人や商用で無料で利用できる日本語のフリーフォントを紹介します。年賀状の宛名にも使える縦書き対応のフォント、かわいい手書きフォント、読みやすいゴシックなどが揃っています。 ※フォントを利用の際には必ずライセンスをご確認ください。 最新版を公開！フォントの数が大幅に増えています。 2019年用、日本語のフリーフォント 366種類のまとめ

無料で利用できる、テーマ別やカラー別にマッチした色を組み合わたカラーパレットやカラーコンビネーションをCreative Color Schemesから紹介します。 まずは、テーマ別から。

商用サイトでも無料で利用できる日本語のフリーフォントを紹介します。 ※フォントは全て商用利用も無料ですが、利用の際には必ずライセンスをご確認ください。 最新版を公開！フォントの数が大幅に増えています。 2019年用、日本語のフリーフォント 366種類のまとめ

ディテールの強化やテクスチャの作成に便利な、ドットやラインのピクセルベースのPhotoshopのパターン素材を紹介します。

当サイトで未紹介のものを含めた2010年の総まとめ、商用でも無料で利用できる日本語・英語の高品質なフリーフォントを紹介します。 ※フォントを利用する際には、ラインセンスを必ずご確認ください。 最新版を公開！フォントの数が大幅に増えています。 2019年用、日本語のフリーフォント 366種類のまとめ