ウェブサイト制作には、常に新しいアイデアやインスピレーションが必要ですが、決まらずに悩んでしまうことも。 そんな状況を打開するには、たくさんの優れたデザインの実例を見ることで、次のアイデアを生み出してみましょう。 ここでは、最新ウェブデザインをいち早くチェックできるオススメWebギャラリーサイトを厳選してご紹介。 インスピレーションとしてはもちろん、クライアントの打ち合わせやイメージの共有にも活用できます。 積極的にインプットを増やし、デザインの引き出しを増やしてみましょう。 このリストは2年ぶりにまとめ直したアップグレード版となります。 コンテンツ目次 【2024追加分】最新Webギャラリーサイト landing.love Design Spells Godly BentoGrids 404s Footer Navbar Gallery 国内Webギャラリーサイト SANKOU! URA

ますます進化するWebデザインの世界において、アニメーションはますます欠かせないデザイン要素のひとつとなっています。 パソコンだけでなくスマホなどアニメーションに対応するデバイスが増えたことで、クリエイティブに対する重要度も高まっています。 では、実際にどのようにWebサイトにアニメーションを活用したら良いのでしょう。 この記事では、Webアニメーションの参考にしたい、魅力的な最新UIインタラクションをまとめてご紹介します。 UXデザインにおけるアニメーションの基本原則とルールも一緒に確認しておくと良いでしょう。 【保存版】ユーザーを魅了する！UXデザインの正しいアニメーション完全ガイド 実例で学ぶ！美しい最新UIアニメーションまとめ Origin ページをスクロールすると、海面から深海へとつづくコンテンツを、アニメーションを利用することで没入感のあるデザインに仕上げています。

ウェブサイトやアプリのつくり方が多様化するいま、素早くデザインを作成し、ページ遷移など実際の動きまで確認できることが大切になってきていきます。先日、日本語版もリリースされたUXデザインツール Adobe XD は、そんな面倒な作業をスピーディーに行うことができるツールと言えるでしょう。 今回は、海外デザインブログSmashing Magazine で公開されていた「Quick UX Prototyping With Adobe XD Shortcuts (PDF Cheat Sheet)」より、Adobe XD の覚えておきたい便利なショートカット機能をまとめてご紹介します。これらの機能を習得することで、制作効率をグッとアップすることができるようになります。

この記事では、Adobe XDにインストールしておくことで、デザイン制作をより快適にしてくれる無料プラグインをまとめてご紹介します。 実際にAdobe XDにインストール、使用してみて便利だったプラグインのみを厳選しています。プラグインを利用して、制作スピードを爆速にしてみませんか。 コンテンツ目次 1. プラグインが利用可能に 2. Adobe XDプラグインのインストール方法 3. Adobe XDプラグインの使い方 4. おすすめ無料プラグイン（デザイン効率化） 5. おすすめ無料プラグイン（コンテンツ生成） 6. おすすめ無料プラグイン（描画デザイン系） 7. おすすめ無料プラグイン（コラボレーション・ハンドオフ系） 8. ショートカット機能で作業効率をさらにアップ Adobe XDでプラグインが利用可能に Adobe XDは定期的にアップデートが行われており、昨年10月にリリース

コンテンツ目次 「被写体の選択」機能 「選択とマスク」機能 「選択とマスク」（複雑な背景バージョン） オブジェクト選択ツール レイヤースタイル「ブレンド条件」 消しゴムツール 自動選択ツール クイック選択ツール 多角形選択ツール ペンツール チャネル設定 色域指定 レイヤーマスク クリッピングマスク 境界線を調整 さいごに、 1. 「被写体の選択」機能 もっとも簡単な、最新の切り抜きテクニック。 ボタンをクリックして、数秒待つだけで完成という、嘘のようなホントのはなし。 試しに、こちらの写真の女性を選択してみましょう。 元の画像をコピー（Command/Ctrl+J）したら、プロパティパネルの「被写体を選択」をクリック。 たったこれだけで、女性モデルのみを選択することができました。 選択範囲をレイヤーマスクとして適用したら、完成です。 Adobe Stockで「背景の削除」も一発完了 実は

日本語フリーフォントはたくさんインストールしているけど、かわいいデザインを作成するときに、どのフォントを利用するか迷ってしまったことはないでしょうか。 特に男性デザイナーにとって、女性らしい可愛いデザインを表現するのは至難の業とも言えるでしょう。また無料フォントでは、デザインコンセプトに合った、商用利用できる素材を探すのも一苦労です。 今回は、そんなデザイナーの悩みを解決する、無料ダウンロードでき、商用ライセンスにも対応した日本語フリーフォントという条件で、使いやすいアイテムだけを厳選してご紹介します。

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

実際のサンプル例を確認しながら、UIデザインの「良い」アニメーションを「より良く」してみましょう。ほんの少し調整を行うだけで、UIマイクロインタラクションをより魅力的で、ユーザーにも分かりやすく表現できます。 たとえば、リスト形式で並べたコンテンツにちょっとした工夫を加えるだけで、よりつながりのあるUIパターンを演出できたり、コンテンツの関係性を考えたアニメーション遷移、ボタンをクリックするなどユーザーに行ってもらいたいものに注意を引くことも、ほんのわずかなUIマイクロインタラクションによって実現できます。 今回はこれらのサンプル例を作成するために、Material Motion、IBMのアニメーション原則、Motion in Manifestoのガイドラインを参考にしています。 また今回のサンプル例は、InVision Studio（現在は限定ユーザーのみのアーリーアクセスで、メール登録

2018年8月5日に公開された記事を、サムネイル画像など再編集、アップデートしています。 フォトショップの作業が速くなる秘訣は、ずばりショートカットキーによる時短テクニック。 その理由は、「もっと早く知りたかった」と思うほど、ラクラクな手軽さで、面倒な作業をすぐに片付けてしまうから。 「レイヤーの重なり順を変えたい」 「細かい部分の作業を行いながら、同時に全体表示で確認したい」 「不要なレイヤーを非表示にしたい」 そんな普段からよく行う作業も、効率アップさせる時短テクニック18個が揃いました。 フォトショップがもっとうまくなりたいと思っている人こそ、まずは試してみませんか。

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

はじめにハンバーガーメニューが登場したとき、デザイン業界の反応はさまざまでした。そこから数年が経ったいま、この単純な図形は、インターネットの世界に浸透しています。 ここにくるまでハンバーガーメニューは、特にアニメーションの分野において、新しいレベルの洗練されたスタイルへと進化してきました。CSS3に加えて、SVGやキャンバスは、ユーザーエクスペリエンス全体を高める複雑で、シームレスなコンテンツ遷移を作成するのに利用されています。また、オーディオの利用もより普及してきており、メニューの使いやすさをユーザーに提供しています。 ハンバーガーメニューのレイアウトも、より複雑になってきており、サイトのナビゲーションメニューだけでなく、さまざまなコンテンツを配置しているケースが増えています。 この記事では、2018年以降に増えてきそうなハンバーガーメニューのクリエイティブな最新トレンド5つをご紹介しま