この記事では、Webサイトやモバイルアプリにあっと驚くエフェクトを、コピー&ペーストで実装できる最新 HTML/CSS スニペットをまとめてご紹介します。 スニペット（英: Snippet）とは、一般的に「切れ端、断片」といった意味で、ウェブサイトなどのプログラミングで簡単に切り貼り、再利用できる部品を指します。 これらのスニペットを利用すれば、他のサイトではあまり見かけない差のつくデザインエフェクトを実現できます。今後のウェブ制作に活用してみてはいかがでしょう。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次 1. イメージスライダー系 2. テキストエフェクト系 3. テキストエフェクト系スニペット 4. ページレイアウト系 5. ナビゲーションメニュー系 6. ローディングアニメーション系 7. SVGアニメーション系 8. 便利、面白系スニペ

これまでAdobe After Effects（アフターエフェクト）と言えば、プロの動画クリエイター向きツールというイメージでしたが、動画をつかったコミュニケーションが普及したことで、After Effectsを活用するシーンがますます増えています。 最先端のビジュアルエフェクトとモーショングラフィックスを実現でき、柔軟にカスタマイズできますが、ゼロから制作すると時間がかかることもしばしば。そんなときは、After Effectsのテンプレートを利用して、作業を効率化してみましょう。 ここでは、無料ダウンロードできるAfter Effects用テンプレート素材厳選65個を、カテゴリーに分けてご紹介します。 コンテンツ目次 0. After Effectsとは？ 1. タイポグラフィー用テンプレート（6個） 2. ローワーサード用テンプレート（7個） 3. イントロ用テンプレート（7個） 4

海外サイト Shutterstock Blog で公開された Design: Design Resources 25 Eye-Catching Neon Color Palettes to Wow Your Viewers より許可をもらい、翻訳転載しています。 グラフィックデザインやウェブデザインはもちろん、パッケージやロゴなど、あらゆるデザイン制作の配色に利用できる、ネオンカラーの色の組み合わせ25種類をまとめています。 昨年ごろより人気となっている色鮮やかなネオンカラーは、2019年のデザイントレンドにも挙げられています。UFOを連想させるネオングリーンや、蛍光ピンクや蛍光ムラサキなどの強烈な色合いが特長で、テクノロジーやエネルギッシュな雰囲気やトーンに仕上げることができます。 コーディング向けにHEX値コピペできるカラーパレットの他、PhotshopyやIllustratorなどA

2019年がスタートし、ここ数年で急速な進歩を続けているCSSは、さまざまなオープンソースのツールがリリースされています。 CSSライブラリやフレームワーク、オンラインツールを利用することで、サイト制作の時間を節約、短縮できるだけでなく、新しいテクニックやプロパティなどに関しては、学習用ガイドラインも多数公開されています。 今回は、2019年に注目したい100種類のCSSライブラリ、フレームワーク、リソース、便利ツールをまとめてご紹介します。これからCSSを本格的に学ぶひとも、日常の業務などで普段使いしているひとも、一度は確認しておきたい内容となっています。 1. 新作CSSライブラリ 2. お役立ちCSSユーティリティ 3. CSS画像エフェクトツール 4. CSSレイアウトフレームワーク 5. CSS Flexbox フレームワーク 6. オンラインCSSツール&生成ツール 7. CS

傑作と呼ばれるデザインの裏には、多大な努力と徹底したブレインストーミングが欠かせません。誰もがそうであるように、デザイナーは期限を決め、プレッシャーを克服しながら、毎日のルーチン作業を処理する必要があります。そのことから、PhotoshopプラグインやSketchプラグイン、自動生成ツール、オンラインサービスなどのツールをうまく使うことが重要になってきます。 今回は、デザイナーの制作スピードを格段にアップする、知っておきたい最新フリーツールをまとめてご紹介します。 ウェブデザイン制作スピードが大幅アップ！覚えておきたい最新便利ツールまとめ 理想的なグラデーションを手軽に見つけることができる Coolhue や、各プラグラムの人気ショートカットをまとめた Shortcuts、特殊文字をコピペできる Copychar のようなサービスは、デザイン制作のスピードアップにつながります。 via C

