CSS3 が主要ブラウザに対応したことから、これまではむずかしかったアイデアやコンセプトも、手軽にスタイリングできるようになってきています。今回は、背景デザインにスパイスを加えるエフェクト用コードスニペットを、コード共有サイト CodePen からピックアップしまとめています。 コピペで利用できる手軽なものから、これってどう表現するんだろうという面白スタリングまで、注目をあつめるテクニックを中心に揃えています。デザイン制作に悩んだときに活用してみてはいかがでしょう。 詳細は以下から。 背景デザインを楽しくする、参考にしたい HTML/CSS スニペットまとめ ※　デモが動かないときは、「RETURN」ボタンをクリックすることで、再読み込みされます。 ※　ページの読み込みに多少時間がかかります、すこし待ってからスクロールするとスムーズに表示されます。 Pure CSS Cinema Effe

ウェブサイトをもっと簡単に作成したいというときは、HTMLやCSS、JavaScript、画像などをセットにしたHTMLテンプレート素材を活用してみましょう。あらかじめデザインや機能が実装されているので、テキストエディタで文字を編集するだけで、魅力的なサイトデザインに仕上げることができます。 今回は、デザイン性だけでなく使いやすい、無料ダウンロードできるHTMLテンプレートをまとめています。素材はどれもあらゆる画面サイズに対応できるレスポンシブWebデザインという点もポイントです。 詳細は以下から。 無料で使える！レスポンシブWebデザイン対応のHTMLテンプレート素材まとめ Synthetia 余白たっぷりのコンテンツ用レイアウトに、洗練されたアニメーションエフェクト、落ち着きのある配色カラーパレットなど、すぐにウェブページを作成したいときに。 デモページ ダウンロード Apollo 写

毎月新しく公開された無料ダウンロードできるフリーフォント素材をまとめています。今回は、あっという間に一年の半分が過ぎた6月分まとめをご紹介します。 豊富なウエイト数を用意し、どんなデザインにも活用できる持っておくと便利なアイテムから、デザイントレンドのブラシフォントや人気の筆記体、スクリプト書体、ハンドメイド感たっぷりな手書きスタイルなど、幅広いセレクションから選んでいます。デザインに応じて使いたいフリーフォントを探してみてはいかがでしょう。 詳細は以下から。 こんなフォントが欲しかった、デザイナーにオススメの良質フリーフォントまとめ 2016年6月度 Andis くっきりとした読みやすさを重視した、シンプルでミニマルなサンセリフ書体。Light バージョンを無料ダウンロードできます。 ※　個人、商用利用可能 Tofino スクリーン表示にこだわり、太さの異なる8ウエイトを用意した万能フリ

写真を魅力的に加工することもできるPhotoshopですが、大量にある機能からうまく仕上げるのには時間とコツが必要です。もし、大量の写真を加工する場合はどうでしょう。アクション素材を利用すれば、繰り返し行う作業を大幅に短縮してくれます。 アクション素材は、再生ボタンひとつクリックするだけで、あらかじめ登録しておいた一連の作業を自動で行ってくれ、効率的にデザインを進めることができます。今回は、サイト制作に活用したい時短アクションから、プロ級の写真処理を行うことができるフリー素材をまとめてご紹介します。 詳細は以下から。 ワンクリックで写真処理を完成！優良Photoshopアクションまとめ アクション素材がどの写真加工にも適しているわけではありません。風景画やポートレイト写真の得意なアクションや、よりグラフィックを強調した素材などさまざまです。目的に合ったアイテムを探してみましょう。 アクショ

世界中のクリエイティブなデザイナーが集まり、デジタルデザインの販売などを行っているコミュニティサイト Creative Market では、毎週6つのアイテムを、1週間のあいだだけ無料ダウンロードできるサービス Free Goods of the Week を行っています。 公開されている素材は、フォントやテクスチャ、パターン素材からIllustrator用ベクター素材、アイコン素材などトレンドのアイテム中心に幅広いセレクションが特長にもなっています。今週の無料アイテムがどれも素敵だったので、まとめてご紹介します。 詳細は以下から。 1週間のあいだだけ無料ダウンロードできる、CreativeMarketのフリー素材まとめ Boldie Pictogram Collection アウトラインで描かれたシンプルで分かりやすいピクトグラムアイコンで、合計450種類のアイテムが収録されています。I

