アイコン素材の利用方法は、Webデザインの変化と一緒にすこしずつ変わってきています。特にモバイル端末からサイトを閲覧するユーザーが増えたことで、より直感的で分かりやすいアイコンを用いるケースが増えています。またフラットデザインから派生したGoogleマテリアル・デザインとの相性もよく、これまで以上にWeb制作で重要なデザインパーツとなってきています。

今回は、最近公開された無料アイコン素材を中心にまとめてご紹介します。使い勝手の良いシンプルな作品から、2015年のデザイントレンドを取り入れた素材まで揃い、PhotoshopやIllustrator用ファイルの他に、注目のSVGファイルなど幅広い形式で収録されています。

詳細は以下から。

収録形式豊富！2015年に押さえておきたい無料アイコン素材47個まとめ

100+ PSD Icons for iOS PSD

ピクセル単位にこだわり作成された、高品質で幅広いデザインに合わせやすいアイコン素材100種類セット。

100 Puppet Icons AI EPS PDF

Webサイト制作に必要になりそうな100種類のアウトライン型アイコン素材が揃っており、デザイントレンドにもマッチするデザインが◎。

Icon Pack PSD AI SVG

個人、商用利用に関わらず自由に利用できる、使いやすいシンプルなアイコン素材セット。

Dashel Icon Set SVG PSD PNG

Webデザイナーに関連するデザインを45種類セットにし、カラフルな色使いが素敵なアイテム。

300 Metro-Style Icons PSD SVG EPS AI PDF Webフォント

300個の大量アイコンデザインが揃っており、サークル状にまとめられているので統一感を演出するのにも役立ちます。

Icon Set 2015 AI EPS

ラインを重ねることでよりディテールにこだわりを魅せる、高品質アウトライン型アイコン素材セット。

54 Free E-Commerce Icons PSD

使い勝手の良いアウトライン型アイコン素材で、オンラインショッピングサイトを構築するときにも便利です。

70 Free Icons PSD

やや丸みのある親しみやすいアウトラインスタイルを、合計70種類収録しています。

Free Vector Line Icons AI

iOS8用アイコンデザインに対応する、細いラインスタイルを活用した素材。

Dropicons PSD PNG

2pxと4pxの異なる太さのラインを使い作成された、40種類のイラスト・アイコン素材セット。

100 Free Responsive And Mobile Icons PSD PNG

アートワークがずれて重なったようなスタイルが魅力的で、Webサイトのレイアウト変更に便利なアイテムが100種類揃います。

Cheetah Icons AI

黄色と黒の配色が目立つWebサイト制作向けアイコン素材セット。

Tourism & Travel Icon Set PNG SVG

交通機関や食べ物、レクリエーションなど旅行に関連するアイテム100種類を収録しています。

100+ Free Icons AI PSD

アウトラインで作成された、どんなデザインにも合わせやすい合計100種類のアイコン素材セット。

FoodShift Icons AI

100種類に及ぶフード関連のアイコンデザインを集めており、使いやすいアウトラインデザインが特徴。

Foodikons PSD

シンプルで分かりやすい、ピクトグラム風ラインアイコン8種類セット。

New Year’s Eve Icon Set AI

シャンパンやクラッカーなど新年の幕開けを記念した、無料アイコン素材8個セット。

RNS Pictografica Cocina SVG PNG

ピクトグラム風のかわいい素材が中心で、すこし変わったデザインを探しているときにどうぞ。

Adobe Icons AI EPS

PhotoshopやIllustratorなどAdobe関連製品ロゴをまとめたセット。持っているとなにかと便利なアイテムのひとつ。

Vector File Extension Icons AI

ウェブデザイナーがよく利用する21種類のファイル形式を、アウトラインアイコンで収録。

Free Circle Icons AI EPS PDF

Googleの各種サービスをサークル状デザインと一緒に作成した無料アイコン素材セット。

Infinity Icon Set Webフォント

宇宙空間に関連するロケットや衛星、隕石などをセットに、フォント感覚で利用できる素材。Twitterでツイートすることで無料ダウンロードできます。

Roomicons AI

さまざまなタイプのインテリアレイアウトをラインアートで表現しています。

Furniture Icons AI

家のインテリアをモチーフに作成されたベクター素材で、イラストレーションにもオススメしたいアイテム。

32 Sports Icons AI

スポーツに関連するデザインを収録しており、ロゴデザインとしても使えそうな高品質なデザインが素敵です。

20 Free Dental Icons AI PSD

歯医者に関連するアイテムを20種類あつめたデザインアイコン素材セット。

Indra PSD

天気予報に加え、夏や冬の野外アクティビティーをアウトライン型デザインで再現しています。

Weather Icons Freebies PSD

24種類の天気予報に関連するアイコン素材を収録しています。

RNS Fonts AI SVG PNG PDF

少しだけ丸みをもった天気予報向けデザインアイコン素材70個セットで、あらゆる天候に対応してくれます。

Vector Fruit Icons V1.0 AI

果物や野菜をアウトラインでデザインした、ミニマルスタイルのアイコン素材セット。

Unigrid AI

100種類にのぼるアウトライン型アイコン素材をセットにし、豊富なデザインカテゴリーも魅力的です。

Peax Webdesign Icons Font フォント

手書きスタイルのアイコン素材を絵文字テキストとして利用できます。

Hand-Drawn Doodle Icon Set PNG PSD SVG

手書きイラストデザイン100種類を収録した、ユニークな無料アイコン素材セット。

80 Tiny Vector Icons AI PSD

ミニアイコンサイズながらディテールにこだわったデザインが素敵な80個のアイテム。

Free Material Design Icon Pack AI SVG PNG

Googleのマテリアルデザインをベースにペイントされた、フラットスタイルのアイコン素材セット。

120 Free Vector Icons PSD AI Sketch SVG

フラットデザインを採用したイラスト120種類を収録した、大量のベクターアイコン素材セット。

Summer Holiday Flat Icons AI

フラットデザインのイラストが印象的な、夏に関するアイテムをあつめたアイコンセット。

Vector Flat Icons AI

Webサイト制作で活用できるフラットデザインのアイコン素材セット。

Assorted Round Icons Vector AI

サークル上にフラットデザインで作成された、イラストベクターアイコン素材セット。

36 Free Retro Shopping and Ecommerce Icons PSD AI EPS SVG

カートや支払い方法などショッピングサイトに必要なアイテムを、レトロスタイルで表現したアイコン素材セット。

Polygon Summer Icon Pack EPS

デザイントレンドのポリゴンスタイルを採用し、夏をテーマにしたベクターアイコン素材。

Infographics Animation Icons Free AE

クリスマスカラーのアニメーション付アイコンデザインは、AfterEffect用ファイルで収録されています。現在ダウンロードリンクが切れており、更新予定。

Christmas & New Year Free Set PSD

カラフルにペイントされた、クリスマス仕様のアイコン素材24種類を収録しています。

Free Colorful Christmas Icons AI

パステルカラーでペイントされた、20種類のクリスマスデザインが揃います。

Christmas Icon Set EPS PDF

こまかいラインアートが美しい、クリスマスシーズンに使える無料アイコン素材セット。

Christmas Icons EPS AI

シンプルなアウトラインのみで描かれた、クリスマス向けフリー素材セット。

Winter Line Icons AI

冬に関連するアイテムを中心に、アウトラインで作成された無料ベクターアイコン素材セット。

Twitter Emoji JSプラグイン

モバイルのみに対応したTwitterアイコンを、デスクトップでも表示できるようにするJSプラグインで、合計872種類の絵文字が収録されています。

サムネイル@ : Icon Set 2015 by Jon Wooten – Dribbble

配色はあらゆるデザインの基本となる、とても重要な要素のひとつで、デザイン制作において配色を選ぶときは、細心の注意が必要となります。色彩理論に基づいたアプローチをすることで、人間の行動を変えてしまうこともできます。

苦手な人も多い配色えらびをより手軽に行うことができる、無料カラーツールをまとめて今回はご紹介します。直感的で手軽に色を決めることができ、デザイン制作で覚えておきたいツールが揃っています。

詳細は以下から。

配色デザインに迷わない！すごい無料カラーツール13個まとめ

Material UI Colors

Googleデザインガイド「マテリアル・デザイン」の配色をまとめて確認できるオンラインカラーパレット。主要カラーとアクセントカラーが一度に表示されるので、デザイン制作もスムーズです。

Adobe Color CC

iPhoneやiPadで撮影した写真をもとに配色カラーパレットを作成したり、他のAdobeサービスと同期して利用できるアプリツール。

Coolors

キーボードのスペースキーを押すたびに、スタリッシュな5色のカラーパレットを自動作成してくれるお手軽ツール。生成された配色は、個別で調整することも可能です。

Coleure

水平方向に並べられたカラーパレットを選択すると、白＆黒抜きテキストと白黒テキストを合わせて確認でき、異なるカラーパレットと色比較することも可能です。

Paletton

デザインの目的に合った配色を行うための設計を手助けするカラースキームを、悩まずにマウス操作のみで決めることができます。

ColorHexa

お好みの色を入力すると細かい色の説明や情報に加え、RBGやCMYK、HSL、HSV などさまざまな値に変換してくれます。

BrandColors

IT関連会社のブランドロゴをまとめた配色カラーツールで、気に入ったカラーリングはASE、SCSS、LESS、CSSスタイルでダウンロードすることができます。

Hues

世界的な大企業やスタートアップのブランドロゴカラーを集めた配色パレット。暖色系や自然系などカテゴリー毎に表示できる点もポイントです。

Bada55

アルファベットと数字を使って表示されるユニークな英単語（英: leet）の配色カラーパレットを集めているサイト。ちなみにサイト名Bada55は、「Badass（たちの悪い、かっこいい）」を意味しています。

Pictaculous

イメージ写真をアップロードすると使われている色の配色マルチカラーパレットを瞬時で作成してくれます。

Color Palette Generator

イメージ写真をアップロードするとそれに合った配色マルチカラーパレットを作成、提案してくれます。クライアントやブランドイメージが決まっているときに便利なアイテム。

Palette for Google Chrome

インストールしておくことでページに表示しているイメージ写真の配色カラーパレットを作成してくれる、Google Chrome拡張機能ツール。

Nippon Color

日本独自に伝わる伝統の色をデザイン制作に活用したいときは、こちらのサイトがオススメ。見やすいカラーチャートに、美しいアニメーションが素敵なツール。

配色アイデアに困ったら使いたい、無料オンラインツールまとめ

2014年紹介したエントリーで、フラットデザインのカラーリングに困ったときに役立つツールなどが揃っています。

参照元リンク : Best Color Tools and Articles for Designers – CSSAuthor

フリーフォント素材のなかでも、特に人気の高い筆記体デザイン。今回はさまざまなバラエティーやスタイルを揃え、2014年から今年にかけて公開された、新作筆記体フォントを中心にあつめています。もちろんどれも無料ダウンロードすることが可能となっていますが、利用に関するライセンスを確認のうえご利用ください。

詳細は以下から。

無料ダウンロードできる、美しい筆記体フォント素材まとめ

Armonioso TYpeface

※　個人、商用利用可能

Another Shabby Typeface

※　個人、商用利用可能

Against Typeface

※　個人、商用利用可能

Vigneta

※　個人、商用利用可能

Nella Sue Font

※　個人、商用利用可能

The Wahhabi Script

※　個人利用可能

Kitsune Udon

※　個人、商用利用可能

Parker Font

※　個人、商用利用可能

Lisbon Script

※　個人、商用利用可能

Some Weatz Font

※　個人利用可能

Sverige Script Font

※　個人利用可能

Tilda

※　個人、商用利用可能

Brotherhood Script

※　個人利用可能

Southpaw Font

※　個人、商用利用可能

Resphekt Font

※　個人、商用利用可能

Buffet Script Font

※　個人、商用利用可能

Cellos Script Font

※　個人利用可能

Wisdom Script

※　個人、商用利用可能

Yaquote Script Font

※　個人利用可能

Good Karma

※　個人、商用利用可能

Notera

※　個人利用可能

Nenuphar of Venus

※　個人利用可能

Undergone Font

※　個人利用可能

Angilla Tattoo Font

※　個人利用可能

Wolf in the City Font

※　個人利用可能

Watermelon

※　個人利用可能

Motion Picture Font

※　個人利用可能

Streetwear

※　個人、商用利用可能

Gilded Hand Script

※　個人、商用利用可能

Braxton Free Font

※　個人、商用利用可能

Genica Typeface

※　個人、商用利用可能

Mimix

※　個人、商用利用可能

Alecko

※　個人、商用利用可能

Mastoc

※　個人利用可能

Mademoiselle Camille Font

※　個人利用可能

Coalhand Luke Font

※　個人、商用利用可能

Oh Script!

※　個人、商用利用可能

これまでにご紹介した筆記体デザインに関連するエントリーも、参考にしてみてはいかがでしょう。

• デザインに差をつける！すごい筆記体フリーフォント素材22個まとめ 2014年5月版
• フリーでダウンロードできる、筆記体フォント素材まとめ 2013年秋 注目
• 商用可、ダウンロードしておきたい筆記体フリーフォント45個まとめ 2013年版 注目
• ビンテージデザインに合わせやすい、筆記体フリーフォント素材まとめ
• 2013年新作デザイン、筆記体フリーフォント素材10個まとめ
• 総まとめ、ダウンロードしておきたい筆記体フリーフォント厳選50個まとめ 注目
• ダウンロードしておきたい筆記体フリーフォント、23個あつめました。
• ちょっと太めでオシャレな筆記体フリーフォント20個まとめ
• オシャレ&クールな10個の筆記体フリーフォントまとめ
• ぜひ追加しておきたい10個の高品質な筆記体フリーフォント
• ダウンロードしておきたい25個の高品質な筆記体フリーフォント完全まとめ 注目

参照元リンク : 36 Beautiful New Calligraphy Fonts for Designers – Vandelay Design

画面全体を覆う巨大で、派手なフルスクリーンイメージを使ったテクニックは、2014年ごろから見かける人気のデザイントレンドになっています。このテクニックを利用するうえで、Webサイトのあらゆる部分や、コンテンツにユーザーの注目をあつめる方法を理解しておくことが重要となります。またテクニックを活用することで充実したコンテンツを作成しながら、デザインをよりうまくまとめてくれます。

今回はヒーロイメージについて深く掘りさげ、幅広い業種や分野において適用する方法を、ポイントごとにまとめてご紹介します。多くの場合、イメージ写真のクオリティが問題とされますが、その他にも考慮しておきたい重要ポイントがいくつかあります。