ロゴを特別なものにするのは何でしょう？ロゴを魅力的にするには、デザイントレンドがどのように進化しているのか、きちんと把握しておくことが大切です。 この記事では、2019年にかけて注目したい、ロゴデザインの人気トレンド9個を予想し、まとめてご紹介しています。たくさんのデザイン事例と一緒にまとめているので、今後のデザイン制作の参考にしてみてはいかがでしょう。 デザイナーが押さえておきたい、2019年のウェブデザイントレンド10個まとめ【完全ガイド】 2019年に注目したい！グラフィックデザインの最新トレンド10個まとめ コンテンツ目次 1. 可変ロゴデザイン 2. 新世代の幾何学模様 3. 目の錯覚を利用したロゴ 4. 目的のある配色 5. ネガティブ・スペースの応用 6. ミニマリズムの変化 7. 歴史のあるロゴ 8. 重なり合うロゴデザイン 9. ディテールを最大限に活用 01. 可変ロゴ

海外サイト Medium で公開された The ultimate guide to proper use of animation in UX by Taras Skytskyi より許可をもらい、翻訳転載しています。 最近では、UIデザインのアニメーションで感動させたり、驚くせることは難しくなってきています。画面上でのやり取りを示したり、アプリケーションの使い方を説明したり、ユーザーの注意を向けるなど、実装テクニックはさまざまです。 この記事では、UXデザインにおけるアニメーションの基本原則とルールをまとめてご紹介します。これからインターフェースデザインのアニメーションを作成したいというひとが、追加情報を探す必要がないよう、アニメーションのすべてをまとめた完全ガイドです。 アニメーションの持続時間とスピード 要素の状態や位置が変更されると、アニメーションの長さは、ユーザーに変更を通知し、

「数字」にフォーカスを当て、書体の選びかたやデザインの秘訣ガイドラインを学びながら、実際に使えるフリーフォント素材20個をまとめてご紹介します。 数字デザインを選ぶときの原則事項 著者 Samantha Zhang の働く Graphiq では、データ表やチャート、インフォグラフィクスなど、細かい数字をいつもたくさん扱っています。データの視覚化では、 ほとんどのデータで Helvetica（ヘルベチカ）書体を利用していますが、フォントを選ぶときのガイドラインがいくつあります。 1. ライニングと等幅ライニング数字を選ぼう。 まずよい数字フォントを選ぶコツとして、ライニングまたは等幅ライニング数字かどうか確認しましょう。 ライニング数字（英: Lining　Figures）とは、ベースライン（英: Base Line）とキャップ・ハイト（英: Cap Height）の高さが揃っていることを指

なにかデザインをはじめるとき、無数にある色から配色を決定するのに頭を悩ませることもあるでしょう。この記事では、適切な配色カラーパレットを決めるのに役立つ８つの基本ルールを詳しく紹介します。 コンテンツ目次 1. 色数を制限しよう。 2. 自然からインスピレーションをもらおう。 3. 60−30−10ルールを試してみよう。 4. まずはグレースケールでデザインしよう。 5. 黒色を利用するのは避けよう。 6. 重要性を色のコントラストで表現しよう 7. 色を使ってユーザーの感情を引き出そう。 8. デザインを理解しやすくしよう。 9. ボーナス: デザイナー向け配色ツールまとめ 配色基本ルール１ 色数を制限しよう。 デザインプロジェクトに配色を適用するには、バランスが重要になります。色数が増えるほどバランスを取るのは難しくなります。配色は最高でも3色までに制限することで、よりよい結果となるで

CSSを使って作業をいているときに活用したい、無料で使えるオンラインツールをまとめてご紹介します。これらのツールは、制作時間を節約、短縮できるだけでなく、CSSのちょっとややこしい問題の解決ツールを想定し作成されています。 CSSをベースとしたアニメーション、レスポンシブに対応したナビメニュー作成ツール、パイチャート作成、CSSの圧縮やユニークなサークル型メニューの作成などさまざまなツールが揃っています。制作に困ったときに読み返してみてはいかがでしょう。 超便利！確認しておきたい最新CSSツール、リソースガイド 2018年度 CSSの作業をもっと楽に！無料で使えるオンライン便利ツール40選 Flexbox Parent Attribute Visualizer CSS Flexbox のプロパティを実際に変更しながら確認できるインタクラティブな方法。 Keyframes.app CSSアニ

