普段利用しているソーシャルメディアのユーザーおよそ40%が、文字テキストだけの投稿に比べて、写真などのイメージを好むそうです。それだけ魅力的なビジュアルが重要になってきているということでしょう。今回は、フォトショップを利用せずデザイン編集作業できるツールやアプリをまとめてご紹介します。 ドラッグ&ドロップの手軽な操作だけでなく、オンラインやスマートフォン端末など Photoshopがインストールされていない環境でも無料で利用できるツールを中心に揃えています。用途に応じて利用してみてはいかがでしょう。 Photoshopにも負けない！無料で使える手軽なデザインツール、アプリ20個まとめ Canva Canva は、オンラインで利用できるもっともシンプルなデザインツールのひとつ。文字やシェイプの追加など直感的に行うことができ、無料で利用できる点もポイント。 料金: 無料、写真のライセンスは$1

機能的なアニメーション（英: Functional Animation）とは、論理的ではっきりとした目的を持った、控えめなアニメーションを指します。読み込み時間を短く感じさせるだけでなく、ユーザーインターフェースに生命を吹き込みます。 インターフェースデザインを掛けあわせたり、分割したり、シェイプやサイズを変更することで、まるで人間のように、生きているような動きを実現できます。ナビメニューに応じてユーザーをスムーズに移動させたり、スクリーンに応じて要素が整理、変更されるのを伝えたり、デザイン要素の階層を補強するために、機能的なアニメーションを利用するように心がけましょう。 今回は、アニメーションをうまく利用する6つの基本原則、テクニックをまとめてご紹介します。 詳細は以下から。 01. レスポンシブなアニメーション UIデザインにおいてビジュアル・フィードバック（英: Visual Fee

ますます進化するウェブデザインの世界を体感でき、コピー&ペーストで利用することもできる HTML/CSS スニペットをまとめてご紹介します。ただいま流行中のWebトレンドの実装を可能にする最新レイアウトから、どんなプロジェクトにも活用したくなるエフェクトやテクニックなどを中心にまとめています。 「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。 詳細は以下から。 コピペでOK、最新トレンドを押さえたすごい HTML/CSS スニペット40個まとめ 01. Fixed Images That Fades as You Scroll 画面を２分割し、スク

Photoshop を扱っていると、必ずと言っていいほど利用するツールのひとつがブラシです。角度や感覚、サイズのジッター、散布などの機能を利用すれば、無数のブラシデザインをつくることができます。 今回は、スタンプ感覚でペタペタと貼り付けるお手軽な素材から、まるで本物の絵筆ブラシで描いているような本格的なものまで、使いやすいアイテムをまとめてご紹介します。もちろん、どれも無料でダウンロードできます。なおブラシ素材の詳しい使い方やインストール方法は、こちらのページを参考にどうぞ。 詳細は以下から。 フォトショップを使いこなす、無料の厳選PSブラシ素材セットまとめ 2016年夏 My Brush Pack 羽や毛皮から、草花やライティング、雲、水面、森、星、メタルなどさまざまな質感を表現できる、デジタルペイントに欠かせないブラシツール。 Watercolor Spray Brushes まるで水

ほんの少しのイラストだけで、メッセージや情報をを伝えことができるアイコン。使いやすいデザインをいくつかストックしておくと、どんなプロジェクトにもいつでも活用でき便利です。 無料でダウンロードでき、デザイン制作に活かすことができるフリーアイコン素材をまとめてご紹介します。最近のアイコン素材は、Illustrator で編集可能なAi や EPS　ファイルを収録していることも多く、自由に配色やサイズを編集することができます。また、ウェブサイトでの利用が増えている SVG ファイルも揃っているので、コーディング作業にもすぐに利用することができるでしょう。 詳細は以下から。 図解でうまく伝わるデザインを！参考用すごい無料アイコンまとめ Olympics Sports Icon Set EPS, PDF, PNG, SVG オリンピック4o種目に加え、メタルや聖火トーチ、優勝カップが揃ったまさにいま