• ヒーローヘッダーを使った新デザイントレンド＆参考Webサイト、素材まとめ
  

詳細は以下から。

巨大なヒーローヘッダー

このヒーローイメージのトレンドは要約すると、巨大で魅力的なヘッダーデザインといっても過言ではありません。コンテンツに関連するイメージ写真が利用されているのが一般的ですが、ベクター背景や背景やイラストレーションなどのアートワーク、またアニメーション動画なども活用されています。

以下のポートフォリオでは、デザイナー自身の写真を巨大なフルスクリーン背景イメージとして利用しています。配色も素敵に統一されたブランドイメージとなっており、About Meなど他のページでもヘッダーにイメージ写真背景を利用しています。

基本的にヒーローイメージの根本的なコンセプトは、オーバーサイズのヘッダーイメージを採用することです。すこし異なるアプローチとして、Cleverbird Creativeではモニター全体を覆うフルスクリーンイメージが採用されています。スクロールしていくと各コンテンツセクションごとに背景や写真が使われており、ユーザーの興味をかきたてるテクニックのひとつです。

シングルページ完結型レイアウト

巨大なフルスクリーン背景とヒーローイメージは、シングルページデザインにも活用されています。多くのケースでランディングページや、パララックスエフェクトを採用したWebサイトでは、ごく限られた少ない情報やコンテンツのみが提供されています。そのためデザイン性を加えることでサイトの価値をアップし、コンテンツ間にうまく余白スペースを設けることができます。

Gladzでは、複数の異なるヒーローイメージを活用しています。ページトップ部分では固定ナビゲーションメニューと一緒に、フルスクリーンイメージを使っており、さらにスクロールしていくと全幅で表示されているヒーローイメージがレイアウトされています。

前後のコンテンツとはあまり関係なく、新しいセクションをユーザーへと示すことができ、シングルページデザインでもコンテンツを美しくフィットするでしょう。

フルスクリーン背景

ウェブサイトのタイプによっては、フルスクリーン写真ヘッダーを利用することは素晴らしいアイデアとなります。今回はヒーローイメージコンセプトとは別モノとして考えてみます。関連するテクニックであることは間違いありませんが、全く一緒というわけではありません。

WebサイトChristian Wooは、家具やインテリアデザイン関連を並べたウェブサイトです。各ページで背景イメージ写真が利用されており、制作実績をうまく表現しています。どのページもあまりコンテンツ量は多くありませんが、イキイキとした写真を活用することでカバーしています。

August Digital Marketing Agencyでは、代替案としても使える美しいテクニックを利用しています。イメージ写真の代わりにイラストレーションを活用することで、ユーザーの十分な注目をあつめることができます。

特に実績やスキルを披露したいクリエイティブなアーティストや、デザイン会社ではベストなアイデアのひとつです。ページを訪れるユーザーの多くは、あなた自身が何をしているかあまり知らないことでしょう。そのためページを開くと同時に、どのようなWebサイトなのかユーザーに連想させてくれます。

Sweet Basilでは、イメージ写真をランダム表示させることで、レストランの雰囲気をユーザーにうまく伝えています。他のページを確認すると、異なるイメージ写真を利用したヒーローイメージが印象的です。

特集記事コンテンツ

ここ数年の間にオンラインブログやマガジンサイトは、劇的に増えています。WordPressは現在、もっともパワフルなブログ用プラットフォームのひとつで、多くのウェブサイトがコンテンツ管理に取り入れています。WordPress機能「アイキャッチ画像」が登場してから、ユニークなマガジンスタイルが数多く見受けられるようになってきています。

DIYMagでは、最新記事のみ巨大なイメージ写真と一緒にレイアウトされています。他の記事にもサムネイルは活用されていますが、どれも小さなサイズばかりです。各記事をクリックすると見出しタイトルと一緒に、巨大なイメージ写真が配置されます。ユーザーをサイト内部に誘導する、有効的なテクニックのひとつです。

GOOD Magazineはもうひとつの参考例で、たくさんのアイキャッチ画像をセクションごとに利用しています。もっとも重要になる記事は、ページのはじめに巨大なイメージ写真と見出しタイトルを一緒にレイアウトしています。ユーザーの注目を集めながら、はじめての新規ユーザーをばっちり魅了しています。

スライダー式ギャラリー

ヒーローイメージを一枚だけ利用するのではなく、スライドなど回転させることでより多くのリソースやオプションを表示させることができます。素敵な具体例としてMatter of Formをチェックしてみるとよいでしょう。デスクトップでのみ表示されるフルスクリーンスライダーは、よりサイトを魅力的にし、サイトの目的をより深いところまでユーザーに提供することができます。

JanSportでは異なるもうひとつのアプローチを採用しています。ページ上部に配置されたイメージスライダーは自動的に回転しながらも、ユーザーがボタンをクリックすることで操作することも可能です。商品やサービスをより効果的に魅せることができるので、ショッピングサイトなどに活用したいテクニックです。

ポートフォリオサイトMelyssa Robertは、もうひとつの具体例としてよいでしょう。画面幅いっぱいに表示されたイメージスライダーが利用していますが、コンテンツに注目を集めるデザインコンセプトは他となにも変わりません。

さいごに

今回ご紹介したデザイントレンドを考慮することで、自分自身のヒーローイメージを作成することができるでしょう。また流行しているデザイントレンドはなぜ人気があり、どのようにサイトに採用できるか分析することで、より完成度の高い作品を仕上げることができます。

サムネイル@ : Simply Gum – The Only 100% Natural Chewing Gum

参照元リンク : Exploring the Hero Image Trend in Web Design – Market Blog

Webサイトやモバイル・アプリ用デザイン、またはイベント用フライヤーやプレゼンテーション用の資料など、完成した作品やアートワークをより素敵に仕上げてみませんか。今回はPhotoshopでカスタマイズできる、新作モックアップPSD素材をまとめてご紹介します。

どれも無料ダウンロードできるだけでなく、Photoshopスマートオブジェクト機能を利用しているので、アートワークを用意するだけの手軽さ。ちょっとしたひと手間を加え、より魅力的な作品に仕上げることができます。

詳細は以下から。

ラクラク編集で見た目をアップ！すごいモックアップPSD素材まとめ

2 Business Card Mock-Ups

厚みのあるクラフト紙で作成、重ねられた名刺デザインを魅力的に仕上げるモックアップ素材2種類。

Perspective Business Cards MockUp

白黒2タイプが用意された名刺デザイン用モックアップ素材セット。

Business Card Mockup

ウッド板の上に並べられた名刺用モックアップテンプレート。

Flyer Mockup

A3、A4、A5サイズに対応しており、プリント印刷するアイテムをより効果的に魅せるアイテム。

A4 Paper Mockup vol.4

ふわりと宙に浮いたようなエフェクトを表現したモックアップ素材。

A4 Paper Mock-Up vol.3

作成した書類やフライヤーなどを、まるで印刷したような仕上がりで演出してくれます。

A4 PSD Flyer Mock-Up

立体的な影まで表現することができるアイテムで、スマートオブジェクト機能を利用したお手軽編集も可能です。

A4 Paper Mock-Up vol.5

用意しておいたデザインを配置するだけで、紙を折り曲げた様子をうまく再現することができます。

Artwork Frame PSD Mockup vol.3

大きな額縁に入れ、壁に掛けられたポスターなどの展示、ディスプレイなどに適したモックアップ素材。

A5 Horizontal Brochure MockUp

手のひらサイズのパンフレットを作成でき、見開きバージョンも一緒に収録しています。

A4 Landscape Brochure Mockup

上記アイテムより一回り大きなA4サイズのパンフレット用モックアップ素材。

Corporate Stationery PSD Mockup

名刺やメモ帳などのステーショナリー文具を並べたセット。

Hardcover Book MockUp

ハードカバーで製本された、本物そっくりなモックアップ素材。自由に表紙を変更することができます。

Free Journal Mockup

まるで写真を撮影したようなリアル感を演出でき、ノート表紙と名刺デザインをカスタマイズ可能です。

Samsung Galaxy SS PSD Mockup

ディスプレイデザインを自由にカスタマイズでき、背景も変更にも対応した無料アイテム。

iPhone 6 in Hand

こちらはiPhone 6を手で持った状態をデザインしており、全3色が揃ったモックアップアイテム。

Flat PSD iPHone 6 & 6s Mockup

超リアルにデザインされた、フラットスタイルのイラストレーションが素敵なiPhone用モックアップ素材。

iPhone 6 Plus Mockup

これまでとはディスプレイ解像度が異なるiPhone 6 Plusは、いくつかモックアップを持っておくと重宝します。

iPhone 6 Plus PSD Mockup Templates

画面サイズの大きなiPhone 6 Plus専用で、5種類のレイアウトが収録されています。

8 Nexus 6 PSD Mockups

さまざまなシーンでNexus 6端末を使っている様子を表現できる、合計8種類のモックアップ素材が揃ったセット。

Nexus 9 Lunar White Mockup

新型タブレット端末を完全再現したアイテムで、ディスプレイ画面を自由に変更可能です。

Free MacBook Pro PSD Mockup

カフェを連想させる空間は、自由にディスプレイ画面を変更することができるアイテム。

iMac Layered Mockup

パーツごとに細かくレイヤーを分けて作成された、超立体的なiMac用モックアップ素材。

Beer Bottle PSD Mockup

オリジナルのビール瓶をデザインすることができるモックアップ素材。瓶の色を変更可能で、想像力がふくらむアイテム。

PSD Wine Bottle Mockup Template

ラベルを自由にカスタマイズすることで、オリジナルのワインボトルを完成させることができます。

Hanging Wall Sign Mockup

お店のロゴと一緒に描かれた、壁掛け型の看板をデザインできる面白モックアップ素材。

Realistic Camera Mockups

カメラのファインダーから覗き込んだ風景をカスタムする、ユニークな無料モックアップPSD。

5 Picture Frame Mockups

大小異なる5つの額縁フレームに写真並べる、Photoshop無料モックアップPSD。

Stationery Mockup 1

コーヒーカップにレザー手帳、黒縁メガネなどスタイリッシュなアイテムを並べたモックアップ。

Flying Stationery PSD MockUp

ステーショナリーグッズやCDなどが、ヒラヒラと宙を舞っているようなデザインモックアップ。

最後に、。

Magic Mockups

PSDをダウンロードして編集するのが面倒くさいというひとは、オンラインでモックアップを作成できるサービスも登場しています。指定されたサイズのデザインイメージを用意することで、自動的にモックアップが切り替わる工夫が。

サムネイル@ : Dribbble – iPhone 6 Free Mockup by Darius Dan

2000年よりデザインフォントの販売を行っており、これまでに1100以上のデザイナーがプロジェクトに参加している、世界的にも人気が高いフォント販売サイトMyfonts.com。2014年の間に、もっとも収益をあげたプレミアムフォント素材15種類が公開されていたので、今回はご紹介します。

デザイントレンドが反映されたフォントばかりで、無料フォント素材では見つけるのがむずかしいアイテムが揃っています。各フォントは25ドル（およそ3,000円）ほどで、比較的手に入れやすい価格設定となっているのはもちろん、デスクトップだけでなくWebフォントとしても活用可能です。プロジェクト予算が少ないときにも助かり、他とデザインを差別化したいときにも良いかもしれません。

詳細は以下から。

2014年もっとも人気のあったプレミアムフォント素材ベスト15

Brandon Printed

Glober

Quickpen

Campton

Adorn

Selfie

Microbrew

2014年を代表するデザイントレンドが反映された、プリント印刷がかすれてしまったような質感が、昨今のミニマルデザインにもうまくはまります。

Showcase

Choplin

Nexa Rust

良質なフォント素材を公開しているFontfabricから登場したアイテムで、当サイトでも紹介しています。4種類のフォントスタイルを無料ダウンロードできます。

Carpenter

Texta

True North

Brix Sans

Eveleth

参照元リンク : MyFonts: Most Popular Fonts of 2014, January 2015

新しい知識やアイデアを知りたいときに、どのような方法があるでしょうか。TEDトークでは世界中で開催された、驚きや発見に満ち溢れたプレゼンテーションが、1900本以上アーカイブされています。日本語字幕にもばっちり対応していて、英会話の勉強にも最適のツールなのですが、数が多すぎてどれから見たらいいか分からない。、というひとも少なくありません。

そんなときはNHKで放送されている「スーパープレゼンテーション」をオススメします。TEDトークのなかでも特に人気の講演を、スピーカーのライフストーリーや、アイデアをより深く知るためのキーフレーズと一緒に紹介してくれるので、どれから見ようか迷っているひとも安心です。

今回は「スーパープレゼンテーション」で2014年後半から新年にかけて公開されたプレゼンテーションをまとめてご紹介します。

• NHK「スーパープレゼンテーション」アンコール！人気のあったTEDトークまとめ 2014夏
• NHK「スーパープレゼンテーション」で放送されたTEDトーク厳選まとめ
• Webデザイナーにオススメしたい、TED極上プレゼンテーション15選

NHK「スーパープレゼンテーション」で放送されたTEDトーク厳選まとめ

1.14 On Air Ziauddin Yousafzai（ジアウディン・ユスフザイ）

「私の娘 マララ」（My daughter, Malala）

マララをどう育てたのか人々は私に聞いてくる。「どうしたらあんなに勇敢で堂々とした子になるのか」と。私はこう答える。「私が何を“したか”ではなく、何を“しなかったか”なんです。私は娘の翼を切らなかった。それだけです」

1.7 On Air Steven Pinker（スティーブン・ピンカー）

「実は暴力は減ってきている」（The surprising decline in violcence）

暴力は減ってきている。今、われわれが問うべきことは「なぜ戦争がなくならないのか？」ではなく、「なぜ平和があるのか？ 」だ。「何が悪い行いなのか？」だけでなく、「何が正しい行いなのか？」を知ろう。というのも、われわれは確実に良いことをしてきているのだから。

1.4 On Air Joi Ito（伊藤穰一）

革新的なことをしたいなら“今”を生きよう（Want to innovate? Become a “now-ist”）

番組ナビゲーターの伊藤穰一さんによる、渾身のプレゼンテーション。テーマは、「次なるイノベーションをどう起こすか？」です。インターネット以前（Before Internet: BI）に比べ、インターネット以後（After Internet: AI）は技術革新のコストが劇的に低下しました。そのメリットを存分に活かすために必要な考え方を指南します。

1.4 On Air Joe Smith（ジョー・スミス）

紙タオルの使い方（How to use a paper towel）

アメリカ人が消費する紙タオルは年間590万トンにものぼります。そこでジョー・スミスが、誰もが実践できる紙タオルの節約法を、楽しいアクションを交えて紹介します。シンプルに見えて、上級者の技を必要とするプレゼンです。