海外デザインブログ Medium で公開された「Desining in Color」の著者より許可をもらい、日本語抄訳しています。 配色は、デザイナーにとって強力なツールです。注目を集めたり、感情をゆさぶったり、メッセージを伝えることもできます。配色がどれほど重要なのか分かりやすく伝えるために、よく引用されるThe Impact of Color on Marketing では、いくつかの商品において、90%以上のユーザーが配色によって購入を決めているということも、研究によって分かってきています。 効果的に配色を活用することが、デザインにおいて重要になりますが、新しい色の組み合わせを考えるのも大変です。それぞれの色には意味があり、組み合わせは無限と言えるでしょう。 この記事は、デザインに合った配色カラーパレットのつくり方の紹介ガイドです。より多くの色をつかって、直感的に素敵な色の組み合わせ

日本中の書体デザイナーさんの努力によって、素敵な日本語フリーフォントが数多く公開されるようになったいま、複数の書体をインストールしているひとも多いでしょう。しかしデザインのとき、いつも同じ書体ばかり使ってしまう、という人もいませんか？ 公開されているフォントの数が増えたことで、どれも利用してよいか悩んでしまうこともしばしば。特に、デザインコンセプトにあった、商用利用にも対応できる素材を探すのは、時間のかかる作業のひとつかもしれません。 今回は、無料ダウンロード可能で、商用ライセンスにも対応した日本語フリーフォントという条件で、幅広いデザインに利用できる、万能アイテムのみをまとめてご紹介します。

デザインの雰囲気をグッと良くしたい。そんなときはテクスチャ素材をつかって、手軽に質感をアップしてみましょう。重ねるだけでデザインの印象をガラリと変えることができるなど、新しいテクスチャの種類そして使い方も増えてきています。 今回は、さまざまなデザインシーンで活躍する、無料ダウンロードできる新作テクスチャ素材を中心にまとめてご紹介します。使い勝手の良い紙やウッドテクスチャから、トレンドの水彩ペイント系アイテムまでは幅広いアイテムが揃います。 詳細は以下から。 デザインの雰囲気をガラリと変える、すごい無料テクスチャ素材まとめ 12 Presentation Background Curved Wood 背景をカーブさせ立体的に魅せる、高画質なウッドテクスチャ12枚を収録しています。プレゼンテーションや商品の背景デザインにどうぞ。 10 Grunge Stained Paper Textures

仕事のあらゆるシチュエーションで必要になる名刺。みんなが持っているからこそ、自分だけのオリジナル性をデザインで表現してみましょう。会話のきっかけにもなり、仕事もうまく進むかもしれません。 今回は、名刺を作成するときにチェックしたい、50個のデザインポイントをすべてまとめています。気に入ったポイントを、デザインに加えてみてはいかがでしょう。同時に、オンラインデザインツール Canva で無料編集できる、名刺用テンプレートも揃えています。こちらも参考にどうぞ。 目次 すっきり、プロフェッショナルに。 透明に色を加えよう。 型破りにいこう。 エレガントな形を使おう。 曲線カーブを利用しよう。 ゴージャスに仕上げよう。 個性を加えよう。 楽しく、形式ばらずに。 レタープレスで奥行きを。 コントラストのはっきりとした配色を。 透明の面白い仕掛けを考えよう。 デザインに専門性を加えよう。 向きを変えて

Photoshopを利用し、短時間で手軽に、みんながあっと驚く高品質なデザインを作成する方法はいくつかあります。 そのなかでも、文字を挿入し、ボタンを数クリックするだけで、見違えるほど魅力的にするテキストエフェクトは、グラフィックデザインにぜひ活用したい素材です。今回は参考にしたい PSD ファイルを、ファイルの基本的な使い方、カスタマイズ方法と一緒にご紹介します。 詳細は以下から。 ファイルの編集、カスタマイズ方法 では実際にファイルをダウンロードし、どのように編集するのか具体的に見ていきましょう。今回はデモとして以下のファイルを利用しています。 Molten Text Effect – DealJumbo まずPhotoshopでファイルを開き、レイヤーパネルを確認します。パネルの一番上に配置された、サムネイルの右下にアイコンが表示されているレイヤーは、スマートオブジェクトレイヤーであ

