ウェブサイト制作には、常に新しいアイデアやインスピレーションが必要ですが、決まらずに悩んでしまうことも。 そんな状況を打開するには、たくさんの優れたデザインの実例を見ることで、次のアイデアを生み出してみましょう。 ここでは、最新ウェブデザインをいち早くチェックできるオススメWebギャラリーサイトを厳選してご紹介。 インスピレーションとしてはもちろん、クライアントの打ち合わせやイメージの共有にも活用できます。 積極的にインプットを増やし、デザインの引き出しを増やしてみましょう。 このリストは2年ぶりにまとめ直したアップグレード版となります。 コンテンツ目次 【2024追加分】最新Webギャラリーサイト landing.love Design Spells Godly BentoGrids 404s Footer Navbar Gallery 国内Webギャラリーサイト SANKOU! URA
ちょうどいいWebデザインギャラリー
カラー ネイビー (7) カラフル (259) スカイブルー (228) ホワイト (1226) ベージュ (423) グレー (434) ブルー (353) パープル (57) ピンク (126) レッド (212) オレンジ (124) イエロー (215) グリーン (310) ブラウン (148) ブラック (539) ゴールド (54) 業種 スポーツ (27) 旅行・ホテル・観光 (154) 美容 (112) エンタメ・趣味・娯楽 (177) 製品・工業・素材 (134) 金融・保険・会計・法律 (47) ファッション・アクセサリー (76) 就職・人材サービス (32) インフラ (26) 不動産・建築・空間・施設 (152) アート (41) 車・バイク他 (18) 事業・組織 (72) 暮らし商品・サービス (149) 飲食・食品・飲料 (481) 行政・NPO・団体・協
chot.design上のコンテンツは、実際にWeb／IT企業で働いている現役のクリエイターが制作したものという。ちょっと社代表の小島芳樹さんは自身のTwitterアカウントで「変なオンラインサロン入る前にここで勉強してみてください！」とアピールしている。 無料公開を決めたのは同サービスの運営から手を引くため。現在は全レッスンの無料公開と共に、有料サービスの利用者に対して返金対応を行っている。 ちょっと社が取り組んでいたデザインやフロントエンド開発の受託事業が急激に成長した影響で、chot.designに手が回らない状況が続いた。今後はサブスク型プログラミングスクールを提供するDonbler（東京都渋谷区）が事業を継承するとしている。 関連記事 穴埋め問題を簡単に作れるWebサイト、「試験勉強に役立つ」と話題に 教育系IT企業のCTOが作成 マウスやタッチ操作で直観的に穴埋め問題を作成でき
こんにちは！株式会社Rabeeの新人デザイナーのakaneです🏋 今回は、Webデザインで「紙っぽさ」を出す方法を考えてみました。参考事例も掲載しながら紹介していくので、どうぞ最後までお楽しみください！ はじめに：「紙っぽさ」とは？私が言う「紙っぽさ」とは、おもに「雑誌っぽさ」のことです。Webデザインだけど、雑誌っぽい。ディスプレイに映っているけれど、エディトリアル感がある。 たとえば、以下のようなデザインは私にとって「紙っぽい」例です。 出典：六本木未来会議出典：DMN出典：ぼくのおじさんどうして、私はこれらを雑誌のようだと感じるのでしょう？自分なりに考えたポイントを、ひとつずつ紹介していきます。 その①：文字が「組まれて」いる最初に挙げたWebサイトのひとつをよく見てみると、画像左上にある「NO. 153」の文字のうち、「NO.」だけが縦向きになっています。「NO.」と「153」を
「どうすればAIをWebデザインに活用できるだろう」 人工知能AIがこれだけ話題になったいま、Webやグラフィックデザイン、イラストやゲームなどクリエイティブな業務をこなす人なら、一度は考えたことがあるかもしれません。 答えのひとつはずばり、Midjourneyなどの画像生成AIでイメージを具現化すること。 しかし、そうは言っても入力できるプロンプトは無限にあり、実際にどのように入力すれば最高の結果を得ることができるのか、すべて調べるのはあまりにも大変です。 そこでこの記事では、Midjourneyを１年間使い続けて見つけた、Webデザインに使えるMidjourneyプロンプト、小技テクニックをまとめてご紹介します。 具体的なサンプル例とプロンプトを一緒に記載しており、コピペでそのまま利用できます。 「Midjourneyって何？」というひとは、基本の使い方をまとめた以下のガイドを参考にど
Adobe製品を使わない"デザイナー"？「ビジュアルコーダー」が考える、自己満足で終わらないWebデザインとは
Adobe製品を使わない"デザイナー"？「ビジュアルコーダー」が考える、自己満足で終わらないWebデザインとは
Tweet Pocket 日本デザインスクールでは年間1500名ほどの受講生を、未経験からWEBデザイナーに育ててきました。受講生を指導する中でよくあがってくるのが「参考がなかなか見つからない」というお悩み。 私も受講生にお伝えすべく、これまで100サイト近くの「参考になりそうなギャラリーサイト」を見てきました。 そこで今回は、これまで見てきたギャラリーサイトの中で、みなさんのデザイン制作のお役に立ちそうなサイトを全部で61個ご紹介していきます。 全てのサイトを
フリーランスとして一人で制作をしていると、どうしても自身のスタイルの中だけでデザインしがちなので、新たな刺激を求めて書籍やネットを徘徊して見るようにしています。今回は、私が参考にしているギャラリーサイトを11個紹介します。クライアントとの打ち合わせ時も担当者とイメージを共有できるので便利に利用できると思います。ぜひ参考にしてみてください。 URAGAWA 担当した制作会社を掲載しているギャラリーサイト。制作会社ごとに見て回れるのはおもしろい。カテゴリ分けも『業界』『タイプ』『特徴』『カラー』『特集』『アワード受賞』『ランキング』と他にはない分類ですが意外と使いやすいです。制作の裏側記事もあってWebデザインの参考だけではなく読み物としても楽しめます。 URAGAWA | 制作会社がわかるWEBデザイン・参考サイト集 紹介文 URAGAWAは、クリエイティブカンパニーの情報を蓄積していくこと
「DICとPANTONEの違いについて、色々と調べてブログにまとめましたが、どうもよくわからない。」ということで、PANTONE(パントン・パントーン)の日本総代理店のユナイテッドカラーシステムズさんに直接電話して聞いてみたら、驚きの結果が！これは日本中のデザイナーさんに知って頂きたい。 PANTONE のインキは無い！？ サンコー）「PANTONE(パントン・パントーン)で色指示があり、近似色ではなくPANTONE(パントン・パントーン)のインキで印刷して欲しいので、インキを作ってくれるところを紹介して欲しい。」 ユ：「ユナイテッドカラーシステムズではインキは製造していないのでパントン社とライセンス契約したインキ会社に相談して下さい。」 えっ？・・・ PANTONE(パントン・パントーン)はあくまでカラーシステム（色見本）のみを持っており、実際にインキを作るのはライセンス契約をしている国
この記事では、これから2021年に注目したいWebデザインの人気トレンド9個をピックアップしています。 2021年のウェブデザインの傾向としては、どれも共通のテーマがあるように見えます。ハイテクなファンタジー感を目指すのではなく、よりリアルさを求めた新しいジャンルに世界中のウェブデザイナーが注目し始めています。 2021年のWebデザインは、これまでにないほどデジタルと日常を融合する方向に向かっており、普段の生活においてWebサイトが不可欠になってきていることを、反映しているのかもしれません。 よりクリエイティブなデザインを表現できるテクニックを、たくさんのデザイン事例と一緒にご紹介です。 コンテンツ目次 1. パララックス・アニメーション 2. ニューモーフィズム 3. アブストラクト・アート 4. 目にやさしい配色 5. 原因のためのウェブサイト 6. スクロール遷移 7. プロダクト
2021年のミニマリズムを中心としたトレンドが注目されていましたが、2022年は鮮やかで、奇抜で、記憶に強く残るようなデザインを中心としたトレンドが注目されています。 今回は、2022年に流行するWebデザインの10個の最新トレンド予測をご紹介したいと思います。1つ1つのトレンドごとに実際のWebサイトの事例を掲載しているので、ぜひご自身で体験してみてください。 1. 3Dイラスト 3Dのイラストを使ったデザインは、2021年の大きなトレンドの1つとなりましたが、2022年はさらに注目すべきトレンドの1つとなるでしょう。特に2Dのフラットなイラストを3Dに変化させたような、2Dと3Dを組み合わせたスタイルは要チェックです。 リアルで魅力的な楽しいイラストに、柔らかなキャンディーカラーと組み合わせたようなスタイルは、特にアプリのデザインなどでトップトレンドになると考えています。 Dribbb
Web制作者は1冊持っておくとかなり便利！UIに適したさまざまなアニメーションの実装方法が分かる解説書 -動くWebデザイン アイディア帳 実践編
Webページに動きやアニメーションを加えたい、毎回検索で探している、実装の手順を解説してほしい、そんな時にすぐに役立つコピペで利用でき実装方法もカスタマイズもていねいで分かりやすい解説書を紹介します。 動きやアニメーションのコードはサポートサイトから最新版がダウンロードでき、要素表示、背景の動き、エリアの動き、画像の動き、テキストの動きなど9種類にバリエーションが100個以上あり、「この1冊が丸ごとカバー」の文字通り大全集です。 既視感を覚えた人は、大正解！ 「動くWebデザインアイディア帳（紹介記事）」の第2弾で、第1弾は基本的な動きでしたが、第2弾の本書は実践編として「印象に関わる動き」となっています。 Web制作者は、1冊持っておくとかなり便利だと思います。こういった気持ちいいアニメーションはクライアントからの要望も多く、喜ばれます。
Webデザイナーとデベロッパー向けに、2020年参考にしたいWebデザインの最新トレンドと技術の進化を紹介します。 最近注目されているWebサイトやスマホアプリのトレンドを調べ、デザインと技術の変化とそのトレンドの根底にある背景を解説します。 Top Web Trends for 2020 and why they are coming by Jouan Marcel 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Webデザインのほとんどのトレンドは、その時点で利用可能な技術に遡ることができます。少し前までは例えば、表示がフェードインする要素、レスポンシブレイアウト、パララックスなどがそうです。また、グラフィックデザインのトレンドと並行することもあります。 磨りガラスのエフェクト ダークモード どこにでもグラデーション 洗練さ
この記事では、Webデザイン制作をもっと楽にする最新オンラインツール45個をまとめてご紹介します。 ウェブデザインに限らず、グラフィックなどあらゆるクリエイティブな案件、プロジェクトで活躍しそうな新しいツールを中心に揃えています。 これまで面倒だった作業をワンクリックで完了したり、人工知能が自動で行ってくれたりと、より快適にプロジェクトを進めることができる便利ツールが揃います。 自分のワークフローにうまくツールを導入することで、制作時間の短縮につながるだけでなく、ストレス少なく作業を行うことができます。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Web制作便利ツール 2. 配色ツール 3. デザインコレクション 4. イラスト系ライブラリ 5. プロトタイプツール 6. アイコンツール 7. コラボ、リモートワークツール 8.
動くWebデザインアイデア帳
サイト閲覧方法 1ウェブサイトへアクセス https://ugokuweb.coco-factory.jp/ugokuweb/ 新サイトはこちらから 2【ユーザー名】と【パスワード】が求められますので、以下の情報を入力してください。 【ユーザー名】：ugokuweb 【パスワード】：指定のページ数を【半角数字3桁】で入力 （例）30ページの場合は 030 と入力 ※黄色本をご購入の方：7-2「検索」の表紙ページ数 ※ピンク本（実践編）をご購入の方：9-4「SVGアニメーション」の表紙ページ数を【半角数字3桁】で入力してください。 3閲覧制限が解除され、サイトを閲覧できるようになります。 ブックマークをしてご利用ください。 ※掲載されているコードは、2021年に出版された時のものをそのまま掲載しています。 （jQueryのバージョン、プラグインのソースコードの書き方を含む） ソースコードの書
特徴 女性らしいイメージがやや多い 下記のような柔らかい印象のイラストが多いです。 【ガジェットストック】 ガジェット関連のものを使用したい場合は、下記を使用すると良いと思われます。 【アイコン系】 【human pictogram 2.0】 オリンピックで流行ったやつです。 本サイトでは、アタッチメントをつけたりすることでかなりカスタマイズ性が高いのが特徴です。 【EXPERIENCE JAPAN PICTOGRAMS】 特徴 海外から見た日本が表現されている これはシンプルにUIが凝ってたので紹介します。 和テイストを演出したい場合は、良さそうですね！ 【ICOOON MONO】 こちら色・サイズも変更可能です！ 【Icon-rainbow】 ICOOON MONOと異なり、こちらは、中が肉抜きされているのが特徴。 【IFN FREE ICONS】 このデザインはどのようなパターンにマ
この記事では、Webデザインの引き出しを増やす、コピペで使える最新HTML／CSSスニペットをまとめてご紹介します。 Codepenで話題となっているものを中心に、今後のデザイン制作に活用したいアイデアがずらり揃った今回。新しいウェブデザインの可能性を感じるものばかりとなっています。 Webの進化が止まらない、コピペ可な最新HTMLスニペット40個まとめ CSSコピペで完成！押したくなるWebボタンデザインまとめ Webデザインの引き出しを増やす、コピペできる最新HTMl／CSSスニペットまとめ 「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。 画
クレイモーフィズムはWebデザインの新しいトレンドの一つで、クレイ粘土みたいなもこもこの質感にシャドウを加えてフラットなデザインに奥行きを与えます。メタバースなどの影響でデザインやイラストにも3Dの人気が高まり、最近ローンチしたスタートアップでも使用しているのを見かけます。 クレイモーフィズムのスタイルをさまざまな要素に適用できるCSSを紹介します。 clay.css clay.css -GitHub 「クレイモーフィズム」とは clay.cssの特徴 clay.cssのデモ clay.cssの使い方 「クレイモーフィズム」とは 「クレイモーフィズム（Claymorphism）」は、UIデザインのフレッシュで新しいコンセプトです。呼び名はMichał Malewicz氏によって作られたもので、デザイナーはUIデザインへのこのアプローチの可能性を探求することに興奮しています。 メタバースやN
この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 最近はスマホで見ることを前提にデザインされたWebサイトも増えてきていますが、そのようなWebサイトでもPCでみた時にも違和感のないデザインになっています。 また、総務省の「通信利用動向調査」を見ると、スマートフォンでもパソコンでもインターネットが利用されている事がわかります。 利用状況 2022年のインターネット利用率（個人）は84.9％となっており（図表4-11-1-2）、端末別のインターネット利用率（個人）は、「スマートフォン」（71.2％）が「パソコン」（48.5％）を22.6ポイント上回っている。 （出典）総務省「通信利用動向調査」 このようにスマホ、PCどのデバイスでも見ることが
Webサイトのアイデアに困ったときは、多くの優れた参考サイトを見ることが、次のデザインへとつながります。 なぜなら、レイアウトや配色、文字組みなど実践的なプロのテクニックを学びつつ、変化の早いトレンドも確認できるのが理由です。 この記事では、デザイナーが参考にしたい最新ウェブデザイン30個をまとめてご紹介します。 クライアントとの打ち合わせ時のサンプル見本や、「ああしたい、こうしたい」というデザインの共有にもおすすめです。 Webデザインに悩まない、心をつかむ最新サイトまとめ YOLU[ヨル] ナイトケア ビューティーブランド 満点の星空をテーマに、流れ星のようなSVGラインアニメーションが素敵な、美容系ウェブサイト。 Shop MrBeast 2022年を代表する、90年代レトロブームの再来をテーマにしたウェブサイト。 パステルカラーの配色や、ピクセルドット風フォント、くるくるまわるホバ
グランドピアノを一新して新たな音楽体験を提供する Whipsawのコンセプトピアノ「Ravenchord」 | AXIS Web | デザインの視点で、人間の可能性や創造性を伝えるメディア
Courtesy of Whipsaw サンフランシスコのデザインスタジオ Whipsawは、ペイズリー模様のような形状のコンセプトピアノ「Ravenchord」を公開。「フロントプロジェクション・アップライトピアノ」とも名付けられ、ファウンダー兼CEOであるダン・ハーデン（Dan Harden）の「ピアノに対する従来のイメージを一新し、ダイナミックで刺激的なものにしたい」という思いが込められている。 私たちが日頃よく目にするグランドピアノは、水平に大きく広がるボディに200本以上の弦が張られ、演奏中に鑑賞者がその内部の仕組みを見ることはできない。また、奏でられた音は響板や大屋根を介して広がるため、観客の耳に直接届かない。そして、譜面台や大屋根によって、演奏者の顔がよく見えない。こういった点を解消するために、構想されたのが「Ravenchord」だ。 Courtesy of Whipsaw
Parts. - パーツ別Webデザイン集
メインビジュアル、CTA、フッターなど、セクションやパーツごとの部分的なデザインを集めたサイトです。主にSaaS/コーポレートサイト/BtoBのWebサイトやランディングページを掲載しています。Webサイト制作の構成やキャッチコピー、デザインの参考にどうぞ。
動くWebデザインの最新アイデア28個まとめ
ウェブサイトやモバイルアプリを魅力的にしたいときは、アニメーションを利用すると良いでしょう。 その理由は、ユーザーの注目を無意識に集め、美しさも表現できるから。 さまざまなデザイントレンドとしても、毎年選出されており、まずます需要が高まっています。 実際に、多くの最新ウェブデザインでも採用されており、アニメーションに特化したCSSライブラリも数多く公開されています。 ワンランク上のウェブデザインを作成したいクリエイターに、ぜひ参考にしてほしいアニメーションのアイデアを、まとめてご紹介します。 動くWebデザインの最新アイデアまとめ Daily UI “Luxury Interaction Concept” 高級車の販売を行う、インタラクティブで実験的なコンセプトページで、クリックに応じたコンテンツ遷移が心地よいつくりに。
「デザインのアイデアがなかなか見つからない」 「Webデザインの最新トレンドを知りたい」 「かっこいいデザインの見本サンプルが欲しい」 そんなときに目を通したい、旬のトレンドを取り入れた最新おすすめWebデザイン30選をご紹介。 国内外のウェブギャラリーでも取り上げられている、世界中からセレクトされたホームページやWebサイトばかり。 レイアウトや配色、フォントえらびなど、実用的なアイデアに困ったときに役立ちます。 流行先取り 注目の最新おすすめWebデザインまとめ 隅田川道中 ページ全体に広がる波紋エフェクトにはじまり、 和楽器集団による演奏など、一度見たら忘れなそうなサイト。コンテンツに進むにつれ音量がさがり、最後のフッターでふたたび最高潮に。 ノースマン公式サイト エレガントなフォント使い、 重なりのある自由なレイアウトなど、どれもサイト制作の参考になりそうな仕掛けがたくさん。 Ha
Webページを実装する際、注意すべき点の一つは表示されるスクリーンサイズです。スマホとタブレット、そしてデスクトップの3種類を想定している人も多いと思いますが、現在ではさまざまなサイズのスクリーンが存在しています。 スクリーンサイズが中途半端な「中間のデザイン」で、デザインの見栄えが悪くなったり、崩れたりしないようにするための実装方法を紹介します。横一行配置のアイコンが改行してしまう、画像が横長になってしまう、フォームの入力欄がやたら広くなる、など一般的なデザインで見かけると思います。 Thinking About The In-between Design Cases by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 レスポンシブにおける中間のデザイン 中間のデザインとは 中間のデザインに備えて
Webデザインをレイアウトや構図から、最近のトレンドから、カラーや配色から、業種やジャンルから、印象やイメージから、そのデザインのアイデアや仕組みや作り方が分かるオススメの解説書を紹介します。 「Webデザインは見て学べ」と言われますが、単に見るだけでは足りません。400以上の魅力的なWebサイトのレイアウト、配色、フォント、写真、アイコン、構成要素、動き、プログラムなどを分析し、デザインのさまざまな角度から詳しく解説されたWebデザイン良質見本帳を紹介します。 本書は当ブログでも大好評だった「Webデザイン良質見本帳」（紹介記事）の第2版です。第2版といっても、内容はほぼすべてが刷新されており、現在の最新Webデザインに完全アップデートされています。 本書はWebディレクター・デザイナーだけでなく、Web制作に携わるすべての人に役立つ一冊です。Web制作の参考になるだけでなく、困った時の
WEBデザイン制作のなかでよく耳にするのが「作業時間」の問題。 制作会社に就職したら、仕事量が多くて残業が多くなりがち。 フリーランスや副業でデザインをしている方は、時間がかかるせいで時給換算したときに安くなりがち。 とのことです。 そこで今回は、全WEBデザイナーさんに見ていただきたい、あなたの作業効率をアップさせるのに役立ちそうなAIツールを18個まとめました。 今回ご紹介するのは 画像の編集・加工に役立つAIツール WEBサイトの制作に役立つAIツール プレゼンテーション資料作成に役立つAIツール リサーチに役立つAIツール タスク管理や生産性向上に役立つAIツール の5種類。 それぞれの特徴はこんな感じです。 ※表は右にスクロールできます→ ツール名 画像の編集 加工 WEBサイト 制作 プレゼンテーション 資料作成 リサーチ タスク管理 生産性向上 Canva ◎ – – – –
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
本当は教えたくないWebデザイン参考ギャラリーサイト37選
Webデザインの有料学習サイトが無料化 IllustratorやPhotoshop入門などが見放題
無料で「Photoshop」「Illustrator」「WordPress」などWebデザインが学び放題に！／事業譲渡に伴い有料会員サービスを終了した学習サイト「chot.design」の全レッスンが無料公開
Webデザインで「紙っぽさ」を出す方法を考えてみる｜akane
Midjourneyを１年間使って見つけた、Webデザインに使えるプロンプト全ガイド
私がWEBデザイン制作の参考になりそうだと思うサイトを61個挙げてみた。
Webデザインの参考になるギャラリーサイト11選 | Pulp Note
PANTONE に直接聞いてみた。DICとの違い。 - 株式会社サンコー：おもいをカタチにする仕事｜印刷・WEB・デザイン
ついに出た！2021年注目のWebデザイン人気トレンド9個まとめ
2022年に流行するWebデザインの最新トレンド10個まとめ | Web Design Trends
2020年、注目されているWebデザインの最新トレンドと技術の進化
Webデザイン制作をもっと楽に！便利な最新オンラインツール45個まとめ
【爆速UI設計術】モダンなwebデザイン素材集 - Qiita
Webデザインの種明かし、コピペできる最新HTML／CSSスニペット30個まとめ
2022年、Webデザインの新しいトレンド「クレイモーフィズム」のスタイルをさまざまな要素に適用できるCSS
Figma初心者でも大丈夫！ レスポンシブWebデザインをFigmaで作るための3つのポイント
Webデザインに悩まない、心をつかむ最新サイト30選まとめ
流行先取り 注目の最新Webデザインおすすめ30選まとめ
レスポンシブWebデザインで、スクリーンサイズが中途半端なときにデザインが崩れないようにするための実装方法
これはかなりオススメの良書！ 最近のWebデザインのアイデア・作り方がよく分かる -Webデザイン良質見本帳
WEBデザイン制作の作業に役立ちそうなAIツールを列挙してみた