1.4 On Air Megan Washington（ミーガン・ワシントン）

人前で話すのが怖い理由（My daughter, Malala）

オーストラリアの人気ミュージシャン、ミーガン・ワシントン。実は、大勢の人前で話すのが大の苦手だと言います。その理由は、幼い頃から苦しんできた吃音にありました。ピアノに向かって歌い出した途端、滑らかなに言葉をつむぎ出す姿が大きな感動を呼ぶプレゼンテーション。演奏した曲は、2014年発表のアルバム「There There」より「To Or Not Let Go」です。

12.3 On Air Neil Pasricha（ニール・パスリチャ）

「サイコーな人生を送るための ３つの秘けつ」（The 3 A’s of awesome）

世の中は幸せなことだらけ。これって人間だけですよ。生命が存在できる唯一の惑星に住んでいて、こんなにいろんなことを楽しめる。建築に農業、ジュエリーに民主主義。

11.26 On Air Oliver Sacks（オリバー・サックス）

「幻覚が明かす 人間の脳」（What hallucination reveals about our minds）

目が不自由で幻覚を見るけど、怖くて言えないという人が多くいる。だからこのことを広めるべきだ。患者のため、医者のため、世のために。

11.19 On Air John Hunter（ジョン・ハンター）

「『世界平和ゲーム』に学ぶ」（Teaching with the World Peace Game）

私もこのゲームからたくさんのことを学びました。もし子どもたちがこのゲームで論理的思考力や創造力を身につけて、それを発揮できたなら、世界は救われるかもしれない。

11.12 On Air Erin McKean（エリン・マッキーン）

「辞書編纂（へんさん）を楽しむ」（The joy of lexicography）

好きで使ったなら、どんな言葉でも本物になる。辞書に載っているかどうかなんて関係ないんです。辞書に載っているから本物っていうわけじゃない。愛があれば本物になる。

11.5 On Air Ed Yong（エド・ヨン）

「自殺するコオロギ ゾンビ化するゴキブリ…寄生虫にまつわる物語」（Suicidal crickets, zombie roaches and other parasite tales）

寄生虫というのは、僕らの世界の見方を変えてくれるすごい存在です。自然界をいつもと違う角度から見るよう促してくれます。もしかしたら生物のあんな行動やこんな行動が、実はその生物の意志によるものではなく、別の何かに操られているのかもしれないと。

10.29 On Air Steven Johnson（スティーブ・ジョンソン）

「良いアイデアはどこから来るのか」（Where good ideas come from）

私が“液体ネットワーク”と呼んでいる、さまざまなアイデアや好奇心がぶつかり合う環境。それがイノベーション（革新）の生まれる環境です。

10.22 On Air STING（スティング）

「こうして私はまた曲を書き始めた」（How I started writing songs again）

実はこうなんだ。ロックスターであろうと、造船所の溶接工であろうと、アマゾン奥地の部族であろうと、もしくはイギリスの女王であろうとも、結局は皆、同じ運命にあるんだ。

10.15 On Air Nic Marks（ニック・マークス）

「地球幸福度指数」（The Happy Planet Index）

我々は、人間と地球の両方が幸せであることが大事だと考え、それを測る指標を作ったらどうかと思ったのです。

10.8 On Air Jay Silver（ジェイ・シルバー）

「バナナをハックして キーボードを作ろう！」（Hack a banana, make a keyboard!）

ものづくりをしてると、世の中の見方がちょっとだけ変わってきます。自己表現の場に見えてくる。未来をデザインすることに参加できると気づく。

10.1 On Air Nicholas Negroponte（ニコラス・ネグロポンテ）

「30年間の未来予測を語る」（A 30-year history of the future）

私の予想では、人が情報を食べる時代がやってくるでしょう。錠剤を飲めば、英語やシェークスピアを学べるようになる。情報は血液に流され、脳へと届けられるようになるでしょう。

9.24 On Air Mina Bissell（ミナ・ビッセル）

「がんの新しい理解につながる実験」（Experiments that point to a new understanding of cancer）

私は大胆な仮説を立てました。構造によって細胞の機能が変わるのならば、がん細胞でも、構造を修復することで正常化できるはず。実際にできるのか？ やってみました。

9.17 On Air Chris Hadfield（クリス・ハドフィールド）

「宇宙空間で目が見えなくなって学んだこと」（What I learned from going blind in space）

大事なのは、本当に危険なのは何なのかを見極めることです。最大のリスクは何なのか？何か悪いことが起こりそうだ…という漠然とした不安に惑わされてはいけません。本来怖がる必要のないものに対しては、見方を変えていくこと。そうすれば、それまで見えなかった、まったく新しい世界が見えてきます。

9.10 On Air Cameron Russell（キャメロン・ラッセル）

「容姿がすべてじゃない　信じて 私はモデルなの」（Looks aren’t everything. Believe me, I’m a model.）

最後に、これがポイント。世の中、イメージの持つ力によるところが大きい。「成功」とされるもの、「失敗」とされるもの、どちらも。

9.3 On Air Paul Piff（ポール・ピフ）

「お金は人をイヤなやつにする？」（Does money make you mean?）

どうやら人は裕福になればなるほど、他人を犠牲にしてでも、個人的成功をより強く求めるようだ。身勝手になってしまうのだ。

1.21 On Air予定 Pamela Meyer（パメラ・メイヤー）

「ウソつきを見抜く方法」（How to spot a liar）

「日常生活はウソで満ち溢れている。」そう断言するのは、ウソを見抜く達人のパメラ・メイヤー。ハーバード・ビジネス・スクールを卒業後、会社を起業するも、信頼していた社員の横領にあい失意のどん底に。「二度と騙されない！」そう心に誓ったパメラは心理学や犯罪学を研究し、ウソを見破る独自の手法を編み出した。プレゼンではウソつきの典型的な仕草や言葉づかいを紹介。これを見れば、あなたももう騙されないかも！？

参考リンク Browse Talks | TED.com

日本語字幕で視聴可能なTEDトークは、こちらから確認することができます。現在1643本の動画プレゼンテーションが公開されており、随時アップデートもされています。

不定期となりますが、デザイン制作に活用したい無料Photoshopブラシをまとめています。今回は2015年最初となる1月度まとめです。

デザインをゼロから作るよりも、スタンプ感覚で利用できるPhotoshopブラシ素材を利用することで、制作時間の大幅な短縮にもつながります。またデザインに重ねることで、テクスチャの質感を反映できるなど、テクニック向上を目指したアイテムが揃っています。

詳細は以下から。

ダウンロードしておくと便利な、無料ブラシ素材まとめ 2015年1月度

Soaked Stains Brush

ブラシ素材を重ねることで、どんなデザインも錆びたようなグランジエフェクトを追加することができる素材。

12 Geometric Brushes

三角形を中心とした、デザインのアクセントになりそうな幾何学模様12種類を揃えたセット。

Circular Halftone Brush

サークル上でデザインされた、大小さまざまなハーフトーンエフェクトを追加できるブラシ素材。

Glass

銃弾が突き抜けて割れたガラスを再現することができます。

Fence Brushs

有刺鉄線やさまざまな形状のフェンスを合計12種類セットにし、背景デザインを作成するときにも便利なアイテム。

Star Brush

キラキラに輝く背景デザインを描くことができ、収録されているブラシを組み合わせることでより複雑なデザインにも対応します。

Awesome PS Brushes

花がらを中心としたデザインアクセントにもってこいなアイテム12種類を揃えた、無料ブラシ素材セット。

Geometrical Brushes

Triangle Brushes

三角形だけを組み合わせた、ユニークな幾何学模様を再現できます。

Triangle Brushes

三角形に動物の写真をミックスした、スタイリッシュなアートワークのような素材。

Acrylic Brushes

アクリル絵の具でペイントした巨大なカンバスをそのまま再現できます。

Ink Spills

インクが複雑に飛び散った様子が面白い素材で、デザインのアクセントにいかがでしょう。

Ink Splash

血が飛び散ったような血痕を連想させる、インクスプラッシュ系デザイン。

Guan’s Brushes 2.0

デジタルペイントに必要な、質感を残しながら描くことができるアート系ブラシ素材セット。

Watercolor Photoshop Brushes

水彩絵の具でペイントしたようなリアルな質感を表現できます。

Grunge Edges Brush

ペンキなどが飛び散って、すこし汚れたグランジ感を表現することができるブラシ素材セット。

12 Large Bokeh Brushes

光が漏れたような幻想的で雰囲気をアップする、ボケ（英: Bokeh）デザインのブラシ素材セット。

Smoke Brush

燃えている煙の様子をより詳細に描くことができる、高画質なブラシ素材セット。

Pencil Messy Strokes

鉛筆でグチャグチャに描いたラインを、そのままPhotoshopブラシ素材として利用できます。

80 Hand Drawn Arrows PS Brush Set

手描きされたバラエティー満載の矢印デザインを80個収録しています。

18 Graffiti Brushes

実際に描かれたグラフィティアートをブラシ素材として利用できる、18種類のストリート系デザインに注目です。

Japanese Garden v.1

和柄アイテムをまとめたデザインブラシ素材セット。

Rococo Brushes

1920年代のアンティーク系デコレーションアイテムを揃えたブラシ素材セット。

Chinese Decor Brushes

中国に関連するデコレーションアイテムを22種類揃えたブラシ素材。

Amrican Flag

アメリカの国旗をモチーフにした、グランジテイストのイラストレーション系ブラシ素材セット。

Ornament Free Brush Pack

繊細に描かれた花がらデコレーションを、そのままスタンプ感覚のブラシ素材として利用できます。

Fancy Frames

デザインアクセントに◎なフレーム縁ブラシに、花がらを組み合わせた素敵な素材。

Free Decorative Brushes

ビクトリアン調のデコレーションを使った、フレーム作成に使えるブラシ素材。

5 Floral Brushes

デザインのアクセントとして活用したい、花がらと星マークを組み合わせたデコレーション系ブラシ素材。

Wallpaper Patterns

壁紙のようなビクトリアン花柄デコレーションをデザインします。

Sea Creatures

魚やカメ、イルカなど海洋生物デザインをセットにして収録しています。

Valentine’s Love

バレンタインデー関連アイテムとして使いたい、ハート型のブラシ素材セット。

Paper Parts

便せんや、ちょっとしたメモ紙デザインが欲しいときに便利なアイテム。

Photo Set

写真をポラロイド風に仕上げるイメージフレームを揃えたブラシ素材セット。

Tires

ザラッとした質感を残した、本物そっくりなタイヤ跡をデザインします。

Dividers Set

さまざまな境界線として利用できる、ユニークで質感にこだわったラインアイテムが揃っています。

サムネイル@ : Mud – Brushes -FBrushes

グラフィックデザインにおいて「シンボル（英: Symbol）」は、コンセプトやデザインのより深いメッセージを伝えるために重要です。ロゴをデザインしたり、アイコンを配置したりとシンボルを活用することで、言葉よりも効果的にコミュニケーションをとることができます。

基本的なシンボルマークの持つ意味をそれぞれまとめたエントリー「The Visual Language – A Comprehensive Guide to Symbolism」が公開されていたので、今回はご紹介します。普段よく見かける記号やマークなどが中心となっているので、デザイン制作に役立ててみてはいかがでしょう。

詳細は以下から。

動物にまつわるシンボルマーク

• ライオン（英: Lion）: 勇気、強さ、勇敢さ、リーダーシップ、誇り
• きつね（英: Fox）: かわいらしい、かしこい、ずるがしこい
• いるか（英: Dokphin）: 救済、正直、愛、変化
• 犬（英: Dog）: 友情、仲間、忠誠、忠実
• 牛（英: Bull）: 勇気、男まさりのパワー、雅量(に富むこと)
• 白鳥（英: Swan）: 賢さ、やさしさ、希望、美しさ、楽しさ
• こうもり（英: Bat）: 死、信仰、魔法、恐れ
• オオカミ（英: Wolf） : 残酷、かしこさ、勇気、勝利
• クモ（英: Spider） : 恐れ、創造性、連結
• 虎（英: Tiger） : パワー、エネルギー、強さ
• ふくろう（英: Owl） : 知力、賢さ、視界、我慢強さ、警戒
• 蝶（英: Butterfly） : 復活、サイクル、魂、美しさ、自由

自然にまつわるシンボルマーク

• 炎（英: Fire）: 暖かさ、情熱、熱中、信頼、気力、衝動
• 水（英: Water）: 流動性、流れ、浄化、変形、復興、再建
• 木（英: Wood）: 保護、賢さ、直感、深さ
• 土（英: Earth）: 母なる自然、安定、地球
• 空気（英: Air）: 心、精神力、信頼、知性、、自由
• メタル（英: Metal）: 高価、てんびん、強い欲望、強さ、カリスマ

ラインと矢印にまつわるシンボルマーク

• 矢印（英: Arrow）: 方向、運動、強さ
• 左矢印（英: Left Arrow）: 逆戻り、逆行
• 右矢印（英: Right Arrow）: 早送り、進行中、プロセス、スピード
• 細いライン（英: Thin Lines）: 壊れやすさ、ソフト、エレガント、もろさ
• 太いライン（英: Thick Lines）: 強さ、太さ、パワフル
• 垂直ライン（英: Vertical Lines）: 強さ、安定、精力的な、硬直した
• 水平ライン（英: Horizontal Lines）: 休み、眠り、静か、リラックスした
• 曲線ライン（英: Curved Lines）: ソフト、優美な、流動性
• 点線ライン（英: Dashed Lines）: 透過性、不完全
• ジェスチャーライン（英: Gesture Lines）: 活動、形状

シェイプにまつわるシンボルマーク

• 十字（英: Cross）: 神聖な、宗教的な、名誉、癒やし、信頼、統一、希望
• 四角形（英: Square）: 安全、構造、注文、安定、正直さ
• 円形（英: Circle）: 継続、バランス、サイクル、統一、保護
• 三角形（英: Triangle）: 安定、霊的な、創造性、組み合わせ
• らせん形（英: Spiral）: 創造性、変化、変形、旅
• 長方形（英: Rectangle）: 平穏な、快適さ、結束

植物にまつわるシンボルマーク

