2018年に注目したい！グラフィックデザインの最新トレンド10個まとめ - PhotoshopVIP
「流行は繰り返す（英: Everything old is new again）」と言うように、2018年は過去のグラフィックデザインのトレンドをよりモダンにし、ここ数年人気だったフラットなデザイントレンドから移行する年となることが予想されます。ミニマルスタイルやシンプルなデザインは引き続き人気がありますが、いくつかの懐かしいスタイルをモダンな雰囲気にアレンジしたトレンドにも要注目です。 この記事では、これから2018年に注目したい、グラフィックデザインの最新トレンド10個をまとめています。「アッと驚かすデザインをつくりたい。」そんな思いにさせてくれる、たくさんのデザイン事例と一緒にご紹介です。 コンテンツ目次 1. レスポンシブ・ロゴデザイン 2. グラデーション/カラー・トランジション 3. セミフラットデザインでより奥行き感を。 4. デュオトーンの人気 5. 80＆90年代の配色パ
デザインでつまずかない！ノンデザイナーのための基本ルール10個まとめ
優れたデザイン原則は、誰にでも学ぶことができ、活用することもできます。 このガイドは、デザインの現場で利用できる実用的で基本的なテクニック10個をまとめてご紹介します。これらの基本ルールを知るだけで、あなたのデザインがずっと良くなります。 ずっと使える、デザインの基本まとめました。【2020年改訂版】 プロに学ぶ、一生役立つ配色の基本ルール8個まとめ【保存版】 コンテンツ目次 1. コントラストを活用しよう。 2. 「黒に近い黒」が「黒」よりも読みやすい。 3. 重要なコンテンツを最初に。 4. すべてのものを整列させよう。 5. 文字サイズと文字スペースに気をつけよう。 6. 検索結果の順番が重要なときは「リスト表示」。 7. まずは白黒でデザイン、あとから色を追加しよう。 8. 快適なデザインを目指そう。 9. 素敵な配色カラーパレットを使おう。 10. Apple や Google
人気ナビゲーションスタイル10個を徹底解剖！実装テクニック＋参考サイトまとめ
海外デザインブログCanva Design School Blogで公開されたエントリー「Website Navigation Trends: 10 Tips & Examples」を日本語抄訳しています。 「ハンバーガー型メニュー」の扱い方に、ユーザーも慣れてきているようです。好きか嫌いかは別にして、この小さなデザイン要素は、ウェブサイトのナビゲーションデザインにおける、もっとも大きなトレンドのひとつとなっています。 しかしこのトレンドだけでなく、ナビゲーション・メニューを作成する方法は、大きく変わってきています。ハンバーガー型メニューのような、とても小さなサイズのナビゲーションから、特大サイズのナビゲーションメニューまで、ユーザーに情報をより分かりやすく、はっきり伝えることができる、10個のテクニックを今回はご紹介します。 詳細は以下から。 01. フルスクリーン型ナビゲーション ナビ
現役デザイナーも注目！最近話題のウェブデザイン50個まとめ 2017年7月度
ウェブサイトの制作に追われるうちに、アイデアが枯れてしまったという経験はないでしょうか。目まぐるしく変化を続けるウェブデザインの世界では、新しいアイデアやトレンドをうまくサイトに盛り込むことも重要です。 ユーザーに新しいウェブ体験を提供することで、コンテンツをより魅力的に仕上げるだけでなく、伝えたいメッセージやコンセプトをうまく表現できるようになります。 今回は、最近話題になった新作ウェブデザイン50個をまとめて紹介します。配色えら�びやデザインが苦手な人でも参考にできる、最先端で実践的なテクニックを得意としたサイトを集めているので、今後のデザイン制作にも活躍してくれるでしょう。 クオリティーが凄い！最近話題になったウェブデザイン40個まとめ 2017年5月度 これでもう悩まない！2017年のデザイントレンド完全ガイド 現役デザイナーも注目！最近話題になったウェブデザイン50個まとめ Sp
クオリティーが凄い！最近話題になったウェブデザイン40個まとめ 2017年5月度
さまざまな想いやメッセージを伝えるウェブサイトは、クリエイティブなアイデアの宝庫です。まるで思いつかないようなユニークなアイデアが使われていたり、最先端のウェブ技術を駆使したこれまでにない体験をお届けするサイトなど、参考したいポイントがたくさんあります。 この記事では、最近国内外で話題となった最新ウェブデザインをまとめてご紹介します。ますます加速するウェブの世界をのぞいてみてはいかがでしょう。 ブックマークしておきたい海外/国内Webデザインギャラリーまとめ30選【2017年改訂版】 これでもう悩まない！2017年のデザイントレンド完全ガイド クオリティーが凄い！最近話題になったウェブデザインまとめ Freelance TV 世界各地で活躍するフリーランスたちに、普段のライフスタイルや仕事術などをインタビューしながら紹介する新しいメディアの取り組み。コンテンツも定期的にアップされており、今
ウェブサイト作成に困ったら使いたい！Photoshop無料テンプレート素材まとめ 2017年版
ウェブデザインを作成したいけど、デザインアイデアが浮かばない。そんな悩みを抱えたデザイナーは少なくはありません。世界中で公開された、ウェブサイト用テンプレート素材を利用すれば、デザイン制作時間を短縮し、より手軽にクリエイティブな作品を完成させることができます。 今回は、無料ダウンロードできるウェブサイト用PSDテンプレート素材をまとめてご紹介します。 ウェブデザイントレンドをうまく取り入れた作品が中心で、シンプルでミニマルな素材から、カード型レイアウトやマテリアルデザイン、画面を二分割したレイアウトやグラデーション、フラットスタイルなどどれも人気の高い素材ばかりが揃います。 完全無料で美しい！参考にしたいUIキット50個まとめ 2017年保存版 より手早くウェブサイトを作成したいときは、無料のHTMLテンプレートの利用も検討してみましょう。 レスポンシブ対応で無料！ウェブ制作を高速化できる
シンプルが一番！ミニマルスタイルのWebサイト基本原則と実践ポイントまとめ
第二次世界大戦後の芸術的な動きを起源としたミニマルスタイルは、現代のウェブデザインにおいて再び人気となっています。うまく適用することで、ユーザーの作業を簡略化するのに役立ち、より早いページの読み込みやあらゆるスクリーンサイズへの互換性など、ウェブサイトにとって多くのメリットがあります。 ミニマルスタイルはシンプル過ぎるように見えるかもしれませんが、「少ないことは豊かなこと（英: Less is More）」というモットー以外にも検討したいポイントがいくつかあります。今回は、ミニマルスタイルの原則を学びながら、ウェブサイト制作の実践テクニックをまとめてご紹介します。 詳細は以下から。 ミニマルスタイルのウェブサイトとはどんなもの？ フラットデザインやヒーローイメージ、ハンバーガーメニューなど現在人気のデザイントレンドの多くは、2000年はじめに始まったミニマルスタイルに影響を受けています。
Photoshopをしっかり学ぶ、入門デザインテクニック集めました。
当サイトでこれまでに投稿したエントリーから、Photoshopの基本操作から各ツールの実践的な使い方やテクニックまで、入門者必修の機能を中心にまとめています。これからフォトショップをはじめる人が目を通しておきたいエントリーとなっています。 あらゆるデザインの現場で使われているフォトショップは、豊富に揃った機能がゆえに新しくはじめようという人には敷居が高く感じるかもしれません。ここでは、覚えておきたい定番の使い方から、制作スピードが早くなるプロ便利技を機能や用途に応じて詳しく見ていきましょう。
やってみたかった表現をマスター！基礎力をつけるPhotoshopチュートリアル30個まとめ
「文字をキラキラさせて目立たせたい。」「天気が悪くて光の足りない写真をどうにかして欲しい。」「画像をスケッチ風に仕上げたい。」 ウェブサイトだけでなく日常何気なく目にする雑誌や広告など、「このデザインはどうやって作るんだろう。」とふと思うことはないでしょうか。あらゆるデザインの現場で利用されている Photoshop なら、そんなクリエイティブなアイデアを実現することができます。 今回は、Photoshopの基礎を覚えながら、新しいデザインテクニックを学ぶことができる Photoshopの新作チュートリアルをまとめてご紹介します。覚えておくことできっと役に立つ、、初心者にもオススメしたい実践的な作り方を中心に揃えています。 2016年総まとめ！デザイナーが確認しておきたいPhotoshopチュートリアル厳選55個 詳細は以下から。 やってみたかった表現をマスター！基礎力をつけるPhotos
完全無料で美しい！参考にしたいUIキット50個まとめ 2017年保存版
ユーザーがウェブサイトを訪れたとき、まず目にするものがグラフィックデザインです。高品質なUIデザインを利用することで、ユーザーにサイトをより魅力的に見せることができます。 今回は、新しいデザイントレンドを取り入れた、完全無料ダウンロード可能なUIキットをまとめてご紹介します。 これらのUIキットを利用することで、クリエイティブで美しく、便利なウェブサイトやアプリデザインの作成をスピーディーに行うことができます。必要に応じてボタンやログインフォーム、ソーシャルメディアなどの要素を編集し、自由に利用することができます。 魅力的なウェブデザインを素早く仕上げる、すごい無料UIコンポーネント素材30個まとめ 完全無料でこのクオリティ！美しい新作UIキット50個まとめ 2017年版 Blog UI Kit ファイル形式: Sketch Prometheus | UI Kit ファイル形式 : PSD
【2017年版】HTML/CSSで表現できる、すごいテキストエフェクト66選
ほとんどのモダンブラウザがCSS3対応となったことで、これまではPhotoshopなどのデザインアプリで再現していたようなデザインスタイルも、HMTL/CSSで表現できるようになってきており、その進化はますます加速しています。 今回は HTML と CSS、わずかな JavaScript で実装できる、表現力の高いテキストエフェクト用コードスニペットをまとめてご紹介します。コードニペットは各エフェクト別にカテゴリ分けしているので、ウェブサイト制作に活用したいエフェクトを見つけてみましょう。 ナビメニュー100連発！CSSで表現できるコピペ可能なHTMLスニペットまとめ CSS3の広がる可能性！美しいテキストエフェクト用コードスニペット24個まとめ CSSスタイリングで表現できる！すごいテキストエフェクト33個まとめ コンテンツ目次 1. アニメーション・テキストエフェクト 2. グリッチ・
シンプルなウェブデザインを作成する、知っておきたい7つの基本ルール
KISS（略語: Keep it simple, stupidのコンセプトは、US海軍が取り入れた1960年ごろにはじまっています。KISSの原則は、ほとんどのシステムが複雑ではなく、単純であればもっとも効果的であることです。デザインプロジェクトでも同じことが言えます。 多くのグラフィックデザイナーは、早い段階でKISSの原則について学びますが、では実際にどのように活用すれば良いのでしょう。作成をはじめると見た目よりもう少し複雑であることが分かると思います。 今回は、シンプルなウェブデザインを作成する7つのルールをご紹介します。これらのルールを取り入れることで、ごちゃごちゃ感を取り除き、美しくシンプルなデザインに役立てることができるでしょう。 詳細は以下から。 1ページに１つの目標を設定しよう。 シンプルなデザインは、プロジェクトの目標やウェブサイトにおける各ページのはっきりとした目標から
2016年のWebデザインを振り返る、年間アワードのおすすめ注目サイト35個まとめ
世界で注目されている現役の敏腕クリエイターが審査に参加した、新しい可能性を感じるアイデアやデザインのWebサイトを決める、Awwwardsの主催する年間アワード Annual Awards 2016が開催中です。 Annual Awards 2016は、6部門（今年のウェブサイトを決める The Site of the Year や、サイトの使いやすさやユーザビリティが完璧なサイトを決める Developer Site of the Year 、新しい技術を利用したユニークさを競う Experimental Innovative Site of the Year、デザイン性だけでなく使い勝手にもこだわるショッピングサイトを決める E-Commerce Site of the Year ）でノミネートが発表されています。 今回はその中でも特に印象的だった、魅力的なウェブサイトをまとめてご紹介
2017年のWebデザインはどうなる？デザイナーが注目したい流行トレンド10個まとめ
いよいよ2017年。年の初めは、既存のデザインや新しいプロジェクトを見直し、最新のトレンドをフレームワークに組み込む方法について考える絶好の機会と言えます。 機能的なトレンドから配色、タイポグラフィーまで2017年は新しいアイデアと視覚的コンセプトの年になるでしょう。いくつかのデザイントレンドは、すでに利用され始めており、新年のスタートに向けてのデザインインスピレーションになるでしょう。では、ひとつずつ詳しく見ていきましょう。 2016年のWebデザイントレンドはこちらから 2015年のWebデザイントレンドはこちらから 2014年のWebデザイントレンドはこちらから コンテンツ目次 1. グラデーションの利用 2. 音声付き動画ビデオ 3. ビジュアル・リアリティー（VR） 4. ますますパララックスエフェクト 5. 超シンプルなホームページ 6. 新しいナビゲーションメニューの種類 7
ウェブをもっと面白く！コピペ可能なHTML/CSSスニペット45個まとめ 2016年12月度
思わずクリックしてコンテンツを読み続けたくなるような、コピー&ペーストで利用できる最新 HTML/CSS スニペットをまとめてご紹介します。 新しいテクニックを利用した、ますます進化するWebの可能性を感じさせてくる作品ばかりで、今後のデザイン制作に活用してみてはいかがでしょう。 「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。 詳細は以下から。 ウェブをもっと面白く！コピペ可能なHTML/CSSスニペット45個まとめ Fixed Disappearing Scrolling Header スクロールすると表示されている文字テキストがフェードアウト
ニュース系アプリから見る、参考にしたいUIデザインアイデア10個まとめ
ここ数年間でニュースメディアは大変な盛り上がりとなっており、ストーリーテリング（英: Storytelling）と呼ばれる雑誌など出版物のオンライン体験を軸にした、新しい戦略が生まれています。ウェブサイトはリニューアルされ、さまざまなアプリも制作されていることから、ニュースメディアはデザイナーにとってデザインの参考にできる機会にたくさん恵まれています。 この記事では、UIデザイン制作の参考にしたいニュースアプリデザインを集め、各UIのメリットとおすすめポイントをまとめてご紹介します。実際に使われているアプリから、開発中のデザインまでが揃っています。 詳細は以下から。 ニュース系アプリから見る、参考にしたいUIデザインアイデア１０個まとめ Urkanian News Portal Credit: Toma Reznichenko 参考にしたいポイント 通常のニュースメディアでは、コンテンツを
ハンバーガーメニューはもう古い！代わりに使えるモバイル用ナビメニュー5つまとめ
ウェブサイトを制作しているひとなら、モバイル端末におけるハンバーガー型ナビゲーションメニューの見つけにくさと効率の悪さ、またどれだけUXデザインの邪魔になっているのか、いくつもの記事を読んだことがあるでしょう。（この問題の参考にしたい記事はこちらやこちら、こちら、こちらからどうぞ。） 幸いにも多くのサイトやアプリで、より効率的な解決法となる代替アイデアが試されています。今回紹介しているアイデアは、他のものより優れているというわけでなく、コンテンツや内容によってパフォーマンスや実行できるかどうかは変わってきます。 01. タブ型ナビゲーションメニュー もしウェブサイトやアプリの項目が限られている場合、ユーザーはできるだけ素早くそカテゴリを切り替えたいところ。そんなときは、タブ型ナビゲーションが良い解決方法となるでしょう。 タブはもっともシンプルなナビゲーションパターンですが、デザインを制作す
2017年に人気となる、知っておきたいUIデザインのトレンド8個まとめ
アプリデザインのトレンドは絶えず変化しています。時間が経てば消えてしまうものから、成長し、進化を続けるものもあります。多くのトレンドは検討する価値がもちろんありますが、一緒に新しい技術も必要となります。 優れたUIデザインは、シンプルさ（英: Simplicity）と有効性（英: Effectiveness）が全てです。これこそがデザイナーが機能性を達成しようとする理由です。しかし反対に、もしユーザーがアプリをうまく使いこなせないとき、UIデザインは失敗と言えるでしょう。 デザイントレンドが変化する理由にはさまざまな要因が考えられます。たとえば2015年の大きな流れとして、ハードウェアの変化やモバイル端末のレスポンシブ化が挙げられます。 公開された多くのモバイルアプリは、人気のある機能を必需品としてすぐに変化させてきました。さらに今では若者のおよそ90%が、モバイル端末上で基本的な操作を行
これからIllustratorを学ぶ人にオススメしたいチュートリアル、作り方35個まとめ
目まぐるしく変化するデザイントレンドに対応した作品を作り続けるのは、デザイナーにとってもっとも大変な課題のひとつです。これまで使っていたスタイルがいつの間に時代遅れになってしまうということもしばしば。 今回はデザイン表現の幅を広げる Illustrator チュートリアルをまとめてご紹介します。覚えておくと役立つテクニックはもちろん、新しいデザインテクニックを使って作成するデザインを中心にまとめています。 詳細は以下から。 これからIllustratorを学ぶ人にオススメしたいチュートリアル、作り方35個まとめ お好みの文字をチェリーパイで作成する方法 パイのサクサクとした質感や上にかかっている粉砂糖、チェリーどれもIllustrator のみでデザインできる、本格的なテキストエフェクト用チュートリアル。 ビスケットでできたテキストエフェクトの作り方 ツールでパスを描くだけでで、どんなシェ
デザインで色を美しく重ねる、6つの簡単テクニックまとめ
色はどんなデザインにおいても重要な要素です。鮮やかな色合いでも、ミニマルなモノクロデザインでも色の使い方によって、デザイン全体を魅力的に仕上げることができます。 色を使って印象づける方法のひとつとして、デザインに色を重ねるテクニックがあります。具体的には、イメージ写真や動画ビデオに半透明で色の付いたレイヤーを重ねることを指します。このエフェクトによって画像にメッセージを含むことができ、デザインに注目を集めることができます。 今回はウェブサイト制作の参考にしたい、さまざまな色の重ね方について見ていきましょう。 グラデーションを試してみよう。 グラデーションは魅力的なデザインとして再認識されており、カラーオーバーレイとして利用することで、うまく人目を惹くことができます。 特にグラデーションが素敵な理由としては、複数の色を自由に組み合わせできる点です。ここで利用する色にはブランドコンセプトを検討
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