HTMLとCSSを中心にデザインされた、注目を集めたいときにぴったりな最新ボタンエフェクト用コードスニペットを、コード共有サイト CodePen からピックアップしまとめています。 CSS3が主要なモダンブラウザに対応したことから、アニメーションを加えたり、スタイリングの幅がグッと広がっています。加速するウェブデザインの進化において、これからますます楽しみな分野で、他と差の出るテクニックと言えるでしょう。 詳細は以下から。 コピペでラクラク、押したくなるボタン用HTMLコードスニペットまとめ ※　デモが動かないときは、「RETURN」ボタンをクリックすることで、再読み込みされます。 ※　ページの読み込みに多少時間がかかります、すこし待ってからスクロールするとスムーズに表示されます。 Fancy Button CSSのみでホバーエフェクト用ドロップシャドウとして適用した、今年のデザイントレン

現在人気のプレミアムフォント20種類を揃え、通常価格の98%オフで購入することができるデザインパック 20 Best-Selling Font Families With 247 Individual Fonts をご紹介します。 クライアント向け案件などの商用利用にも対応しており、総アイテム価格およそ19万円（$1,789）の素材が、98%オフの3,100円（$29）で購入できます。6月21日までの2週間限定企画、これを機会に使いやすい万能フォントコレクションを、手に入れてみてはいかがでしょう。 20 Best-Selling Font Families With 247 Individual Fonts は、ユーザーの要望に耳を傾け、使い勝手がよいフォントスタイル合計247個を収録しています。世界を代表する人気フォントデザイナーが多数参加した、他には負けない高品質なクオリティーが特長で

フォトショップの新しい使い方や、テクニックを学びたいときはチュートリアルのつくり方を参考にしてみましょう。ステップごとに進めることができるので、実践的なツールの使い方を学ぶことができます。 今回はデザイナーが参考にしたい、最新 Photoshop チュートリアルをまとめてご紹介します。デモ用 PSD ファイルを無料ダウンロードできる素材もあるので、これからフォトショップをはじめるひとにもオススメです。 詳細は以下から。 これどうやって作るの？フォトショップの勉強で参考にしたい、チュートリアルつくり方まとめ 80年代レトロテキストのつくり方 Illustrator で作成した3Dシェイプ（Photoshopでも作成できます）に、レイヤースタイルを適用する手軽なテクニック。背景のつくり方もポイントで、参考PSDファイルも無料ダウンロードできます。 幻想的な多重露光エフェクトのつくり方 ポートレ

ウェブデザインにおける色の使い方は、制作過程でもっとも重要な鍵となる要素のひとつです。 新しくカラーホイールを再発明したり、劇的な方法で今までにない、色の組み合わせをつくるということではなく、色の使い方によって、サイト全体の雰囲気を良くも悪くもしてしまいます。 好みによって単色や、鮮やかな配色など解決方法は変わってきますが、色を扱うときはどんな意味合いがあるのか検討することで、色が素敵と言った単純な理由ではなく、戦略的にうまくユーザーの感情をコントロールすることができるでしょう。 この記事では、ウェブサイト制作の配色えらびに重要な8つのポイントを見ていきましょう。 詳細は以下から。 01. ブランドイメージを決めよう。 多くのひとがウェブサイトを公開する理由として、伝えたい特定の感情やメッセージをもっています。こんなときは色を効果的に役立ててみましょう。コンテンツを読むことなく、どんな内容