• 木（英: Tree）: 避難、強さ、安全、保護
• 葉っぱ（英: Leaf）: 自然、若さ、安定
• 盆栽（英: Bonsai Tree）: 調和、バランス、平和
• カエデ（英: Maple Tree）: 約束、暮らし、バランス
• 柳（英: Willow Tree）: 夢、知性、願望
• 桜（英: Cherry Tree）: 愛、ロマンス、良い運命
• 松（英: Pine Tree）: 祝賀、野望、生命
• 白い花（英: White Flower）: 評価、純真
• 赤い花（英: Red Flower）: 切望、情熱、ロマンス
• 桃色の花（英: Peach Flower）: 感謝、甘さ、謙虚
• ラベンダー色の花（英: Lavender Flower）: 魅力、王位の、豊かさ
• 黄色の花（英: Yellow Flower）: 友情、長生き

人間の体にまつわるシンボルマーク

• 目（英: Eye）: ビジョン、近く、ゴール
• 脳みそ（英: Brain）: 考え、創造性、アイデア、意識
• 髪の毛（英: Hair）: 強さ、美しさ、欲望、魅力的な
• 腕（英: Arm）: 能力、パワー、サポート
• 足（英: Foot）: 速さ、長さ、ステップ
• 心臓（英: Heart）: 勇気、同情、感情
• 子宮（英: Womb）: アイデア、考え、創造、生まれ故郷

紋章にまつわるシンボルマーク

• 金色（英: Gold）: 気前の良さ、威厳のある、尊敬
• 銀色（英: Silver）: 平和、正直、喜び、純真
• 赤色（英: Red）: 強さ、戦士、殉教者
• むらさき色（英: Purple）: 威厳のある、王位の、正義の
• くり色（英: Maroon）: 戦闘での我慢強さ、勝ち誇る
• みどり色（英: Green）: 忠誠、忠実、希望
• 黒色（英: Black）: 深い悲しみ、抵抗、レジスタンス

紋章にまつわるシンボルマーク２

• 鳩（英: Dove）: 平和、幸運な、浄化した、精霊
• はやぶさ（英: Falcon）: 高い知能、冷酷な、睡眠状態
• グリフィン（英: Griffin）: 勇敢な、勇気、強さ、忍耐
• 2つの頭を持ったワシ（英: Eagle with Two Heads）: つながった、保護
• ユニコーン（英: Unicorn）: 純粋、美徳
• 剣（英: Sword）: 名誉、正義
• 雄羊（英: Ram）: 権威のある、リーダーシップ
• たいまつ（英: Torch）: 真実、知性、生命、熱狂的な
• 羽根（英: Feather）: アイデア、考えぬかれた創造性、生まれ故郷
• 鐘（英: Bells）: 邪険な心を撃退するパワー

神話にまつわるシンボルマーク

• アスクレピオスの杖（英: Staff of Axclepius）: 癒やし、再生、復活、権威のある、出生
• ヒゲエイアの器（英: Bowl of Hygeia）: 医学、薬学、賢明
• アンク（英: Ankh）（エジプト時代の象形文字）: 永遠の生命
• 陰陽（英: Yin Yang）: バランス、反対側の、活力
• トリケトラ（英: Triquetra）: 女神、体と魂、マインド
• プロべデンスの目（英: All Seeing Eye）: イルミナティ、神の目、見守る
• コル（英: The Koru）（マオリ族によるタトゥ）: 創造性、調和、新しい生命

参照元リンク : The Visual Language – A Comprehensive Guide to Symbolism – ZDBlogs

Photoshopでショートカット使っていますか。一度覚えてしまうと、デザイン作業をよりスピードアップすることができます。今回は特に利用する機会が多いであろうPhotoshopショートカットキーを中心にまとめています。

マウス操作ではやや手間な作業も、ショートカット操作はボタンを入力するだけのシンプルさ。これを機会に作業効率を見直してみてはいかがでしょう。

詳細は以下から。

作業スピードアップ！覚えておきたいPhotoshopショートカット

ショートカット１ 自動変形

もっともよく利用するショートカットキーのひとつ。レイヤーや選択範囲を自由に変形することができます。またテキスト編集時は、「文字」ウィンドウの表示/非表示を選択できるので、フォントやサイズ、カーニング編集にも便利。

ショートカット２ レイヤーを複製

選択しているレイヤーを複製するショートカット。CS6では選択している複数のレイヤーやグループもCommand + Jで一発複製できてしまいます。

ショートカット３ レイヤーの透明度の変更

レイヤーの透明度を変更したいときは、数字キーを選択することで自由に調整可能です。選択ツールの状態で、1キーを押すと10%、4を押すと40%と順番どおりに並んでいます。

ショートカット４ ワークスペースの色変更

Photoshopワークスペースの色を変更することで、デザインしやすくするショートカット。Fを押すたびに色合いが切り替わります。

ショートカット５ スクリーンモードの変更

Fキーを押すたびに、ワークスペースの広さが切り替わります。フルスクリーンで全体のイメージを確認したりするときにも使えます。

ショートカット６ ウィンドウの表示/非表示

ディスプレイサイズが狭いときに有効なショートカットで、最大限ワークスペースで作業をしたいというときに便利です。

ショートカット７ 結合したレイヤーの複製

このショートカットは３つのステップを一度に行います。まずすべてのレイヤーを選択＆コピーしたら、結合して、新しいレイヤーに貼り付けます。結合したいレイヤーが非表示になっていないか確認しましょう。特に写真レタッチなど描画モードを調整したいときに便利です。

ショートカット８ すべてのレイヤーを選択

利用されているすべてのレイヤーをAlt + Command + Aを押すことで、一発でまとめて選択してくれる時短テクニックのショートカット。

ショートカット９ レイヤーのグループ分け

レイヤーだらけのPSDファイルを編集するのは大変な作業です。すこしで楽にするために、フォルダ分けしておきましょう。Commandキーを押しながら、グループにしたいレイヤーを選択することができます。

ショートカット10 色をリセット

デフォルト設定の描画色/背景色の組み合わせ、黒/白に戻したいときはDをワンクリックで完了です。

ショートカット11 配色の切り替え

ショートカットXキーを押すと、描画色と背景色を切り替えてくれます。レイヤーマスクを作業しているとき、白/黒ブラシの切り替えにも便利です。

ショートカット12 階調の反転

イメージ写真を反転させたいときに使えるショートカットCommand + I。完成したWebデザインをモノクロで確認したいときにも便利です。

ショートカット13 レイヤーの自由移動

Spaceバーを押している間は、自由にレイヤー内を移動できるもっとも早く、直感的に操作できます。また「選択ツール」を選択しているときに、マウスを話す前にSpaceバーを押すことで、選択範囲を自由に移動できます。

ショートカット14 選択を解除

選択しているレイヤーが複数の場合も、問題なくすべての選択を解除することができるショートカット操作。

ショートカット15 描画モードを乗算にする

選択ツールを選択している状態でショートカットを押すと、レイヤーの描画モードを「乗算」に変更することができます。同様に「ブラシ」ツールや「塗りつぶし」ツールでも、描画モードを変更可能です。

ショートカット16 描画モードをスクリーンにする

選択ツールを選択している状態でショートカットを押すと、レイヤーの描画モードを「スクリーン」に変更することができます。同様に「ブラシ」ツールや「塗りつぶし」ツールでも、描画モードを変更可能です。

ショートカット17 描画モードをオーバーレイにする

選択ツールを選択している状態でショートカットを押すと、レイヤーの描画モードを「オーバーレイ」に変更することができます。同様に「ブラシ」ツールや「塗りつぶし」ツールでも、描画モードを変更可能です。

ショートカット18 描画モードをソフトライトにする

選択ツールを選択している状態でショートカットを押すと、レイヤーの描画モードを「ソフトライト」に変更することができます。同様に「ブラシ」ツールや「塗りつぶし」ツールでも、描画モードを変更可能です。

ショートカット19 描画モードを輝度にする

選択ツールを選択している状態でショートカットを押すと、レイヤーの描画モードを「輝度」に変更することができます。同様に「ブラシ」ツールや「塗りつぶし」ツールでも、描画モードを変更可能です。

ショートカット20 描画モードを覆い焼き（リニア） – 加算にする

選択ツールを選択している状態でショートカットを押すと、レイヤーの描画モードを「覆い焼き（リニア） – 加算」に変更することができます。同様に「ブラシ」ツールや「塗りつぶし」ツールでも、描画モードを変更可能です。

ショートカット21 描画モードをカラーにする

選択ツールを選択している状態でショートカットを押すと、レイヤーの描画モードを「カラー」に変更することができます。同様に「ブラシ」ツールや「塗りつぶし」ツールでも、描画モードを変更可能です。

ショートカット22 背景レイヤーの選択

PSDファイルの中に何百というレイヤーが利用されている場合、背景レイヤーを選択するにはレイヤーパネルの一番下までスクロールしなければいけません。Alt + ,を押せば一発で背景レイヤーを選択してくれる時短テクニック。

ショートカット23 定規の表示/非表示

ガイドラインとして定規が必要なときはCommand + R。必要なときだけ表示しておくができるので、ワークスペースの邪魔にもなりません。

ショートカット24 新しいレイヤーを追加

Shift + Command + Nでも新しいレイヤーを作成できますが、Altキーを加えることで、ダイアログなしで空のレイヤーを追加することが可能です。

ショートカット26 背景色で塗りつぶし

選択している範囲およびレイヤー全体を、背景色で塗りつぶすショートカット。Command + Deleteを押すことでもいつでも適用できます。

ショートカット27 描画色で塗りつぶし

選択しているレイヤーおよび範囲を描画色で塗りつぶすショートカット。

ショートカット28 フィルターの再適用

最後に利用したフィルターと全く同じ値で再適用してくれ、設定画面も表示されず作業もスムーズ。異なるレイヤーに同じフィルターを適用したいときなどに便利。

ショートカット28 ウィンドウにフィット

スクリーンサイズが大きなPSDファイルなどでは、しばしばどこで作業しているのかわからなくなってしまうことがあります。そんなときはCommand + 0を押すことで、ウィンドウサイズに合わせて調整してくれるショートカット。

ショートカット29 100%にズーム

どんな倍率で作業をしていても、Command + 1を押すことで、元のカンバスサイズで表示してくれます。

ショートカット30 ファイル間を移動

いくつもPSDファイルを開いているときに便利なショートカットで、Control + Tabを押すたびにファイル間を移動できます。

ショートカット31 カラーピッカーを表示

ペイント系ツール（ブラシや塗りつぶしツールなど）を選択した状態でショートカットキーを押すと、カラーピッカーパネルが開き、描画色を決めることができます。

ショートカット32 描画モードを通常にする

選択ツールを選択している状態でショートカットを押すと、レイヤーの描画モードを「通常」に戻すことができます。また「ブラシ」ツールや「塗りつぶし」ツールでも描画モードを変更可能です。

参照元リンク : Killer Tip #3: 32 Photoshop Shortcuts a Pro should know – FXRay

Photoshopと並んで人気のデザイン編集ツール、Illustrator（イラストレーター）。昨今のフラットスタイル人気から見られるイラストレーションデザインとの相性がよく、ベクター素材なので自由にカスタマイズできる点も人気の理由です。

今回はダウンロードしてすぐに活用できる、高品質な無料ベクター素材をまとめてご紹介します。どれも無料ダウンロードできるだけなくで、どのようにデザインが作成されているか確認することもでき、Illustratorのスキルアップにもオススメです。

詳細は以下から。

ダウンロードしてすぐ使える、すごい無料ベクター素材まとめ

Library Bookshelf Vector

図書館をモチーフにして本を積み重ねベクターイラストレーションが魅力的。

Teamwork Illustration

チームワークで作業している様子を表現したイラストレーションで、フラットデザインとも合わせやすいアイテム。

100+ Free Icons

細いラインで描かれたトレンドのデザインアイコンを100種類+収録しており、IllusrtatorとPhotoshopの両方に対応しています。

80 Tiny Vector Icons

ミニアイコン80個を収録したセットで、小さいながら細かい部分まで作りこまれていて、ベクター素材なので拡大縮小も自由。

Sports Icons 32 Free Vectors

バスケットボールやゴルフ、アメフト、サッカーなどスポーツを連想させるアイテムを揃えたベクターアイコン素材32個セット。

Pictograms Giveaway Reloaded

丸みのあるアウトラインで描かれたベクターアイコンセットで、70種類のユニークで遊び心のあるデザインが並びます。

120 Vector Icons

5種類のカラーバリエーションで120個のアイコンを揃えており、AiやSketch，EPS、SVGファイルを収録しています。

Fabicons

80種類のフラットスタイルで作成されたアイコン素材をセットにしており、収録ファイル形式もPSDやAI、EPS，PDFとカスタマイズのしやすさもポイントです。

Cinema Pack Vector

映画館に関連するアイテムを中心に集めたセットで、細かい部分まで表現されたイラストが注目です。

12 Free Handmade Stamp Rings

郵便消印のようなラフなスタンプマークを作成できる12個のベクター素材。

6 Vintage Logo Kit

デザイントレンドを意識した、レトロでヒップスター系のロゴデザインキット。

10 Retro Vintage Badges vol.1

こちらも本格的なロゴデザインを作成できるキットで、テキスト文字はフリーフォントを利用しているので編集も自由自在。

6 Free Subtle Vector Textures

ザラザラとした質感をアートワークに追加できる、テクスチャ系ベクター素材セット。

Retro Patterns Vector

レトロな配色に手書きイラスト風デザインが素敵なパターンテクスチャ素材で、自由に配色も変更可能となっています。

Comic Book Page Elements

海外の漫画ででてくる効果的な爆発音や煙などをまとめたセット。

Vector Laurel Wreaths

月桂樹のみを集めたベクター素材で、あまり見かけないタイプのリースまで収録された幅広いバラエティ。

Label Wheat Silhouette Set

月桂樹をモチーフにしたアイテムを中心に10種類が揃っています。

Premium Floral Logo Templates

手書きのかわいい花がらを用いたロゴを完成させるデザインテンプレート素材。

Cute Set of Save the Day Label

かわいいラベルロゴデザインを作成できるベクターキット。

Year of the Goat with Icons

中国と日本がごちゃまぜになったアジア系アイコンでかたどられた羊マーク。

Woman Silhouette Background Vector

まるで音楽アルバムカバーのようなポップなアートワークが印象的なベクター素材。

Valentine Vector Design Elements

バレンタインに関連するタイポグラフィーデザインを揃えており、キュートな配色だけでなく編集可能なフォントも◎。

A Valentine’s Day Vector Banner Kit

バレンタインに関連する広告バナーを各種サイズで取り揃え、9種類のかわいいデザインパターンが収録されています。

Valentine Day Icons

バレンタインにまつわるデザインアイコンを揃えており、直感的に分かりやすいピクトグラムデザインが素敵です。

Floral Love Decoration Vector

かわいい花がらで構成されたバレンタイン向けデザインエレメントが揃います。