配色は、デザインにおける重要な要素のひとつです。この記事では、デザインプロジェクトの参考にしたい、最新の色の組み組み合わせ101種類をご紹介します。 配色は、どんなデザインでも見る人の認識を形成しながら、雰囲気やトーンを設定します。単色や明るい、涼しい、暖かい、または補色であれ、すべての色合いがデザインの役割を果たします。 デザインに適した色を見つける作業は難しいことです。そこで、配色の参考にしたい101種類の色の組み合わせをまとめています。各カラーパレットは、Shutterstockのイメージ画像にインスパイアされており、HEXコードも一緒に記載しているので、ウェブデザインやソーシャルメディア広告、Eメールデザインなど幅広く利用できます。 コンテンツ目次 1. 単色系カラーパレット 2. 寒色系カラーパレット 3. 鮮やかなカラーパレット 4. 暖色系カラーパレット 5. 補色系カラーパ

絞り値（英: Aperture）およびシャッター速度、ISOを確実に理解することは、思い通りの写真を撮影する第一歩です。 この３つのカメラ機能は、画像の露出（写真の明るさと濃淡のレベル）を担っており、他の美しい写真を真似ることができ、結果的に写真全体の見た目に大きな役割を果たします。 絞り値とシャッタースピード、ISOをマスターして、優れた写真家になるための第一歩は、自動モード（カメラがすべての設定を処理する）から、全手動モードでの撮影に切り替えることです。はじめは露出を手動で設定するのに時間がかかりますが、プロセスから学ぶテクニックはとても貴重と言えるでしょう。 まず、3つの露出設定を詳しく見てみましょう。それぞれの設定がどのように美しい画像の設定に影響するのか、そして「露出の三角形（英: Exposure Triangle）」がどのように連動するのか見てみましょう。 露出の三角形とは？

写真加工や修正は、Photoshopのデザイン制作において重要なテクニック。 しかし、用途に応じてツールを使い分け、エフェクトを効果的に適用しているというひとは、どれだけいるでしょう。 せっかく撮影した写真がぼやけてしまったり、光量が足りないなんてことも。 また、しみなどお肌のトラブルを隠したかったり、朝日や夕日をドラマチックに仕上げたかったりと、特別なテクニックが必要なものばかり。 今回は、Photoshopですぐにできる写真加工テクニックを、各サンプルと一緒にまとめてご紹介します。 これらの方法を実践することで、どんなデザインでも手軽に、そしてスピーディーに写真加工できるようになります。 コンテンツ目次 コントラストで写真の仕上がりをアップ ぼやけた写真をくっきりシャープに 朝日や夕日をダイナミックに仕上げる にきびやしみなどお肌のトラブルを修正する 着ている洋服の色を変更する トレン

視覚的な階層（英: Visual Hierarchy）は、優れたウェブデザインにとって不可欠です。ウェブサイトの目標を効果的に達成できる主要ルールの一つと言えるでしょう。 視覚的な階層の裏には、たくさんのデザインルールが存在します。今回は、ウェブサイトに必要な視覚的な階層デザインルールをまとめてご紹介します。 優れた視覚的階層ルールを決める、鉄板デザインツール6個まとめ デザインはコミュニケーション手段のひとつ。 デザインの核心は、ビジュアルコミュニケーション手段です。魅力的なビジュアルを通して、アイデアを他のひとに伝えることなのです。そして、特にウェブデザインが当てはまる部分でもあるでしょう。 ひとはモノを見て、考えるビジュアル・シンカー（英: Visual Thinker）のため、たくさんの情報をうまく処理することはできません。データを処理するだけでも、単にものを見ているだけでもありま

これまでに書体の使い方が特に優れたプロジェクトを目にしたことはないでしょうか。デザイナーによっては、あらゆるプロジェクトで完璧な書体をデザインできる、特殊なスキルを持っています。 いくつかのシンプルなルールを適用することで、誰でも実現できるテクニックとも言え、どんなプロジェクの書体の見た目とデザインを、デジタルと印刷の両方で改善することができます。 もし、あなたが書体選びやフォントの組み合わせに困っているのであれば、今回紹介するルールを守ることで、いつでも優れたデザインを作成することができます。 コンテンツ目次 1. プロジェクトの目標を決めよう。 2. 同じような形、シェイプを探そう。 3. サイズのために書体スケールを設定しよう。 4. 余白スペースにも気を配ろう。 5. 左揃えにしよう。 6. 2つの書体を選ぼう。 7. フォントのデザインは変更してはいけません。 8. たくさんのコ