インターネットによる商品販売が当たり前となったいま、よりデザインを重視することで、ユーザーの注目を効果的に集めることができます。今回は、最新デザイントレンドを取り入れた、プロダクト商品の新しい魅せ方を提案した、素敵なUIデザインをまとめています。 フラットデザインから派生し、きつめのドロップシャドウを採用した、カード型レイアウトが多数公開されたり、商品の一部がボックス枠からはみ出した、新しい魅せ方も登場しています。また、アニメーション付きのよりクリエイティブな魅せ方も、今後ますます増えてくるのではないでしょうか。 詳細は以下から。 商品を素敵に魅せる、アピール度抜群な最新UIデザイン50個まとめ Altomate – Ecommerce Concept Day 31 – Minty & Playful Ice Cream Daily UI #12 Single Product Daily

運営しているウェブサイトやブログの訪問ユーザーを増やしたい、と思っている人は多いでしょう。 2013年から公開されている Canva デザインブログは、ゼロから月間100万セッションへと急成長を続けています。また2015年より、ソーシャルネットワーク Pinterest を活用したことがきっかけとなり、世界的な大企業のクリエイティブ作成にも利用されるようになりました。 Canva チームは、Pinterest からの流入ユーザーをより増やすために、公開する記事には最低でも20枚の素晴らしいグラフィックを含むようにしたことで、現在では60,000セッション以上が Pinterest 経由でのアクセスとなっています。 彼らが達成したことを真似するのは難しそうですが、そうではありません。この記事では、ウェブサイトやブログでより影響を与えるグラフィックの作り方を、無料テンプレート素材と一緒にみてい

デザインに利用するフォント書体によって、雰囲気や仕上がりはがらりと変わってきます。しかし、目的にあったフォントを見つけるのに、困ってしまうこともしばしば。今回は、どんなデザインにも合わせやすく、使いやすいフリーフォント素材をまとめました。 スタイル数の豊富な書体はもちろん、デザインを選ばずに利用できる万能アイテムを中心に揃えており、多くの素材は商用利用にも対応しています。お気に入りの書体を見つけて、コレクションに追加してみてはいかがでしょう。 詳細は以下から。 商用OK多数！使いやすい万能フリーフォント最新コレクション 2016年5月度 なごみ極細ゴシックフォント 今回特に注目のアイテムで、モダンで直線的な漢字のデザイン。そして、それとは対照的に懐が狭くオールドスタイルなかな文字のデザイン。2つの特徴が見事に生かされています。 ※　個人、商用利用可能 Muller Narrow やや縦長の

ウェブサイトのデザインが決まらないときは、PhotoshopやSketchで編集できる、UIコンポーネントやPSDテンプレートを活用してみましょう。アイデアを形にしやすくし、写真や文字テキストを編集するだけ手軽にデザインを完成させることができます。 今回は、2016年のデザイントレンドを盛り込んだ、無料ダウンロードできる UI コンポーネントや PSD テンプレート素材をまとめてご紹介します。本格的にデザインをはじめる前のモックアップやワイヤーフレームとしても活用できるアイテムを中心に揃えています。 詳細は以下から。 Web制作スピードをアップする、無料UIコンポーネント、PSDレイアウト素材まとめ Chat UI Kit ミニマルなレイアウトに、カラフルな配色を活用したUIコンポーネントは、Photoshop と Sketch 用ファイルがそれぞれ用意されています。 Carbon Mat

Illustrator でデザインを楽しむためには、まずよく利用する基本ツールの使い方を覚えることが大切になります。ツールごとにひとつずつ機能を覚えても良いのですが、表現したいデザインに応じて機能を覚えることができる、チュートリアルの作り方を参考にしてみてみましょう。 すぐに使える実用的なテクニックを活用した、Illustratorの最新チュートリアル、作り方をまとめています。グラフィックのデザイントレンドを意識した作品も多く、今後のデザイン制作の参考にしたいテクニックが揃っています。 詳細は以下から。 イラレの使い方を基本から！参考にしたいIllustrator チュートリアル、使い方まとめ 写真イメージを紙幣に印刷されている風合いに仕上げる方法 パターン素材を活用することで手軽に、そしてさまざまな風合いに仕上げることができます。Photoshopチュートリアルや無料アクション素材も参考