Classic Swirls Vector Template

クラシックなデコレーション飾りを揃えており、組み合わせることでロゴを作成できるデザインキット。

Vintage Floral Elements

ビンテージな花がらデコレーションデザインパーツを収録したセット。

Background with Calligraphic Ornaments

手書きでデザインされたデコレーションオーナメント素材。

Tetured Hearts

手書きでハート型にデコレーションを加えた、トライバルタトゥーのようなデザインスタイルが素敵です。

サムネイル@ : Welcome to the City Free Vector – Freepik.com

食べものに関連するデザインプロジェクトは、しばしば制作に困ってしまうケースも多いのではないでしょうか。たとえば、美味しそうな料理の写真を撮影するのはむずかしい作業ですし、どやって美味しそうな食事の匂いをどのように伝えることができるでしょう。

制作時にポイントを押さえておくことで、レストランやカフェなど飲食系ウェブサイトをより魅力的に仕上げることができます。使いやすいサイトを作成することが大前提で、ユーザーがお腹を減らし、店に到着する前にすべての情報を確認できることが、最終的な目的となります。今回は、飲食系ウェブサイト制作で気をつけたいポイント10個をまとめてご紹介します。

詳細は以下から。

飲食系Webサイト制作で気をつけたい10個のポイントまとめ

ポイント１ 美味しそうな写真を用意しよう

まずはじめにもっとも簡単そうにみえて、なかなか大変な作業になるかもしれません。特に美味しそうな料理の写真を撮影することはむずかしく、プロのカメラマンの力が必要かもしれません。

美しく撮影された食欲をそそる写真と、撮影スキルの低い写真とでは大きく異なり、最悪の場合Webサイト全体のイメージを壊してしまうことにもなりかねません。

色のうすい、またはカラフルな食器を用いましょう。照明がポイントになり、イメージ写真全体が明るくなるように心がけましょう。量の少ない料理では、大きな器や皿を利用することで見栄えを良くすることができます。野菜は特に見た目をアップしてくれ、色数を増やすだけでなく美味しさを引き立ててくれるでしょう。

ポイント２ メニュー表を作成しよう

実際に外で食事をしようとすると、ユーザーは訪れるお店にどのようなメニューがあるのか、事前に確認することも多いでしょう。ウェブサイトに対応したメニューを作成することが必要になってきます。（PDFのメニュー表を公開する以外の方法で。）

メニュー表を作成するときは、インタラクティブでユニークな仕掛けも同時に考えてみましょう。ユーザーの食欲をそそることを考え、料理の簡単な紹介やイメージ写真、値段も一緒に記載しておくと良いでしょう。

メニューを定期的にアップデートすることもお忘れなく。もしユーザーがレストランに到着したときに、そのメニューを取り扱ってないと知ったらがっかりしてしまうでしょう。

ポイント３ 所在地を記載しよう

Googleマップを代表する地図ツールを、ウェブサイトに導入しましょう。住所はもちろん、モバイル端末でも利用可能なマップツールが重宝するでしょう。特に外出時には、どのくらいでレストランまでかかるのか確認でき、より快適なユーザー・エクスペリエンスを実現します。

ポイント４ オンラインサービスを活用しよう

使い勝手のよいWebサイトを作成するのが成功への鍵となります。ユーザー・フレンドリーなツールを導入することが、ユーザーの手助けとなるでしょう。たとえばオンラインから注文や配達を指定できたり、オンライン予約ができたり、お店のイベント予定をカレンダーから確認できると良いでしょう。

どのツールも簡単に見つけられ、利用できることが条件となります。すべての情報をスッキリとまとめることで、売上の改善にもつながります。オンラインツールを導入するメリットとしては、ゼロからサービスを作成する必要がないという点です。数多くのオンラインサービスが展開されているので、サイトに見合ったツールを選びましょう。

ポイント５ 魅力的なコンテンツを増やそう

ユーザーが訪れて楽しくなるサイト作りを心がけましょう。お店に関連する情報を加えることで、ユーザーのウェブサイトでの滞在時間を増加させることにつながります。

レストランやカフェの歴史を紹介したり、お店の目玉メニューが完成するまでのストーリーを公開してみましょう。またレストランの受賞歴などもリストアップしましょう。ブログコンテンツやギャラリー用ショーケースを追加し、ユーザーがサイトに戻ってきたくなるコンテンツを増やすことも大事になってきます。

ポイント６ コンテンツを盛りあげよう

お店の雰囲気にあったカラー配色を心がけましょう。多くのレストランWebサイトでは明るく、快活な色使いが好まれます。たとえば赤色は、ユーザーの食欲を刺激する色として知られています。そのため飲食関連のプロジェクトには、赤色が使用されているケースが多くあります。他にもお店のブランドカラーを考慮した、カラーパレットを利用してみましょう。

また提供する料理との色によるコラボレーションを考慮しましょう。コントラストを強くすることで、料理をより魅力的にし、背景を際立たせることができます。

ポイント７ モバイル端末に対応しよう

ユーザーフレンドリーな飲食系Webサイトは、あらゆる端末で表示できることが重要になってきます。画面幅に応じてレイアウトが切り替わるレスポンシブデザインや、機能を最小限に押さえたモバイルバージョンは必須です。たとえばあなたが外出していて、食事できる場所を探しているとしましょう。こんなとき、モバイル端末でばっちり表示されるWebサイトは魅力的と言えるでしょう。

メイン機能となるオンライン注文やメニューなどが、モバイル端末でも正しく表示されるのを確認しましょう。また同時にGoogleマップなど、必要最低限の機能も重要となるでしょう。

ポイント８ ソーシャルメディアを活用しよう

ソーシャルメディア系ツールを利用することで、よりユーザーが興味を惹くきっかけとなります。大きなレストランなどでは、サービス内容や特別イベント、クーポンなどをソーシャルメディアを通じて発信しています。

通常レストランを訪れるユーザーは、興味を引かれたところで食事をする傾向があります。ユーザーがFoursquareなどのチェックインツールを利用する手助けをすることで、口コミが広がりやすくなります。

特にソーシャルメディアを通じて、特別割引やクーポンを発行することでよりシェアされやすくなります。実際に食事をした人の口コミほど強力なツールはありません。料理を撮影したフォトギャラリーを作成し、実際にユーザーが食事している写真などを追加していきましょう。（Instagramのような写真加工も効果的です。）

ポイント９ 口コミサイトを活用しよう

あなたのレストランやカフェを評価、口コミするオンラインツールへのリンクを追加しましょう。Yelp（日本では食べログなど）などを導入することで、ユーザーは見慣れたフォーマットでお店の評価を確認することができるでしょう。

もうひとつの方法として、ユーザーのレビューを掲載する方法です。よく訪れるユーザーにインタビューを行い、お店の魅力について語ってもらうことで、はじめてのユーザーが訪れる動機づけにもなります。

ポイント10 基本情報も忘れずに

レストランやカフェの現住所や営業時間、お問い合わせフォームなども基本的な情報は、見つけやすい場所に配置しましょう。また予約が必要だったり、ドレスコードがある場合なども記載しておくことと良いでしょう。ユーザーがフィードバックしやすいように問い合わせフォームを追加したり、プロモーションや特別割引情報をお届けするメールマガジンへの登録を促すことも有効でしょう。

さいごに、。

レストランやカフェなど飲食店に関する、デザインプロジェクトは複雑になりがちです。しかし正しいプランニングト設計は、ポイントを押さえることで難しくはありません。ユーザーの使いやすさを考慮し、上記でまとめたポイントをうまく採用することが重要になります。

配色やイメージ写真を活用しながらサイトの使いやすさを考えて設計したり、ユーザの位置情報を示すジオロケーション・ツールが、デザインプロセスにおいて重要な課題となるでしょう。みなさんも素敵な飲食系Webサイトを作成してみてはいかがでしょう。

• 思わず行ってみたくなる！美味しそうな飲食系Webサイトデザインまとめ
• 食欲を刺激する、レストランやカフェなど飲食系Webサイトデザインまとめ
• カフェやレストランのWebデザイン制作トレンド5個まとめ 2012年版

参照元リンク : Designing a Truly Delectable Resturant Website – DesignModo

ダウンロードしてすぐに使える、無料デザインテクスチャ素材を不定期でまとめています。今回は今年はじめてとなる、2015年1月版まとめです。

海外デザインブログCSS Authorで、使い勝手の良い新作無料テクスチャ素材をまとめたエントリー「Best Collection of Free Textures」が公開されていたので、今回は特に気になったアイテムと、個人的にブックマークしておきたい無料素材をまとめてご紹介します。

Webサイトの背景デザインなどにそのまま活用しても良いですし、デザインに困ったときに重ねるだけで質感をアップしてくれたり、思わず使ってみたくなるアイテムが中心に揃っています。

詳細は以下から。

無料デザインテクスチャ素材コレクション

Free Aluminium Foil Textures Pack

アルミ箔をクシャクシャにして伸ばした、独特のラメ感を演出できるテクスチャ素材。

Curved Raw Wood Texture

ウッドテクスチャの曲面加工が特徴で、背景デザインに活用しやすく、PSDファイルで収録されています。

Dirty Screen Textures

古いカメラで撮影されたようなビンテージ感を演出できるアイテム。アートワークに重ねるだけの手軽さも◎。

10 Chalkboard Textures

すこし傷ついたリアルな汚れまで再現された、黒板テクスチャ素材10枚を収録しています。

High Resolution Folded Paper Textures

紙を折りたたんだような加工ができるテクスチャ素材で、お好みのデザインに重ねたら、レイヤーの不透明度および描画モードを調整して完成です。

12 Paper Textures

デザインの仕上がりをグッと良くする紙テクスチャは、ストックしておくといざという時に助かるアイテムですね。

3 Recycled Paper Textures

再生紙を使って作成されたテクスチャ素材で、淡いパステルカラーの質感が絶妙です。

Squared Paper Textures

ザラザラとした用紙にプリントされた方眼紙ノートのPNGテクスチャ素材。

10 White Style Textures

平凡な白背景ではなく、味わいのあるスタイルを探しているときに活用したい、10種類の異なる白テクスチャが揃います。

Vintage Paper Textures

背景として利用することで、デザイン作品ぬくもりのあるレトロ＆ビンテージ感を演出できます。

Vector + Raster Grit Textures

PhotoshopとIllustratorで編集できる、デザインの仕上げにグランジテイストを追加できるベクター製テクスチャ。

Rough Times Texture Pack

ザラザラとした質感のテクスチャ素材で、モノクロベースとなっているのでデザインにも活用しやすいビンテージ系アイテム。

Bitmap Grime Textures

こちらも作品に重ねるだけでレトロな質感をアップしてくれる素材で、描画モードはデザインにもよりますが「オーバーレイ」または「スクリーン」がオススメです。

Black Leather

革素材の質感をそのまま再現したレザーテクスチャ。

Watercolor Texture Pack #1

カンバス生地に水彩ペイントしたような、淡いグラデーションが魅力的なテクスチャ素材。

Blurred Background Actions

Twitterでツイートすることがダウンロードできる仕組みとなっています。

17 Free Blurred Backgrounds vol.2

エレガントな色使いが印象的なテクスチャ素材で、ゴールドやピンクなどの美しいグラデーションを使ったぼかしエフェクトが素敵。

Blend Wallpaper Pack

デスクトップやノートパソコン、タブレットなど端末ごとにサイズを揃えたテクスチャ素材セット。

10 Polygonal Background Photos

ポリゴンスタイルと美しい風景イメージ写真を組み合わせた、幻想的なアートワーク系テクスチャ素材10枚セット。

30 Free Polygonal / Low Poly Background Textures

カラフルな美しい配色が印象的な、ポリゴンスタイルのテクスチャ素材30枚が揃います。

Free Polygonal / Low Poly Background Texture #24

Free Polygonal / Low Poly Background Texture #21

Free Polygonal / Low Poly Background Texture #25

Free Polygon Backgrounds

デザイントレンドにもなっているポリゴンスタイルに、ライティングエフェクトやぼかしエフェクトなどさまざまなデザインスタイルを組み合わせたテクスチャ素材が揃っています。

Free Textures 10

宇宙空間のキラキラ光る星空を表現したテクスチャ素材4枚セット。

8 Brick Wall Textures

背景やWebサイトなどに活用しやすい、レンガ作りの壁テクスチャ素材8種類をまとめています。

Free High Quality Grunge Wall Textures

ザラッとしたグランジ感を演出できる、さまざまな壁を撮影したテクスチャ素材セット。

Subtle Abstract Backgrounds

紙幣などに印刷されていそうな、シンプルな幾何学模様をモチーフにしています。

35 Free Hi-Res Denim Textures

さまざまな色落ち具合をたのしむことができる、デニム生地を撮影したテクスチャ素材35枚セット。

Ripped Cardboard Textures

ビリっと破れたダンボール紙で、デザイン素材としても使いやすいアイテムのひとつ。

サムネイル@ : 10 Free Grunge Textures – GraphicFuel.com

毎月新しく公開されたフリーフォント素材をまとめてご紹介しています。今回は今年一回目となる、2015年1月度まとめとなります。

年末年始にかけて多くのフリーフォント素材が公開されています。2014年後半より人気のビンテージ系手書きスタイルや、エレガントで美しい筆記体スタイル、使い勝手の良いシンプル素材、日本語フリーフォントなど幅広いセレクションを揃えています。

詳細は以下から。

デザイナーがダウンロードしておきたい、すごい無料フォント素材まとめ

Againts Typeface

インクペンで走り書きされたスタイルが印象的で、そのままポスターデザインなどにも良さそうなフォント素材。

※　個人、商用利用可能

Vintage & Eroded

今月特に印象的だったのが、花がらモチーフのアルファベットフォント。こちらの記事で詳しく触れています、参考にいかがでしょう。

※　個人、商用利用可能

Carioca Font

果物のようにフレッシュな色合いが素敵なフォントで、Illustratorで編集可能なEPSファイルで収録されています。

※　個人、商用利用可能

Audimat 3000

看板のロゴをモチーフに、グリッドを利用しデザインされたフォント素材で、Regularスタイルを無料ダウンロード可能。

※　個人、商用利用可能

Elisabeth

クラシックスタイルの太字フォントは、ロゴや見出しタイトルに最適なアイテム。

※　個人利用可能

D Hanna Soft

フォントの端を丸くすることで、親しみやすいソフトな印象を与えてくれる素材。Regularスタイルを無料ダウンロード可能。

※　個人、商用利用可能

Panton Font

Webフォント用に読みやすさなど最適化されたスタンダードフォント。4種類のフォントウエイトを無料ダウンロード可能。