Medium で公開された「5 Actual Web Designs Trends for 2016」 by Nils Sköldの許可をもらい、日本語抄訳しています。 This article is translated from Medium (https://medium.com/). 「いつの間にか気付いたら、2016年も半分を過ぎていた。」そんなひとも少なくないかもしれません。今回は上半期の総集編として、ウェブデザイナーが押さえておきたい、実際に流行っているWebデザイントレンド5つを、サンプル実例サイトと一緒に見ていきましょう。 01. フルスクリーン表示 + スクロールなし。 スクロールしないウェブデザインが、いよいよ人気となりはじめているようです。ヘッダーの一番上にアンカーリンクを固定し、下方向にスクロールを促す単一ページのウェブサイトは、ホームページ作成のスタンダードと言

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

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

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

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

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

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

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

SFっぽい未来的なデザインに合うフォントをお探しですか？ この記事ではテクノロジー、未来SF系フリーフォントで、商用ライセンス対応の素材のみまとめてご紹介します。 2018年の初投稿から定期的に更新を繰り返し、最新版にアップグレード。 見出しタイトルやポスター、Tシャツデザインなど大きく表示するのに適した書体を中心に、さまざまなデザインに活用できる万能スタイルも一緒にまとめています。 お気に入りのSF系無料フォントを見つけてみましょう。

ブラウザやウェブサイト体験が進化したことで、さまざまなアニメーションを実装したウェブサイトや、モバイルアプリへの注目が集まっています。今回は「気持ちの良い動き」がポイントとなった、最新UIデザインをまとめてご紹介します。 余白スペースをたっぷり利用したミニマルなレイアウトから、アニメーションを加えることでよりユーザーの注目を集めるナビメニューや、ユーザーインターフェースを中心に揃えています。なかなか言葉で説明しにくい遷移フローが分かりやすく説明できるので、うまくクライアントの要望に応えることができるかもしれません。 詳細は以下から。 最先端ウェブデザインを体感する！アニメーションが美しいUIデザインまとめ Cima is Live 筆ブラシでペイントしたようなエフェクトを、各ページやコンテンツに活かした、さわやかな配色も素敵なウェブサイト用UIデザイン。 Birds of Paradise

2016年も３分の１が過ぎ、今年を代表するウェブデザイントレンドがはっきりと見えてきました。Studio by UXPin で公開されている無料Eブック「The Complete 2016 Web Design Trends Bundle」では、2016年のトレンドを10個のポイントに分けて、具体的なウェブサイトと一緒にまとめています。 今回は、デザイントレンド10個のポイントのみを、簡単にまとめてご紹介します。より詳しい内容に関しては、無料ダウンロードできるEブックで確認できます。TwitterやFacebook、Googleなどの大企業を中心とした、参考サンプル45サイトが掲載されています。 詳細は以下から。 01. マイクロインタラクション Microinteraction マイクロインタラクションは、モバイルアプリのデザインにおいて、大きなアニメーションに比べ、ユーザーがあまり考え

海外デザインブログ Canva Design School で公開された「10 Simple Ways To Enhance Your Images」より許可をもらい、日本語抄訳しています。 「百聞は一見にしかず（英: A picture is worth a thousand words.）」と言われるのには、きちんとした理由があります。 古くからよく知られているフレーズかもしれませんが、オーディエンスに向けてデザインを制作するときには、適切なアドバイスと言えるでしょう。デザインのコンセプトに、エクスペリエンス体験やリサーチを加えることで、イメージ画像はうまく注目を集めることができます。 Hubspot では、ビジュアル・コンテンツ（英: Visual Content）がいかに強力なコミュニケーションツールであるか、いくつかの統計がまとめられています。 関連する画像のあるコンテンツは、画

デザイナーがより幅広いアイデアを表現したいとき、もっとよく利用されるツールのひとつがブラシ素材です。今回ご紹介する、新作Photoshoブラシ素材を利用することで、今どきのデザインテクニックやグラフィック・トレンドを、手軽に実現することができます。 デザインに重ねるだけでレトロ風に仕上げたり、手描きスケッチや水彩ペイントなど、イラストレーションをレベルアップさせる素材を中心にそろえています。また後半では、比較的安価で高品質な、プレミアム版PSブラシ素材も一緒にまとめています。プロジェクト予算に応じて検討してみると良いでしょう。 詳細は以下から。 手描きイラストや水彩ペイントに強い、すごい無料Photoshopブラシ素材まとめ Mar-ka Brushes 初心者には難易度の高いブラシ設定をカスタムすることで、36種類のさまざまな質感を表現できます。 Magic Brush Photosho

デザインをしているときに悩んでしまいがちで、全体のイメージを決める重要な要素のひとつ、フォント選び。手持ちのフォントコレクションを定期的にアップデートして、クリエイティブな作品をつくってみましょう。 今回は、最近公開された無料ダウンロードできるフリーフォント素材をまとめてご紹介します。太さに応じて豊富なウエイトが用意された書体から、今年のトレンドでもある手書き、ブラシスタイルの他に、人気の高い美しい筆記体デザインなどが揃っています。 詳細は以下から。 デザイナーが持っていたい、すごいフリーフォント素材まとめ あさご本丸ゴシック 伝統的な雰囲気でありながらも、クルクルとしたループ状の線が個性的でモダンさを感じるエレガントな書体だそうです。 ※　個人利用可能 Margurite 流れるように美しい筆記体スタイルで、リガチャ合字なども豊富に用意された、プロユースのデザインフォント。 ※　個人利用

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。