光や炎などキラキラ感を自由に表現できる、ライティングエフェクトに特化した文字テキスト用Photoshopチュートリアルをまとめてご紹介します。 当サイトで2010年ごろより毎月まとめているPhotoshopチュートリアルを参考にしているので、直近８年の間に公開されたデザイン手法をまとめて確認できます。 光沢感たっぷりの3Dデザインや、キラリとしたライティングエフェクトや80年代スタイル、ネオンエフェクト、リアルな炎エフェクトやレイヤースタイルで完成の黄金文字など、豊富なデザインスタイルを参考にしてみてはいかがでしょう。 ほんの数クリックで完成！文字をかっこよくするPSテキストエフェクトまとめ キラキラ系テキストエフェクトを極める！Photoshopチュートリアルまとめ キラキラのラメ付き黄金テキストエフェクトの作り方 お手本通りに数値を設定していくだけで完成する、レイヤースタイルを駆使した

Photoshop CCはあらゆるデザイン作業を行うことができ、デザインの現場でも使われている本格的なツール。その分、大量のシステムリソースやメモリを必要とする複雑なソフトウエアとも言え、使っているうちにカクカクとしたり、もっさりとした動きになってしまうことも。もちろん、スペックの良い高価なパソコンを購入すれば、Photoshopの反応速度をアップできますが、費用もかかりあまり現実的とは言えません。 今回は、Photoshop CCのパフォーマンスを大幅に改善する10個の方法をまとめてご紹介します。筆者が試したテクニックのみを紹介しています、効果を実際に体感してみましょう。

Facebookのブランドカラーが青色なのは、マーク・ザッカーバーグが色盲だったから、という話を知っているでしょうか。 「青は私にとって、もっともリッチな色で、すべての色合いを識別することができる。」とザッカーバーグ氏は述べています。配色を決める作業は、まったく科学的には見えないかもしれませんが、配色に関してたくさんの研究やアイデアが用いられています。 商品に対する評価の90%以上は、色によって判断されていると Buffer では紹介されている通り、どんなデザインにおいても、いかに配色をじっくり検討するべきか分かります。特にウェブサイトでは、ユーザーが配色を気に入らなかった場合、あまり長くはサイトに滞在してくれないでしょう。 ウェブデザイン制作で配色の参考にしたい、さまざまなWebサイトから集められた、50種類の美しいカラーパレットを今回はまとめています。コピー＆ペーストで利用できる、カラ

フォトショップでの写真の色の置き換え、変更は特に要望の多い重要なテクニックのひとつです。 しかし、用途に応じてツールを使い分け、色の置き換えを行っているひとは、どれだけいるでしょう。 今回は、どんな写真にも応用できる、色の置き換え・変換のお手軽Photoshopテクニックを、実践のデザインサンプル例と一緒にまとめてご紹介します。 これらの方法を試してみることで、どんなデザインでもお手軽に色の置き換えを行うことができるようになります。 コンテンツ目次 色を変換・調整する方法 特定の色だけを置き換える方法 「モデルが着用しているドレスの色を変更したい。」 「車の色を背景に合わせて変更したい。」 「白色のドレスの色を変更したい。」 「背景の壁の色を変更したい。」 「ブランドカラーに合わせてソファーの色を変更したい。」 さいごに、 どんな写真にも応用できる、色の置き換え・変換のお手軽Photosh

「ウェブデザインのアイデアが見つからない。」「漠然としたイメージはあるけど、何が必要か分からない。」「クライアントとの打ち合わせで使えるデザイン見本が欲しい。」 そんなときに役立つ最新ウェブデザインの参考サンプルをまとめてご紹介します。優れたデザインのサンプル例を見ることは、新しいアイデアを生み出すのにも大切です。目まぐるしく変化するWebデザインのトレンド確認しながら、今後のデザイン制作に活かしてみてはいかがでしょう。 現役デザイナーも注目！最近話題のウェブデザイン50個まとめ 2017年7月度 アイデアに困ったら確認したい！最新ウェブデザイン良質見本 清水寺 世界的にも有名な清水寺の公式ホームページ。ユーザーが必要な情報を見つけやすい工夫が随所に見られ、Instagramなどソーシャルメディアによる共有のしやすさも。 旅館 山河 デスクトップではスクロールに応じて、画面右半分のみが無限