※　個人、商用利用可能

Slash

角ばったフォントスタイルが、ポスターやフライヤーなどクリエイティブな分野との相性も◎。

※　個人、商用利用可能

Retro

文字に飾りのないセリフスタイルと、角のあるスラブ・セリフスタイルを手書き風に表現したフォント素材2種類。

※　個人、商用利用可能

Comic Spurs

かわいらしいコミックフォントに、レトロなグランジ感を加えたヒップスター系デザインフォント。

※　個人、商用利用可能

Cabana Font

細い手書きラインが、親しみやすい雰囲気を演出してくれるフォント素材。

※　個人、商用利用可能

Besom

筆でペイントしたような味わい深い手書きスタイルを表現できます。

※　個人、商用利用可能

Refuge Font

かすれた手書きフォントが味わいのある素材で、ビンテージやレトロスタイルとの相性もばっちり。

※　個人、商用利用可能

Bruss Font

イタリック斜体スタイルは、手書き感を残しながら可読性も考慮された大文字アルファベット。

※　個人、商用利用可能

Texas Grunge

筆ブラシで描いたようなかすれ具合が絶妙な、手書きスタイルの太字フォント素材。

※　個人利用可能

Betty Typeface

古いオールドスクールのタトゥーアートを元に作成されたデザインフォント素材。

※　個人利用可能

Sketchtica Font

鉛筆で何度もなぞったような、ラインの細さが印象的な手書きスタイルフォント。

※　個人、商用利用可能

Paperweight Script

手書きの質感をデザインに加えたいときに使いたい、やさしいフェミニンなスタイルが魅力的。

※　個人、商用利用可能

Abbie Script

手書きの質感を残した人気の筆記体フリーフォント、$10以上の寄付で商用利用もOKです。

※　個人利用可能

Spumante

手書き感を存分に発揮できるスタイルで、結婚式の招待状などゴージャスなデザインにも素敵。Shadowスタイルを無料ダウンロード可能。

※　個人、商用利用可能

Vigneta Typeface

躍動感のあるレトロ系フリーフォントで、デザインデコレーションにこだわった筆記体が特徴。

※　個人、商用利用可能

Angelface Font

流れるような美しい筆記体書体は、使い勝手もよく幅広いデザインへ対応してくれます。

※　個人利用可能

Sharkyspot

サメ出没ポイントというユニークな名前が印象的だった、レトロ太字筆記体デザインフォント。

※　個人利用可能

Armonioso Typeface

そのままロゴデザインに活用できそうな筆記体で、有料版を購入することで商用利用が可能になります。

※　個人、商用利用可能

Jauria

フォントサイズが小さくても可読性が落ちないように考慮された、3つのスタイルが収録されています。

※　個人、商用利用可能

Lekea

ポスターや商品プロダクト用デザインでの利用を考えた、エレガントで美しい正統派フォントスタイル。

※　個人、商用利用可能

Gidole Typeface

エチオピアにある小さな町から名付けられた、ミニマルスタイルで可読性もよい万能フリーフォント素材。

※　個人、商用利用可能

Kontanter

奇抜なラインの使い方が面白い、ディスプレイ・フリーフォント素材。

※　個人利用可能

Marianina FY Bold

モダンな印象を与えてくれる、フォントの端を丸くした太字スタイル。期間限定で無料ダウンロード可能となっています。

※　個人、商用利用可能

Elkwood

太字サンセリフ系フォントで、テキストを入力するだけでスタイリッシュに魅せるスタイルが素敵。

※　個人利用可能

Galano Classic

ミニマルスタイルと相性の良い太字フォントで、無料デモ用に2種類のスタイルが用意されています。

※　個人、商用利用可能

Galano Grotesque

上記フォントを参考に、人気フォントFuturaやAvant Gardeなどを組み合わせ、特に小文字での読みやすさにこだわった書体。デモ2スタイルは無料ダウンロード可能。

※　個人、商用利用可能

Motion Control

太字で読みやすさにこだわった、見出しタイトルや強調したい部分に向いたデザインとなっています。

※　個人、商用利用可能

ChunkFive

アメリカ西部劇をモチーフにしたスラブ・セリフスタイルフォント素材。

※　個人、商用利用可能

Lev Black Distrssed

ザラッとしたノイズ感を加えたスラブ・セリフスタイルのフォント素材。

※　個人利用可能

Sekar Arum Font

縦長スタイルのセリフフォントに、テクスチャ素材の質感を加えたデザインフォント素材。

※　個人、商用利用可能

Frontenac Font

太さに応じて5種類のフォントスタイルが用意された、スラブ・セリフスタイルのフリー素材。

※　個人利用可能

Fonesia

マジックペンで手書きしたようなラフさを演出した素材で、3種類のフォントウエイトが用意されています。

※　個人、商用利用可能

Brooklyn Typeface

フォント好きのデザイナーが週末を利用して作成した、ディスプレイ太字フォントスタイル。追加テキストウエイトもアップデート予定。

※　個人、商用利用可能

Racing Font

レーシングサーキットで使用されている、ペンキ文字をモチーフにした太字デザインフォント。

※　個人利用可能

Liquido Free Font

水面がユラユラした様子を再現した、太字フリーフォント素材。

※　個人利用可能

Metropolis Free Typeface

1920年代の映画にインスパイアされて作成された、デコレーション系デザインフォント素材。

※　個人利用可能

Grafter Font

植物の芽が出てくる様子をモチーフにしたデコレーションフォント。

※　個人利用可能

Farewell Pro

星座をモチーフに、点を線でつないだデコレーションフォントで、数字や記号にも対応しています。

※　個人、商用利用可能

Lovelo Inline

丸っこい線のみで描かれたインラインスタイルで、デザイン性だけでなく読みやすさもばっちり考慮されています。

※　個人、商用利用可能

Natasha

太字で表現されたモダンスタイルのフォント素材で、見出しタイトルなどにも使いやすいアイテム。

※　個人利用可能

Wild Space

キャンプや湖そばのバンガローなど、アウトドアを想定したフォント素材。

※　個人、商用利用可能

コーポレート・ロゴ

いわゆる企業やサービスで使われているような、モダンでシンプルなロゴ文字をイメージしたフォントです。そのままロゴタイプとして使用することも、ロゴ作成のベース・フォントにすることも可能です。

※　個人、商用利用可能

かんじゅくゴシック

熟成された味わいとレトロな雰囲気が魅力の書体です。ガタガタとしたラフなラインが味わい深いロゴ・見出し用のデザインはまさに完熟。

※　個人、商用利用可能

ぼくたちのゴシック２レギュラー

やわらかくて、やさしい日本語フォントです。ハネを少し柔らかく、全体的に丸みを帯びた字形にリニューアル。親しみやすい優しい印象の角ゴシックです。

※　個人、商用利用可能

源影ゴシック・源抜ゴシック

従来の環境では実装がむずかしかったシャドー処理や、アウトライン化したフォントを簡単に使用することができます。

※　個人、商用利用可能

サムネイル@ : Rancho Free Typeface – Nach-Oh!

WordPressを利用したウェブサイトが増えていますが、無料ダウンロードできる豊富なテーマやプラグインを使った、手軽なカスタマイズも人気の理由です。

海外デザインブログTutorialzineで、さまざまな用途で活用できる2014年公開の無料WordPressテーマ素材をまとめたエントリー「The 30 Best Free WordPress Themes of 2014」が公開されていたので、印象的なアイテムをまとめてご紹介します。

どれも高品質で、多機能なテーマが揃っており、ビジュアルにおいては2015年のデザイントレンドを反映しているケースが多いようです。あたらしいデザインプロジェクトの参考にしてみてはいかがでしょう。

詳細は以下から。

2014年公開のベスト無料WordPressテーマまとめ

Tracks

サムネイル画像にこだわったミニマルスタイルのWordPress無料テーマ。フラットデザインを採用し、配色や太字タイポグラフィーの使い方や配置など、デザイントレンドをうまく活用しています。

デモページ   ダウンロードページ

Perfetta

機能を詰め込みすぎずに、ミニマルデザインを目指したテーマ。シンプルながらスムーズなページ遷移アニメーションや、テキスト文字の配置など細部にこだわりを魅せています。

デモページ   ダウンロードページ

Fukasawa

左固定サイドバーを採用したテーマで、Pinterestのようなグリッド状にコンテンツを並べることができます。

デモページ   ダウンロードページ

Daily

ヘッダーにフルスクリーン写真を採用し、余白スペースをたっぷり取ったミニマルスタイル。フッターに配置されているナビメニューはスクロールすることでページトップに固定されます。

デモページ   ダウンロードページ

Radcliffe

各コンテンツごとにイメージ写真を重視した、フルスクリーンレイアウトが採用されており、モバイル端末からのアクセスがますます増えてくるこれから需要が増えそうなアイテム。

デモページ   ダウンロードページ

Farben

レスポンシブでモバイル端末にも対応したイメージスライダーや、ユニークなグリッド分けがされたコンテンツ用レイアウトなど、インタラクティブな企業、個人サイトを制作したい方へ。

デモページ   ダウンロードページ

OneEngine

マルチに活用することができるWordPressテーマで、60+のCSSアニメーションやGoogleフォントライブラリー、ページビルダーを含む管理画面の充実度も満点。

デモページ   ダウンロードページ

Perkins

内容が豊富なブログメディアにオススメしたい、ビジュアルにこだわったマガジンスタイルのWordPressテーマ。背景イメージなども変更可能で、カスタマイズのしやすさもメリット。

デモページ   ダウンロードページ

Enlightenment

ランディングページの作成を得意とした、豊富なデザインコンポーネンツを収録したWordPressテンプレート。ダッシュボードでの管理しやすさも考慮された、初心者向けテーマ。

デモページ   ダウンロードページ

Ultimate

どんなプロジェクトにもマッチするフラットスタイルに、パララックス・エフェクトなどデザイントレンドを考慮したテンプレートとなっています。

デモページ   ダウンロードページ

Serene

ビジュアルを重視したモダンなWordPressテーマで、スッキリとした美しいレイアウトに、滑らかなアニメーションが素敵です。

デモページ   ダウンロードページ

Hoffman

こちらもミニマルスタイルが魅力的なWordPressテーマで、管理画面からアクセントカラー、文字テキスト変更などもできるので、個人カスタムにも適しています。もちろんレスポンシブ対応。

デモページ   ダウンロードページ

Rams

ブログを楽しむことを目的に開発された、無駄を一切省いたミニマルWordPressテーマで、あらゆる端末での表示を可能にしたレスポンシブなレイアウトも魅力的。またスクロールするたびにコンテンツを自動読み込みするする、無限スクロールも採用されています。

デモページ   ダウンロードページ

Portfolio

デザイン制作実績や撮影したイメージ写真などを手軽に、そして無料で公開できるミニマルWordPressテンプレート。ページを移動に実装されたアニメーションエフェクトは、思わずクリックしたくなります。

デモページ   ダウンロードページ

InstantWP

人気HTMLフレームワークBootstrapを採用した、カスタマイズしやすいWordPressテンプレート。特にイメージ写真を多用するポートフォリオや、ギャラリーサイト向けレイアウトが中心。

デモページ   ダウンロードページ

Storefont

WordPressでオンラインストアを作成したいときに重宝するテーマで、ショッピングカート系プラグインWooThemesに対応し、ユーザーフレンドリーなレイアウトが好評です。

デモページ   ダウンロードページ

Zerif Lite

CSSアニメーションによるコンテンツのフェードインが美しい、ランディングページ作成に適したWordPressテーマ。

デモページ   ダウンロードページ

Moesia

企業サイト向けの11種類のコンテンツレイアウトが用意されたテーマで、どのページにもパララックスエフェクトが採用されており、インパクトのあるビジュアルを楽しめます。

デモページ   ダウンロードページ

Minimable

Webサイト制作に必要なデザイン機能が豊富で、ビデオ動画背景やクリエイティブなランディングページの作成が可能なテーマ。

デモページ   ダウンロードページ

Twenty Fifteen

さいごは、2015年の新しいデフォルトテーマが発表されていました。ミニマルデザインに無限スクロールを使い、よりコンテンツを強調したテーマとなっています。

デモページ   ダウンロードページ

参照元リンク : The Best 30 Best Free WordPress of 2014 – Tutorialzine

毎月Photoshopの新しいデザインテクニックを利用したチュートリアル、作り方をまとめています。今回は2015年1月度まとめとなります。

覚えておくと便利なテクニックや、Photoshopでのデザインがより楽しくなるチュートリアルを中心にまとめています。2015年のデザインプロジェクトに活用してみてはいかがでしょう。

詳細は以下から。

Photoshopことはじめ！参考にしたいすごいチュートリアル、作り方まとめ

ファンタジー感あふれるポートレイト写真加工をする方法

2枚のイメージ写真を重ねることで不思議な色合いを表現することができる、多重露光テクニックの動画チュートリアル。英語となりますが、つまずきそうな細かい部分までていねいに解説されていてオススメ。

どんなイメージ写真もイラスト風に仕上げるテクニック

チュートリアルでは用意したダンベルの写真を使い、黒板と同じ素材の壁にイラストやテキスト文字を描いています。

バリンと割れたガラスイメージのデザイン方法

実際にガラスを割って作成したカスタムブラシを使い、どんな写真にもエフェクトを加えることができます。

超能力のようなスフィアライトをデザインする方法

ペンツールで描いたパスにレイヤースタイルを加えるだけの手軽さで、過去にも日本語チュートリアルで紹介しています、参考にいかがでしょう。

ぼかしエフェクトを有効に活用する方法

CCで強化されたぼかし機能をより使い込みたい、そんなひとにオススメの動画チュートリアル。

自由自在にオーロラを操ることができるデザインエフェクト

テクスチャ素材を利用することで、どんな色のオーロラデザインでも好きな部分に反映させることができます。

ダイナミックな光フレアをデザインする方法

イメージ写真にまばゆく輝くフレアデザインを、お好みのカラーで追加することができます。

髪の毛の色を自由に変更する方法

レイヤーマスクで選択した髪の毛部分のみを、調整レイヤーで色変更するテクニックを紹介しています。

Photoshopで口ひげを伸ばす方法

なかったはずのヒゲを自由に追加、消去することができる魔法のようなレタッチテクニック。

背景を完全に真っ白、真っ黒にしてしまう方法

特にフード料理写真をメニュー表に利用するときなどに、有効的なデザインテクニック。

人間と壁をシームレスに合成する方法

まるで洋服と壁紙がつながっているような、不思議なデザインエフェクトを完成させます。

写真と手描きスケッチを合成してデザインする方法

用意したバラの花の写真をベースに、半分だけ手描きスケッチのようなグランジスタイルを実現します。

超インパクトのある映画ポスターデザインを作成する方法

映画「ターミネーター（英: the Terminator）」をモチーフに、空撮した町並みにガイコツが浮かび上がる本格デザインチュートリアル。

手書きスケッチをPhotoshopでペイントする方法

鉛筆などで手描きしたイラストのパスを取る方法にはじまり、スクリーンプリントのような味わい深い作品に仕上げる過程を解説したチュートリアル。

ビンテージテイストのTシャツ用デザインテンプレートを作成する方法

PhotoshopとIllustratorを駆使した、フクロウとガイコツを組み合わせたイラストをデザインします。

煙の中を舞うポリゴンスタイルの小鳥をデザインする方法

写真を元にパスをひき、レイヤースタイルを加えることで、立体感のあるポリゴンスタイル風デザインをお手軽に。

まるでゲームのようなファンタジー空間をデザインする方法

Photoshopでゼロから作る本格的デジタルペイントを学ぶチュートリアルで、ゲーム用インターフェースデザインに応用することができます。

宙に浮かんだ大木をデザインする方法

背景デザインや装飾用デザインパーツにこだわることで、よりリアルな空間に仕上げることができるチュートリアル。

Photoshopを使ってゴージャスな合成写真をデザインする方法

あらかじめ用意した複数のイメージ写真を利用することで、オリジナル写真と全く異なるデザインに仕上げてしまうプロテク。

メラメラと燃える炎を写真に合成する方法

ポイントは炎テクスチャレイヤーの描画モードを「スクリーン」にすることで、不要な背景部分のみが透明になります。

写真のようにリアルなペイントイラストレーションの作り方

撮影した愛犬の写真を、まるで水彩画でペイントしたようなアート作品に仕上げるデザインチュートリアル。

風刺画風イラストレーションの作り方

撮影した写真を元に、相手の特徴をうまく誇張したユニークなイラストレーションを完成させます。

あらゆるパーツをピクセルアートで作成する方法

ピクセルアートをどのようにつなげたり、増やしたりするのか紹介されており、より実践的なテクニックが満載です。

テクテクと歩く猫のイラストGIFアニメーションの作り方

動物の骨格を理解することで、よりリアルな歩き方を表現することができる本格派GIFアニメーションを作成します。

どんな写真でもまっすぐに修正する方法

手持ちで撮影したときに起こりやすい問題を、簡単に修正することができる、覚えておくと便利なテクニック。

町並みをミニチュアのようにする「ティルト・シフト」エフェクトの作り方

日常の風景をまるでジオラマのような空間に変えてしまう、ユニークな写真加工エフェクト。以前日本語チュートリアルを紹介しています。

スマートオブジェクト機能を利用した、元の写真に手を加えないスマートなデザイン編集方法

レイヤーをスマートオブジェクトに変換後にフィルタを適用することで、いつでもパネルから値などを編集することができる便利テク。

レイヤースタイルを使って、メタルテクスチャを作成する方法

カラーオーバーレイを設定することで、自由にメタルの色も変更できる点はポイント。

グラデーションが美しい3Dテキストをデザインする方法

宇宙空間をイメージした幻想的な色使いが魅力的で、特に調整レイヤーの使い方を覚えることでデザインの幅が広がりそうです。

炎が燃えているようなネオンテキストエフェクトの作り方

フレームエフェクトを適用することで、一味違うネオンデザインに仕上げることができます。

雲でリアルなテキスト文字を空に描く方法

文字ツールで描いた文字にレイヤースタイルを適用し、ブラシツールで加工するだけのお手軽チュートリアル。

光沢感たっぷりなプラスチックテキストを作成する方法

まるでプラスチック素材を使っているような、透明感に加えグロス感も追加されたテキストエフェクト。

毛糸でできたようなモコモコ系テキストエフェクトの作り方

まるで本当に毛糸でつくったような質感が素敵で、基本レイヤースタイルによる作業なので、Photoshop初心者のひとにも◎。

キラキラに輝く黄金テキストエフェクトの作り方

こちらもレイヤースタイルを適用するだけで、メタリックなゴールドの光沢感を演出できます。

クリスマスの超リアルなスノーボールを作成する方法

シーズンは過ぎてしまいましたが、今年のクリスマスに活用できそうな写真加工エフェクト。

キラキラ感満点なクリスマスツリーをデザインする方法

クリスマスツリーとトナカイの定番の組み合わせを、ダイナミックなライティングエフェクトで演出します。

PS拡張スクリプト「Velocity」を使って、手早くウェブデザインのプロトタイプを作成する方法

お好みのレイアウトの組み方を選んで、ボタンを押すだけのカンタン作業でウェブサイトの土台となるプロトタイプを作成できます。

Sketchを使ったアプリUIインターフェースのデザイン方法

Mac用デザインアプリですが、すこしずつチュートリアルを紹介しているサイトも増えているようです。

フラットスタイルの宇宙アイコンを作成する方法

かわいいイラストが特徴で、親しみやすいカラーリングはもちろん、フラットスタイルに合うドロップシャドウの付け方を詳しく紹介しています。

サムネイル@ : The Dancer – Create A Dynamic Liquid Splash Effect – 123RF

写真の一部分に、無限につづくループを加えることで、不思議な感覚にさせるシネマグラフ。もともとアメリカ人写真家Kevin BurgとJamie Beckによるファッション関連の作品で発表され、これまでにもあったGIFアニメーションをうまくリバイバルし、インターネット上でもよく見かけるようになりました。

今回は、思わず二度見してしまう素敵シネマグラフアートと一緒に、Photoshopを使ったシネマグラフの作り方チュートリアルをご紹介します。

詳細は以下から。

シネマグラフとは？

シネマグラフは、2011年に行われたニューヨーク・ファッションウィークを題材にした作品がオリジナルと言われています。何気ない日常の一コマを切り取った写真に、見つけるとちょっとうれしくなる無限ループアニメーションを加えた、ユニークなテクニックです。

まずは実際に、いくつかの作品を見てみるとよりイメージがつきやすいかと思います。

参考 写真が動き出す?!お洒落なシネマグラフGIFアニメーションまとめ

シネマグラフの作り方

撮影したビデオ動画を使って、手軽にシネマグラフを作成することができるアプリなども登場していますが、Photoshopを利用することでより自由な表現が可能になります。では実際にシネマグラフを作成してみましょう。

以下は、今回作成するサンプルGIFアニメーションとなります。

シネマグラフを作成するには、まずはじめにポイントとなる動きが撮影されたビデオ動画が必要となります。すべての動画がシネマグラフに向いているとは限らず、部分的にのみ動きがある動画が適しています。

シネマグラフ用の動画を撮影するときは、いくつかのポイントに気をつけておくとよいでしょう。

• カメラ三脚を利用しよう。: 動かしたいポイント以外は、静止画のように固定して撮影しましょう。
• エンドレスに続く無限ループを意識しよう。: 地下鉄やエスカレーターなど規則正しく動いているので、シネマグラフ用動画にも適しています。
• 写真加工エフェクトを加えよう。: 単純に見た目が良くなるだけでなく、GIFアニメーションの画質を改善してくれます。

またビデオ動画素材を利用することで、より手軽にシネマグラフを作成することができます。今回は、以下の無料動画素材を利用しています。

• Humans by Alessio Balza – Mazwai

まず選択したビデオ動画から、GIFアニメーションに使いたい部分を切り取ります。今回は動画のトリミング機能を備えたQuicktimeアプリを利用して、切り取りを行いました。

Photoshopを起動し、メインメニューより「ファイル」>「読み込み」>「ビデオフレームからレイヤー」を選択し、トリミングした動画を選択しましょう。

読み込む範囲を「最初から最後まで」にし、「フレームアニメーションを作成」にチェックを入れておきます。

ビデオ動画は、各フレームが独立したレイヤー毎に書きだされました。レイヤーパネル上で、一番下にあるレイヤー以外をグループ化（Command + G）しましょう。

シネマグラフをうまく完成させるポイントは、いかにうまく動かしたい部分にレイヤーマスクを適用するかで、完成に大きく影響してきます。ブラシツールなどを使い、細かい部分はマスクすると良いでしょう。今回はモデルとなる犬全体にマスクを適用しました。

タイムラインパネルを表示（メインメニュー>「ウィンドウ」>「タイムライン」）すると、各フレームはマスクした部分のみ表示された状態となっています。フレーム全体を表示するには、一番下のレイヤーを選択した状態で、レイヤーパレット上の「レイヤーの表示/非表示を統一」ボタンをクリックしましょう。

ダイアログが表示されるので、「一致」を選択して進みましょう。

先ほどまで部分的に表示されていたフレームが、全体表示されるようになりました。

「タイムライン」ウィンドウ上のフレームをすべて選択したら、同パネル右に配置された矢印アイコンより「フレームをコピー」を選択しましょう。

再度矢印アイコンをクリックし、「フレームをペースト」を選択したら、「選択範囲の後にペースト」にチェックを入れて進みます。

ペーストしたフレームのみが選択された状態となるので、そのまま再度パネル上矢印ボタンをクリックし、「フレームを入れ替え」を適用しましょう。こうすることでより滑らかなループアニメーションを作成することができます。

フレームの入れ替えを行ったことで、不自然なつなぎになってしまうこともあります。そういうときは、最初と最後のフレームのアニメーション速度をすこしだけ遅くしてみましょう。こうすることでよりリアルなループに近づけます。

上ステップ同様に、フレームの最後部分もすこしずつアニメーション速度を落としていきます。変だったつなぎ目も目立たなくなりました。

次に写真加工エフェクトをシネマグラフに加えていきます。スタリッシュなトレンドデザインに仕上がるだけでなく、256色の限られたGIFカラーパレットを使い、より美しく魅せることができます。メインメニューよりメインメニューより「レイヤー」>「新規調整レイヤー」>「カラーバランス」を選択し、階調ごとに値を入力していきましょう。

階調「中間調」の設定も続けて行います。

次に階調「ハイライト」を以下の用に設定しましょう。

再度新規調整レイヤーより「グラデーションマップ」レイヤーを追加し、濃い青色（#020413）からやや濃い青色（#2b4a61）、緑色（#a8c6a0）、淡黄色（#feffe6)）のグラデーションを作成しましょう。今回はレイヤーの描画モードを「スクリーン」に設定し、不透明度を落としています。

再度メインメニューより「レイヤー」>「新規調整レイヤー」>「トーンカーブ」を選択し、全体のコントラストを強調します。使用している素材に応じて変更しましょう。

シネマグラフはファイルサイズが大きくなりがちです。実際のドキュメントサイズを変更し、ファイルサイズの増加を防ぎます。

最後にメインメニューより「ファイル」>「Web用に保存」を選択し、GIFファイルで保存したら完成です。

完成

用意したビデオ動画使って、簡単なステップのみでシネマグラフを作成することができました。アイデア次第で可能性の広がるテクニック、覚えておくと良いかもしれませんね。

参照元リンク : How To Make a Cool Cinemagraph Image in Photoshop – Blog.SpoonGraphics

参照元リンク : Amazing Cinemagraphs from Around the Web – CreativeMarket Blog

Webサイトをデザインするときに活用することで、今っぽいデザインを手軽に完成させることができるPhotoshop用UIコンポーネントやWebページテンプレートPSD素材をご紹介します。

フルスクリーン背景イメージや、マテリアル・デザイン、ゴーストボタン、ハンバーガー型ナビメニュー、カード状レイアウトなど2015年のデザイントレンドを取り込んだアイテムが揃っており、気軽にスタイリッシュなデザインをたのしむことができます。

詳細は以下から。

今っぽいサイトを手軽に作成！無料UIコンポーネント＆PSDページレイアウトまとめ

Number One UI Kit

サッカーをモチーフに作成されたUIデザインキットで、試合スコアや順位表、各種選手の詳細情報をまとめたりと本格的な仕上がり。

Bussolini UI

合わせやすい青色をベースに、シンプルなフラットスタイルで再現された、モバイルアプリ用UIコンポーネント一式。

Winter iOS Design Kit

Retinaディスプレイに対応した、モバイル向けアプリ、ウェブサイト用テンプレート素材セット。ゴーストボタンなどミニマルスタイルが特徴。

EventRay UI Design

やや丸みのあるスタイルに、フラットデザインを加えることで、企業サイトなどでも活用できる万能アイテム。

Hero UI Kit

架空のスーパーヒーローを題材にしたUIコンポーネント素材で、鮮やかな配色はデザインの参考にいかがでしょう。

iOS 8 Wireframing UI Design Kit

iPhoneやiPad向けアプリやウェブサービスを開発するときに使いたい、すべてのデザインコンポーネントを完全再現したUIキット。

Benefits App

モバイル端末向けレイアウトで、オンラインショップや企業サイトのトップページなどに活用しやすいPSDテンプレート素材。

iOS 8 Keyboard Concepts

実際にiOS 8で使われているキーボードを忠実に再現しており、ホワイトとダークバージョンの他に、背景が透けた半透明バージョンも一緒に収録しています。

iOS 8 App Icon Template

最新版iOSに対応したアイコン素材を手軽に作成できるテンプレート素材で、Apple Watch用アイコンも一緒に収録されています。

Apple Watch Ui Kit

発売がたのしみなApple Watch用イラストレーションで、モバイル・アプリでの操作方法などを説明するときにいかがでしょう。

Business UI Elements

ボックスレイアウトを中心に、使いやすい色使いで作成されたフラットスタイルのUIコンポーネントを収録。

Shapes UI Design Kit

半透明のカード状デザインエレメントを中心に、ミニマルなアイコンを採用するなど、シンプルさにこだわったUIコンポーネント。

Flat UI Kit

基本的なツールとデザインのみを落とし込んだ、プロトタイプ向けPSDデザインテンプレート。

Image Hover

Webサイトで利用されるサムネイルが、マウスホバーでどのように変化するかまとめて確認できます。

無料PSDテンプレート素材まとめ

Arvi Template

スマートフォンやタブレットなどあらゆる端末でのレイアウトに対応する、オンラインストア向けテンプレート素材。全部で64種類にも及ぶレイアウトが収録されているので、サイト制作に迷ったら目を通したいアイテム。

Momentio

幅広いWebサイト制作に利用できるシングルページ完結型レイアウトで、Googleフォントを利用するなどカスタマイズ性にも優れたアイテム。

Tumblr Free PSD Template

左スライド式ナビメニューを採用し、モバイル向けレイアウトも一緒に収録したエレガントな印象のWebページテンプレート素材。

Creative Minimal Agency Webpage

各要素の背景にイメージ写真を利用するなど、クリエイティブな表現が可能なウェブサイト用テンプレート素材。

DSGN PSD Template

デザインスタジオ向けポートフォリオサイト用テンプレートで、ブロックレイアウトを利用したスタイリッシュな雰囲気が魅力です。

Photographer Template Web

イメージ写真をたくさん利用するフォトグラファーなどにオススメしたい、ビジュアルを重視したレイアウトが可能なポートフォリオ向けテンプレート。

One Page Restaurant PSD Template

レストランやカフェなどに使えるメニュー表などが用意された、ランディングページ向けPSDテンプレート。

Miami

シンプルで使い勝手の良いランディングページ向けレイアウトで、Arviテンプレートの同じデザイナーが作成しています。

Company Landing Page PSD Template

企業向けサイトを想定した、親しみやすい配色が素敵なウェブページ用PSDテンプレート素材。

Ekomers

情報をまとめて表示したいときに便利な、ランディングページ向けPSDテンプレート素材。各種コンテンツが用意されており、自由な並び替えも可能。

Buje One Page PSD Template

ヒーローヘッダーにはじまり、ポートフォリオ向けギャラリーやお問い合わせフォームなど必要最低限のUIコンポーネントが一式揃ったレイアウト。

The Grid

人口知能を使って自動でWebサイトを作成できるオンラインサービス、The Gridのサンプル用PSDテンプレート素材セット。詳しい詳細は、こちらのエントリーで触れています、参考にしてみてはいかがでしょう。

La Casa

不動産関連のサイト制作に参考にしたいテンプレート素材で、PSDファイルの他にBootstrapをフレームワークに使ったHTMLファイルを同時に収録しています。

サムネイル@ : Number One UI Kit – PixelBuddha

海外デザインブログOnextraPixelで、現在すでに流行しているデザイントレンドを中心に、2015年特に注目しておきたいポイントをまとめたエントリー「Current Web Design Trends That Have The Strength to Survive Through 2015」が公開されていたので、今回は各ポイントを要約してご紹介します。

年明けにご紹介した2015年のデザイントレンド予想21個と重なる部分も多く、モバイルとタブレット端末ユーザーがさらに増加すると予想されている今年は、よりスマートフォンを意識したデザイントレンドが多くなっているようです。

詳細は以下から。

2015年流行中！積極的に取り入れたいデザイントレンド12個まとめ

トレンド 1

レスポンシブ・デザイン

多くの人が注目しているレスポンシブ・デザインは、モバイルやタブレット端末に対応したテクニックで、もうあまり説明の必要もないかもしれません。2015年はモバイル専用サイトを用意せず、端末ごとにレイアウトが切り替わるレスポンシブデザインを採用するWebサイトがより増えてくるでしょう。

Agigen

Ooyaka

All About David

トレンド 2

ゴーストボタン

少し前から見かけるようになったトレンドのひとつで、写真イメージを背景に利用したWebサイトとも合わせやすく、ミニマルな印象を表現してくれます。特にCTA（英: Call-to-Action）ボタンなどで活用されているケースが多く、今年特に人気が集中しそうなデザイントレンド。

• ゴーストボタンを使った新しいデザイントレンド＆参考Webサイトまとめ

Werzer’s Badehaus

Portfolio of Anders Hede Jensen

The Canadian Encyclopedia

トレンド 3

タイポグラフィー

タイポグラフィーを使ったWebデザインは特に新しいものではなく、今までも使われてきたテクニックのひとつです。しかしタイポグラフィーのスタイルはすこしずつ変化しており、現在はより細字フォントを使った、巨大なレターリングが特徴です。

Studio 3

1MD + Creative Bureau

Aria Studio

トレンド 4

フルスクリーンイメージ&ビデオ

上記トレンドでもすでに紹介していますが、特にビジュアル面でのインパクトのもっとも大きなトレンドテクニック。これまでにもイメージ写真やビデオ動画を背景に利用したWebサイトはありましたが、より多くのサイトが採用するテクニックとなるでしょう。
 

Le Saint

Phorce

トレンド 5

ヒーローヘッダー

ランディングページのトップ部分に配置され、画面全体を覆うフルスクリーンのバナースタイルは、よりビジュアル的にインパクトのあるデザインに仕上がります。ときにイメージスライダーとして活用され、2〜3枚の写真を用意して、サイトのより詳しい情報や説明が記載するレイアウトが増えるでしょう。

• ヒーローイメージを利用するときに必要な、5個のデザインテクニックまとめ
• ヒーローヘッダーを使った新デザイントレンド＆参考Webサイト、素材まとめ

Chimney Group

Wise Yeti

Design Lobby

トレンド 6

パララックスエフェクト・スクロールエフェクト

一時は人気にかげりが見えたパララックス・エフェクトですが、スクロールに応じて変化するアニメーションエフェクトを使い、よりインタラクティブな表現が可能となっています。より個性のあるスクロールアニメーションを実装することで、よりユーザーがサイトを訪問したときに、楽しむきっかけとなるでしょう。

Roadtrips. South Australia

Gerber Ramonage

トレンド 7

固定/スライド式ナビゲーションメニュー

ナビゲーションメニューはこれまでも、Webサイトにとって重要なデザイン要素のひとつでした。すぐに使うことができ、直感的に理解しやすいことが重要となります。現在のトレンドは、ランディングページなどではスクロールに応じてナビゲーションメニューが表示されたり、左からスライド式で開閉するナビメニューに人気が集まっています。

• 新型ナビメニュー「ポップアウト」の実装チュートリアル＆参考Webサイトまとめ

Think Education

Hyperakt

Pauline Osmont

トレンド 8

巨大なデザイン要素

特にシングルページ完結型のウェブサイトや、ポートフォリオサイトで見かけるデザイントレンドです。手持ちの情報が少なく、メッセージを強調したいときなどにも利用でき、一緒に大きなアイコンやイラストレーション、イメージ写真やテキストと一緒に配置されているケースが多いです。

Your Local Studio

Essen International

トレンド 9

グリッドスタイルレイアウト

Pinterestが採用しているグリッドスタイルのレイアウトを指し、最近ではカードやタイル状デザインと呼ぶ場合もあります。特にイメージ写真を多用するサイトでは、レイアウトを美しく仕上げてくれます。写真家やアーティスト、オンラインショッピングサイトなど、幅広く活用することができるデザインテクニックのひとつです。

30000 Sourires

Kreativa Studio

Marcelo Duende

トレンド 10

ミニマルスタイル

ここ数年、ミニマルスタイルはWebデザインで見かけ、2014年の間にかけて急速に人気が高まったデザインテクニックです。ユーザーが注目する場所を明確に示し、より簡単に見つけることができるメリットがあります。完成すると美しいミニマルスタイルですが、本当に必要なデザインパーツだけを残すという作業は、エラー&トライを繰り返す必要となってくるでしょう。

Velvet Hammer

Cultivated Wit

R&Co Design

トレンド 11

シングルページ完結型Webサイト

上記のミニマルスタイルと一緒に利用されるケースが多いかもしれません。またこのデザイントレンドは、モバイル端末を利用するユーザーの増加が大きく関係しています。ユーザーはコンテンツごとにページを読み込むよりも、スクロールでコンテンツを表示することで操作性を向上し、よりユーザーフレンドリーなWebサイトを作成できます。

The Wild Romantic

Beard Design

トレンド 12

フラットデザイン

最後のトレンドは、現在もっとも注目されているデザイントレンドといえ、もちろんこちらもモバイルユーザーの増加が関係しています。平面的なデザインをいかにユニークに、美しく、そして使いやすくするかが、デザイナーの腕の試しどころとなるでしょう。「モバイル・ファースト」の考えが広く浸透したいま、レスポンシブデザインがより普及する今年は、特に楽しみなトレンドとなるでしょう。

• Googleマテリアル・デザインから学ぶ４つの重要ポイント + 参考UIデザイン、無料素材まとめ
• Googleマテリアル・デザインをはじめよう！参考にしたい無料素材やアイデアまとめ

Wander World

Ryan Glittings

New York Summer

おわりに、。

現在流行中のデザイントレンドの中で、特に2015年注目しておきたい12個のテクニックはまとめていまみました、いかがでしたでしょう。2015年のデザイントレンド予想と一緒に、比較してみると良いかもしれません。

2015年に流行しそうな、注目Webデザイントレンド21個まとめ

参照元リンク : Current Web Design Trends That Have The Strength to Survice Through 2015 – OnextraPixel

ウェブサイトはこれまで以上に手軽に制作できるようになってきています。ゼロからすべて作成せずに、完成したデザインテンプレートを活用することで、制作スピードを格段にアップさせることができます。

流行中のデザイントレンドを取り入れ、モダンで今どきのWebサイトを楽に制作できる、新作HTMLテンプレート素材をまとめています。もちろんどれも無料ダウンロード可能となっています。

多くのテンプレートでは人気フレームワークBootstrapが採用されており、カスタマイズ性にも優れています。またどのテンプレートもスクロールに応じたアニメーションエフェクトが注目ポイントとなっているので、デモページを確認すると分かりやすいかと思います。

詳細は以下から。

今どきのWebサイト制作が楽になる！すごい無料HTMLテンプレート素材まとめ

Strata

左サイドバーにパララックスエフェクトを採用したHTML5テンプレートで、シンプルな個人ブログにも向いています。

デモページ   ダウンロードページ

Highlights

イメージ写真をフルスクリーン背景で指定し、半透明のボックスレイアウトが、コンテンツごとにレスポンシブに切り替わります。

デモページ   ダウンロードページ

Landed

各コンテンツごとに用意されたイメージ写真は、滑らかなアニメーションが素敵なパララックスエフェクトで表現された、ダーク系HTML5/CSS3テンプレート

デモページ   ダウンロードページ

Arcadia

テキストをタイプ入力しているようなユニークなエフェクトがいい感じの、ゴールドをキーカラーに使ったモダンでスタイリッシュなHTMLテンプレート。

デモページ   ダウンロードページ

Egret

ゴーストボタンやヒーローイメージなどを採用した、今どきのランディングページ用HTMLテンプレート。スクロールでアニメーション展開する、ユニークなカード状イメージスライダー機能もオススメ。

デモページ   ダウンロードページ

Boxify

先日紹介した多彩なアニメーションや、フレキシブルなレイアウトが魅力的な高品質Bootstrap製HTMLテンプレート素材。

デモページ   ダウンロードページ

Cyrus Studio

マウスカーソルをホバーすることで多彩なアニメーションを実現した、今っぽいシングルページ完結型のWebデザインを作成したいときに。Bootstrapフレームワーク対応。

デモページ   ダウンロードページ

AppPonsive

モバイルアプリ向けランディングページを手軽に作成でき、CSSアニメーションを使った有効的なコンテンツの魅せ方は参考になりそうです。

デモページ   ダウンロードページ

Awesome Landing Page

5色のスキンカラーが用意された、フルスクリーンいっぱいに展開されたコンテンツは、見やすく要点をまとめやすいレイアウトで、カスタマイズも自由自在。

デモページ   ダウンロードページ

SmallApp

こちらもモバイルアプリ用紹介、ランディングページを想定したテンプレートで、余白スペースを十分にとったミニマル＆フラットスタイルが魅力的。

デモページ   ダウンロードページ

App HTML Template

モバイルアプリをよりうまく紹介することができる、スクリーンショット用スライダーやカスタムイメージ背景などカスタマイズ自由なComing Soonページ。

デモページ   ダウンロードページ

Material HTML

Googleのマテリアル・デザインにインスパイアされた、フリーランスやデザイナー向けポートフォリオサイト用HTMLテンプレート素材。

デモページ   ダウンロードページ

Passion

モバイル端末ユーザーが増えることでますます重要になってきた、Eメール用HTMLテンプレート。もちろんレスポンシブデザインにも対応しています。

デモページ   ダウンロードページ

Design Agency

フルスクリーンのイメージ写真を背景に使用し、ギャラリーやお問い合わせフォーム、Googleマップ埋め込みなど充実した機能を詰め込んだHTMLテンプレート。

デモページ   ダウンロードページ

Smak

ページ読み込みエフェクトやヒーローイメージ、美しいアニメーションなどデザイントレンドを盛り込んだ、シングルページ完結の無料HTMLテンプレート。

デモページ   ダウンロードページ

Leroy

ページ下に配置されたナビメニューは、スクロールすることで変化し、トップのヒーローイメージにより着目する工夫がされています。Bootstrapフレームワーク採用。

デモページ   ダウンロードページ

La Casa

住宅情報などを記載する不動産向けHTMLテンプレートで、人気の高いBootsrtapフレームワークを採用した、カスタマイズ性にも優れたテーマ。

デモページ   ダウンロードページ

Hiking

ハイキングやスポーツをテーマにしたフレッシュな色使いが素敵で、テキストとヒーローイメージの組み合わせはより効果的にビジュアルを引き立てます。Bootstrapフレームワーク採用。

デモページ   ダウンロードページ

Gridzilla

Piterestのようなカード状レイアウトに、グリッドにこだわったレスポンシブ対応のBootstrapフレームワーク採用のテンプレート。

デモページ   ダウンロードページ

Flat App

モノクロカラーをメインに使った、フラットスタイルでどんなデザインにも合わせやすい万能HTMLテンプレート。Bootstrapフレームワークは、お好みでカスタマイズできる点も人気の理由です。

デモページ   ダウンロードページ

Blue Water

サークル状イメージスライダーや、ユニークなホバーエフェクトなどデザインにこだわりを魅せるBootstrapテンプレート素材。

デモページ   ダウンロードページ

Agro Plus

農業をモチーフにみどり色をキーカラーに採用し、モダンなアニメーションも実装した合計5ページのHTMLテンプレートを無料ダウンロードできます。

デモページ   ダウンロードページ

Expandable Project Presentation

イメージ写真をタイル状に重ねたレイアウトをクリックすると、各セクションごとにアニメーション付きで展開するテンプレートで、ストーリー性を重視したいときにもオススメ。

デモページ   ダウンロードページ

3D Curtain Template

デスクトップで確認するとそれぞれのコンテンツが切り替わるたびに、奥から飛び出してくるようなアニメーションエフェクトが印象的。

デモページ   ダウンロードページ

MocKit

そして最後は、HTMLとCSSのみで作成されたフラットスタイルのiPhone 6は、黒と白の２バージョンおよび5種類のテンプレートでフリー配布されています。

デモページ   ダウンロードページ

サムネイル@ : ShapeBootstrap – AppPonsive – Portfolio Landing Page