ウェブサイト制作には、常に新しいアイデアやインスピレーションが必要ですが、決まらずに悩んでしまうことも。 そんな状況を打開するには、たくさんの優れたデザインの実例を見ることで、次のアイデアを生み出してみましょう。 ここでは、最新ウェブデザインをいち早くチェックできるオススメWebギャラリーサイトを厳選してご紹介。 インスピレーションとしてはもちろん、クライアントの打ち合わせやイメージの共有にも活用できます。 積極的にインプットを増やし、デザインの引き出しを増やしてみましょう。 このリストは2年ぶりにまとめ直したアップグレード版となります。 コンテンツ目次 【2024追加分】最新Webギャラリーサイト landing.love Design Spells Godly BentoGrids 404s Footer Navbar Gallery 国内Webギャラリーサイト SANKOU! URA
みんなで作るWEBデザイン参考集「ブックマ！」
感性を刺激するWebデザインギャラリー＜bookma!＞
本記事は、身の回りの困りごとを楽しく解決！ by Works Human Intelligence Advent Calendar 2022の13日目の記事です。 はじめに エンジニアの私「個人開発したアプリのデザインがイマイチで世に出す勇気がなくて困っとる」 デザイナーの知人「どれどれ。あー確かに。いい意味でエンジニアらしさ出てますな♪」 私「『いい意味で』を先頭に付ければ何いっても許される説！！」 知人「デザイン作るときは既存にあるアプリやサービスのUIを参考にするといいですよ」 私「具体的には何を参考にすればエンジニアでもいい感じにデザイン作れそうですか？」 知人「それでは自分が参考にしているデザイン系のサイトをいくつか紹介していきます」 てことで、今回はエンジニア向けの個人開発やアイディア探しで役立つサイトをまとめていきます。 「ポートフォリオのアイディアが思いつかない」「開発した
2014年10月12日 Webデザイン 私の大好きな手描き風Webデザイン！見づらくなったりするのでバランスが難しいデザインではありますが、「普通のデザインじゃ物足りない！」という時に取り入れると、程よくゆる〜い感じがでます。ここでは参考になるWebサイトや、デザインする際に使えそうなフォント・アイコン・ブラシなどを紹介します。 ↑私が10年以上利用している会計ソフト！ 手描き風Webデザイン – 参考サイト 見とれてしまうサイトばかりです。 Christian Sparrow http://www.christiansparrow.com/ ブラン http://www.bla.jp/ BootB http://bootb.com/en/ PSYOP http://www.psyop.tv/ a simple measure http://www.asimplemeasure.com/
携帯サイトのデザイン参考サイトまとめ -歌って踊れるプログラマー
年末から、携帯サイトを構築しています。 え、スマートフォンやiPhoneジャネーノ！？とか言わないでください。 デザインができないので、参考になるサイトを探しつつ、自分用にまとめてみました。 モバイルサイトデザイン集のモバイルデザインアーカイブ By ニューインデックス株式会社様 オススメ度： ★★★★★ 掲載数 ：★★★★★（約1700サイト／2010年1月現在） コメント ：圧倒的なサイト数の多さ！そしてカテゴライズされているので見やすいです。 ▼一覧ページ。 モバミル イケてる携帯サイトデザイン By 面白法人KAYAC様 オススメ度： ★★★★★ 掲載数 ：★★★★★（約600サイト／2010年1月現在） コメント ：3キャリア分の画面キャプチャがあり、各キャリアの絵文字の表示の違いなどが非常にわかりやすいです。 ▼一覧 ▼QRコードと、３キャリアの表示の違いが見れま
JAJAAAN代表です。このサイトの制作者です。趣味は、最近始めたアウトドア、最近始めた釣り、最近始めた格闘技です。尊敬する人はさかなくん。人生で学んだことは「女は怖い」ご連絡はメールかTwitterでDMください。 メール Twitter SEE MORE 今回はCSSのみで作れる見出しデザインについて100個サンプルを作ってみました。 見出しなどで使えるデザイン例についてどこよりも詳しく（おそらく..）紹介・解説しています。すべてCSSのみで実現しているものになりまります。 コピペしてそのまま使用していただいて構いません。デザイン例によって作成時のポイントや注意点も書いています。 CSSのみで作る見出しについて見出しについて、マークアップで使用されるHTMLタグはh1〜h6になるかと思います。サンプルのHTMLではh2を例にしていますが、hタグである必要はありません。ご自由なHTMLタ
Webデザイン参考記事まとめアプデ（UPDE）とは アプデは、Web制作に関する参考サイトの最新記事をまとめたサイトです。特にWebディレクター・Webデザイナー・HTMLコーダー・フロントエンドエンジニア・Webマーケッターなど、いわゆるWebクリエイターの方に役立つ参考記事をまとめています。Web制作の最新トレンドやテクニック、Webマーケティングノウハウ、photoshp/illustrator/dreamweaverなどに代表されるadobeソフトの使い方、便利な素材やWebサービス・オンラインツールなど、様々な情報をサイト毎やカテゴリーやタグに分類してご紹介しています。なお、記事の掲載にあたり事前に全てのサイト様からRSS情報取得のご許可をいいただいております。 Webデザイン参考人気記事ランキングについて アプデのTOPでは、今日公開されたWeb制作サイトの参考記事の中から、S
1999年から現在までのフライヤー・チラシのデザインをアーカイブしました。フライヤー、DM、チラシ等の紙のデザイン制作の参考に、まとめサイトとしてご活用ください。
グラフィカルに伝えるインフォグラフィックの勉強に最適なデザイン参考サイト20個とツールサイトのご紹介 ｜https://wp.yat-net.com/name
2016年 01月 21日 グラフィカルに伝えるインフォグラフィックの勉強に最適なデザイン参考サイト20個とツールサイトのご紹介 カテゴリ： デザイン タグ：インフォグラフィック 情報を伝えるのに、文章では伝わりづらいことが多々あります。そんな時に必要とされるのがデザインの役割なのですが、中でも人が普段あまりみないような情報、専門性の高い情報などは、一層伝わりづらく、文章や数字を並べただけでそれを理解するには非常に敷居が高くなってしまいます。 そんなとき、グラフやビジュアルを使ってうまく情報を見せて伝えるのがインフォグラフィックという手法です。 目次 インフォグラフィックを作ることのメリット インフォグラフィックの参考に インフォグラフィックを作ることが出来るサービス インフォグラフィックを作ることのメリット インフォグラフィックを作ることのメリットは、上記で書いたとおり、伝えやすさにあり
今回は素材の紹介ではなく、デジタル・リアルを問わずスクラップブッキング・クラフトやコラージュ作成時にデザインや使用している素材など、参考に出来そうなサイトを紹介(海外のサイト多いです) スクラップブッキングとコラージュ、クラフトは厳密には全くの別物ですが、まぁ細かいことは気にせずなにかプラスになるものがあればいいかな!くらいに・・・ ※素材の中にはダウンロード可能なものも有ります。 まずは日本代表!akizoさんのスクラップブッキング専門サイト (ダウンロードやチュートリアルも有り) http://digital-scrapbooking-japan.blogspot.com/ つぎは個人的におすすめなサイト「sahlin studio」です。 freebieのページにあるダウンロード可能な各素材をクリックしていくと、その素材を実際に使った方の画像がたくさん投稿されてて、とっても参考になり
情報やデータを視覚的に表現するインフォグラフィックデザインがまとめられているデザイン参考サイト - NxWorld
インフォグラフィックとは情報やデータを視覚的に表現したもので、文字や言葉にすると膨大な量になってしまったり表現がわかりづらくなるものをイラスト・グラフ・図・ピクトグラムなどを用いてわかりやすく見せることができます。 そんなインフォグラフィックデザインが多数まとめられたデザイン参考サイトを紹介します。 全体的な配色や配置といったバランス、様々な形状やサイズの要素の組み合わせ方など、インフォグラフィックに限らずデザインとして参考になる部分も多いです。 infographic.jp インフォグラフィック作成サービスを行っている企業が多数のデザイン事例を紹介しており、ページ上部にあるナビの「GALLERY」からより多くのデザインを閲覧できます。 infogra.me インフォグラフィックやデータビジュアリゼーションを共有するコミュニケーションプラットフォームで、国内外問わず多数のインフォグラフィッ
こんにちは。デザイナーの藤田です。 突然ですが、みなさんはフロントエンドエンジニアにアニメーションの依頼をする際、どのような手法でコミュニケーションを取っていますか？ 私の場合、デザインを印刷した紙に細かく仕様を書き込んでいくのですが、アニメーションの参考になるサイトを例に挙げて、イメージを共有することもあります。 なので、今回のブログではふだん集めているアニメーションの参考サイトを2回に分けてご紹介していきたいと思います。 第１回はメニューの展開アニメーションに絞ってご紹介いたします。 キーモチーフを踏襲した展開アニメーション はじめは、デザインに使っているモチーフをメニューを展開のアニメーションにも適用している例です。 Super Crowds https://supercrowds.co/ 全体的にアニメーションがとても気持ちよく、イージングの調整をとても入念に行なったんだなという印
1カラムレイアウトとは 一般的なホームページはカラムと呼ばれる行で区切られたレイアウトになることが多く、一番多いのは、細めのサイドバーカラムとコンテンツカラムの2カラムレイアウトであるが、最近はPCの画面解像度が高くなっていたり、逆にスマートフォンなど横幅が狭いデバイスが増えてきているため、柔軟なレイアウトをくめるようにサイドバーをもうけず、まっすぐ縦に配置する1カラムレイアウトの手法を取り入れることが増えてきている。 ランディングページの様な縦に長いワンページデザインのサイトでは特にこの傾向が強い。
【デザイン参考】名古屋市 注文住宅 愛知県の工務店 阿部建設
阿部建設では、こだわりの注文住宅から、一人ひとりの暮らしに合わせたバリアフリー住宅、思い出を活かしたリノベーション、さらに採算と居心地の良さを両立した施設建築まで、幅広く事業を展開しています。 地域に根差した私たちだからこそ提供できるオーダーメイドの価値を高め、目の前のお客様にとことん向き合いながら、一緒に理想を追求していく存在であり続けます。
士業のホームページデザイン集｜士業デザイン参考集
士業の優れたデザインのホームページデザイン集です。ホームページを制作される時の参考にして下さい。
ロゴマークの矢印をモチーフに、ロングシャドウ等のトレンドをデザインに取り組んだサイトです。 なかなか珍しいデザインで、目を引きます。
ヘッダー、見出し、フッターデザインをパーツ別に見られる見本サイトとデザイン参考サイトまとめ | 成果に導くホームページ制作ならウィズスタイル
ヘッダー、見出し（h1,h2）フッターデザインをパーツ別に見られるサイトとデザイン参考サイトまとめ 今回は、ヘッダー、見出し（h1,h2など）フッターデザインをパーツ別に見られるサイトとデザイン参考サイトのまとめを作りました。 ブブンデザインアーカイブ http://bubundesignarchive.jp/ ヘッダ、見出し、グローバルナビ、サイドメニュー、バナー、リンク、パンくず、問い合わせボタン、フォーム、フッターなど、「部分別」にアーカイブされているのでパーツ別に参考にしたいときにはもってこいのサイトです。地図、テーブルなど21パターンのカテゴリから選ぶことが出来ます。 また、業界別のカテゴリからも選択できるので、テイストを合わせて探したいときにもお勧めです。 Croppy http://croppy.org/ ボタン、見出し、ヘッダー、フッター、バナー、ロゴ、グローバルナビ、サイ
みんなで作るWEBデザイン参考集「bookma!」
WEBデザインを制作する時皆さんはなにを参考にしていますでしょうか？今回紹介するのはWEBデザインに役立つみんなで作るWEBデザイン参考集「bookma!」です。国内の様々なタイプのWEBデザインが投稿されていて参考にすることができます。 ただ単に並べるだけではなく、サイトのテイストやカラー、カテゴリ、サイトタイプなど様々なジャンルで絞り込みが行えるみたいです。 詳しくは以下 クオリティを保つため、審査はあるみたいですが、WEBデザインは広くユーザーから随時投稿を募集していて、Twitterやサイト投稿支援Greasemonkey Script、Firefoxアドオンなどで投稿することができます。国内の様々なWEBデザインを参考にできるというのはWEBデザイナーにとってはありがたいWEBサービスではないでしょうか？ Designdevelopでは海外のWEBデザインが多いのですが、やはり国
カルーセルとは カルーセル[carousel]とは、メリーゴーランドや空港の回転コンベアーなど、くるくると回るものを指し、WEBデザインにおいては、横に自動でスクロールするスライドギャラリーの様なもののことを指す。単純にスライドショーと表現する事もある。
こんにちは18号です。 ショップカードやパンフレット、チラシ、などグラフィックのデザインに付き物な地図のデザイン 私が地図を作成する際に意識しているポイント４つと 地図のデザイン、マンネリだ〜って時に参考になりそうなもの ー地図をデザインする時のポイントー ①方角 ほんとうに基本的なことですが地図の方角は上が「北向き」になっている必要があります。 何らかの理由で地図の上が「北」にできない場合や、大きい地図には 必ず方位マークを入れましょう！ ②目的地の位置 地図エリア内のどこに「目的地」が来るように作成するのか、も重要なポイントになります。 どの方角からでも分かりやすいように目的地が真ん中になるように意識して作成しています。 あとはある程度の大きさ！ 他の目印と同じ扱いでは、専用の地図の意味がなくなってしまいます〜 ③目的地までの仮想ルート
![分かりやすい地図をデザインする為に押さえておきたい４つのポイントとデザイン参考[デザイン] | おむすび](https://cdn-ak-scissors.b.st-hatena.com/image/square/392e519ebe29b334a45ded4f6e583b15d532106f/height=288;version=1;width=512/https%3A%2F%2Fweb-omusubi.com%2Fupload%2Fm_2016420920045042.jpg)
webサイトをデザインする際には、すでに公開されているさまざまな種類のサイトを参考にすることが多いと思いますが、膨大な数のサイトから目的に合ったデザインを探すのはなかなか大変なもの。またある特定部分のデザインだけがほしいという場合もあるのではないでしょうか？そんな中今回紹介するのは、さまざまなテーマ別UIを集めた「Calltoidea」です。 大きく1つずつのwebサイトというくくりではなく、タブやフッター、ログインなど、参考にしたい場所をカテゴリ別に探すことができる嬉しい事例集となっています。 詳しくは以下 主に海外のサイトがメイン。フォーム、スライダー、カレンダー、NOT FOUND、プロフィール、coming soon、コンタクトといった、よく使用するジャンルが分類されており、それぞれのサムネイルをクリックするとリストとして閲覧することができます。他、フラットカラーなどはカラーコード
【ホームページ制作】参考になるWEBデザイン参考サイト 10選
ホームページ制作時にWEBデザイン参考サイトをみて、 自社のサイトのイメージにお役立ち頂けると幸いです。 打ち合わせでもよく使うサイトで実用性の高いサイトを厳選しました！ .SG_BOOKMARK 詳しくはこちら ズロッ […] Related posts: 【Twitter】天恵製菓株式会社様のキャンペーンに参加しました。 「れきしおいしとんだばやし」キャンペーン開催中！
フォームデザイン 参考・テンプレート | WebLab
Pattern Tap 現在185種類のフォームデザインがまとめられております。 Form Generators, Styling, Inspiration | CSSAddict おしゃれにデザインされたフォームがたくさん。 Web Form Design: Modern Solutions and Creative Ideas 37 Ways to Design the Comments Form | Blog design Blog for Blog Designers 37種類のコメントフォームデザインのまとめです。シンプルですっきりしたフォームがたくさん。 Form Elements: 40+ CSS/JS Styling and Functionality Techniques | Noupe スクリプトを使ったフォームのサンプルがまとめられております。また、こちらのブログでは
「DIYで本棚を作ってみたい。」 そう思ったことはありませんか? 前回の「安価で手軽!!足場板製本棚・シェルフ・テーブルの作り方とインテリア例」の中で紹介した本棚の場合、上から見るとL型のスペースがあり、杉の足場板(柿渋塗装)と金物を使って、壁から壁・床から天井までのデザインにした訳ですが、 DIYのメリットは 「隙間にぴったり」や「出し入れしやすい高さ」など欲しいサイズの本棚が作れること 収納量に合わせた本棚が作れること 凝ったデザインができること など自由度が高いことです。 でも、いきなり本棚作ろうと思っても「何をどう始めてよいのやら?」ということにもなりかねませんので、私が本棚をDIYした時の手順と参考になりそうなデザインのアイデアを紹介して行きたいと思います。
（※）「かっこいい系」「キレイ系」といった分類 LP幹事 画像引用：LP幹事 おすすめポイント 圧倒的な事例の探しやすさ あらゆる業界・色・イメージからLP事例を探すことが可能 スマホのデザインも閲覧可能 キャッチコピーも閲覧可能 掲載数 2,586件（2023年4月時点） LP幹事の特徴 当サイト「Web幹事」の兄弟サイトです。 これまで「ランディングページの事例まとめサイトはたくさんあるが、本当に探しやすいサイトがない」という想いから「事例の探しやすさ」を追求して作成しました。 業界・色・イメージなど、あらゆる切り口からLPデザインを検索可能。 「化粧品業界でピンクがメインカラーのLP」など、組み合わせの検索も可能にしました。 またWeb幹事と同じく、プロが選んだ優良なLP制作会社を無料で紹介してもらうことも可能です。 LPデザインでお悩みの方は、ぜひご覧ください！ 【無料】LPのデザ
世の中には様々なウェブサイトがありますが、ほとんどのサイトで取り入れられているのがヘッダーですね。 皆さんはどのようなデザインを思い浮かべますか？ PC時のデザインであれば、「左端にロゴがあり、右端にナビゲーションとしてリンクがある」といった形を想像される方が多いのではないでしょうか。 作成する機会が多いだけに、どれも同じようなデザインになってしまう…とお悩みの方もいらっしゃると思います。 今回はそんなヘッダーのデザインを、各サイトごとにどのようなデザインの工夫がされているかに焦点を当てて見ていきたいと思います。 ヘッダー・メガメニュー・スマホメニューに絞ってデザインをチェックしていきます！ ヘッダーまずはベーシックなPC時のヘッダーから見ていきましょう。 背景で区切りレイヤー感を MEJINAVI2020｜目白大学まるわかりサイト 株式会社リブセンス レイヤー感を感じさせるデザインです。
AMUSE RECRUIT 2025｜株式会社 アミューズ 採用サイト｜AMUSE INC. RECRUITMENT
どうも、ごはんは目で楽しむやなぎさわです。実家が飲食店をやっており、お店のWebサイトの参考に、何か良いサイトがないか探していたら、お腹がグーグー、よだれがタラリ、そんなWebサイトをたくさん見つけてしまったので、14店とプラスでもう1店ご紹介したいと思います。 デザイナーの方は、食べに行きたくなる飲食店のサイトデザインの参考に、そうでない方は今日のディナーの参考にしていただけたら幸いです。 それでは、ご賞味ください。 1店目：こんなん見たらやられる鉄板焼き「可らし」 サイトを開くとすぐに始まる動画に完全ノックアウトです。サイトのデザインがめちゃシンプルで、動画とメニューとアクセスのみというこだわり。 とにかく食べに来い感が伝わってきます。鉄板の上で焼かれる食材達。腹が減ります。 2店目：創業昭和三十八年！ちゃんぽんの「近江ちゃんぽん亭」
Xux Webzine【クスクスウェブマガジン】Webデザイン参考ギャラリー - 日本国内外でWebデザイン制作の参考になるWebサイト･LPを集めたギャラリー･リンク集。Webデザイナーお役立ちコラムも随時公開中！
日本国内外でWebデザイン制作の参考になるWebサイト･LPを集めたギャラリー･リンク集。Webデザイナーお役立ちコラムも随時公開中！
レストランやカフェなどで欠かす事ができないメニューブックですが、そのデザインは店の印象を左右する一つと言って過言ではないでしょう。高級レストランで出てくるような革張りのもの、ファミリーレストランで見るような写真をふんだんに使ったもの、といった様々な種類があるうち、ここでは、文字を中心としたシンプルなメニューブックについてご説明します。 シンプルなメニューが合う依頼とは？ ミシュランの星が付くようなランクの高い飲食店は、メニューブックはあえて文字だけのシンプルな構成にし、写真やイラストを使わないのが通例ですが、そのような店からの依頼は滅多にないので、もっと一般的な店を対象としましょう。 売れ行きを良くするにはメニューに料理の写真を載せるというのが鉄則です。 しかし、美味しそうに写っている写真でないと逆効果になってしまうため、料理の撮影はプロのカメラマンに頼む事になりますが、少し敷居が高いと感
フラットデザイン（Flat Design）とは、2013年にWEBで流行したデザイン手法のこと。 iPhoneやMacでappleが取り入れたスキューモーフィズム（skeuomorphism）という、現実の質感を追求したリアリズムの対極として、ドロップシャドウやグラデーションを使わない単色・もしくはカラフルな色遣いで構成されるシンプルなデザインのことを指す。 ちなみに、このフラットデザインは過去にも流行したスイスデザインのリバイバルである、ともされています。
配色の最良の組み合わせ見本を自動作成するWebツールほか、いままで集めていたカラーデザイン参考リンク集を一挙に公開いたします。配色の役立ちリンク集です。 当サイト関連記事： ・シンプルなデスクトップ壁紙集がいい感じな Simple Desktops ・ブログ・ホームページ作成に役立つWeb自動作成便利ツール集その２ ・ブログ・ホームページ作成に役立つWeb自動作成便利ツール集その１ ■WEBデザイナーはヘビーユース間違い無しのカラーパレットジェネレーター「Color Scheme Designer」 : ライフハッカー http://www.lifehacker.jp/2009/08/webcolor_scheme_designer.html Color Scheme Designer(カラースキームデザイナー)の紹介記事です。当サイト関連記事にあげたシンプル壁紙集のときは、旧バージョンの
ガーリーデザインとは、10-30代女性が好む可愛らしいデザインのこと。 一口にガーリーといってもいろいろな方向性があり、パステル調のこどもっぽいイラストのガーリーから、ロココなどのデコラティブな高級感のあるガーリーなど、さまざまなタイプに分類することができる。 男性目線だとステレオタイプ的に「ピンクを使っとけばガーリー」と短絡的に考えがちだが、実際はそうでも無いらしい。ブルーでもガーリーになるし、イエローでもガーリーになる。 ストライプ柄、アイビー（つた・蔦）フレーム、サークルデザイン、リボン、フラワー、虹彩・パステル・イラスト・フラットなどの要素をうまく組み合わせることでガーリーデザインになることが多い。
【2021年最新版】媒体別！広告バナーのデザイン参考サイトまとめ
「デザインを発注する予算ないよ・・・」 「効果の出るバナーデザインって何・・・」 広告運用担当者やデザイナーが日夜制作しているWeb広告のバナーですが、様々な課題に直面しますよね。 そこで今回は、大手広告代理店でクリエイティブプランナーをしていた筆者が、よく使っていたバナー広告デザインの参考になるサイトを媒体別にまとめました。 「業種別に調べたい」、「競合企業の広告を閲覧したい」、「ふわっとしたテイストで検索したい」など、現場で出てくる様々なニーズにお応えします。
最近はBootstrapを使ってWebサイトを作成したり、既存サイトのレスポンシブ化を行うことが多いです。レスポンシブ化を行うときに注意しているのが、UI/UXについて。単に１列表示すればよいというものでもなく、スマートフォンで閲覧したときに見やすい表示にする必要があります。 そんなときに便利なのが、このページで紹介するような参考サイト。どのWebサイトもデザインのクオリティが非常に高く、レスポンシブ化の参考にもなります。 Bootstrapの公式サイトでたくさん公開されているので、デザインの参考に、レスポンシブ化の参考にしてみてはいかがでしょうか？ Bootstrapで作られたWebサイト CachetHQ Latitude Supply Co Tsaa Tea Shop Johan Holmberg George & Harrison BARE Atomico Stupid Studi
機能・要素から探すWebデザイン参考ギャラリー・リンク集 | Web Design Garden | 毎日更新！Webデザイン参考ギャラリーサイト
AMUSE RECRUIT 2025｜株式会社 アミューズ 採用サイト｜AMUSE INC. RECRUITMENT
STIMED.jsは一定の時間経過等、時間でCSSを制御するスクリプトです。jQueryに依存します。指定方法は以下のような感じ。 stimed.style.create([ {target:'body', time:'00:00', property:'background-color', value:'#fff'}, {target:'body', time:'18:00', property:'background-color', value:'#000'}, {target:'body', time:'24:00', property:'background-color', value:'#fff'} ]); 昼と夜でコントラストを変えたり、要素の色を変えたり、画像を変えたり、要素を動かしたり、とアイデアは豊富です。transition-delay等じゃサポートしきれない仕様に対応
WEBデザイン参考サイトまとめ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
こんにちは、デザイナーの藤田です。 前回はメニューの展開アニメーションの参考を紹介しましたが、今回のブログでは最近流行しているボタンのホバーアニメーションについてお話したいと思います。 ▼前回の記事 ボタンのホバーアニメーション参考 吸い付くボタン https://fazetaproducciones.com/en 最近よく見るようになった、リンク付近にカーソルを寄せるとボタンが吸い付いてくるというインタラクション。 クリッカブルであることがわかりやすく、かつサイトの雰囲気をリッチに見せられる手法ですね。 カーソルで示唆 https://www.wowtapes.com/ カーソルをオリジナルデザインにし、インタラクションを示唆するという手法です。 こちらも最近のホバーのトレンドで、使いどころを間違えなければユーザビリティの向上にも繋がるのではと思います。 枠を塗りつぶす https://
【男性向けのWebデザイン】参考サイト構築の５つの表現方法
男性読者を惹きつけるWebデザインとは？ 男性を主なターゲットとしてWebサイトをデザインするには、シンプルで力強い印象を 与える必要があります。 そこで男性に受け入れられやすいデザインタッチにするには、どんな表現方法があるのか？ 今回は参考サイトをつくるときのデザインポイントを５つに絞ってお伝えしていきます。 ベーシックなレイアウトで明快にまとめる 【レイアウト】 男性向けに特化したサイト構築をレイアウトするには、 コンテンツの内容やナビゲーションをわかりやすくする 機能的にデザインすることを優先する あえて人の注意を引こうとするような不規則なレイアウトよりベーシックな構成に したほうが男性ウケは良いでしょう。 どちらかと言うと斬新なものより、 一般的なシンプルなものが好まれます。 なぜなら、 求めているものを少ない手順でしかも簡潔な操作性で短時間で 探したいからです。 そのためには、
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
本当は教えたくないWebデザイン参考ギャラリーサイト37選
【まとめ】エンジニア向けデザイン参考サイト - Qiita
手描き風Webデザイン – 参考サイトや無料のフォント・アイコン・ブラシなど
CSS見出しデザイン参考100選！コピペ可！どこよりも詳しく解説！
Webデザイン参考記事まとめアプデ（UPDE）
FAJP / フライヤー・チラシのグラフィックデザイン参考サイト
スクラップブッキングやコラージュの素材/デザイン参考サイトまとめ
モーションデザイン参考〜メニューの展開編〜 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
1カラムのWEBデザイン参考サイト一覧 | WEBデザインギャラリー
2カラムのWEBデザイン参考サイト一覧 | WEBデザインギャラリー
カルーセルのWEBデザイン参考サイト一覧 | WEBデザインギャラリー
分かりやすい地図をデザインする為に押さえておきたい４つのポイントとデザイン参考[デザイン] | おむすび
デザイン参考事例集としておすすめ さまざまなテーマ別UIを集めた「Calltoidea」
壁面本棚DIYの手順と【難易度別】本棚デザイン参考事例30選
LP（ランディングページ）デザイン事例50選！デザイン参考サイトや作り方も【2024年5月最新版】 | Web幹事
【2020年版】ヘッダー・メガメニュー・スマホメニューのデザイン参考まとめ | 東京のホームページ制作 / WEB制作会社 BRISK
Web Design Garden | 毎日更新！Webデザイン参考ギャラリーサイト
【デザイン参考】見ているだけで腹が減る飲食店のWebサイト14店+おまけPR1店
シンプルで上品なメニューのデザイン参考集 - 99designs
フラットデザインのWEBデザイン参考サイト一覧 | WEBデザインギャラリー
配色の組み合わせWebツールほか、カラーデザイン参考リンク集。
ガーリーのWEBデザイン参考サイト一覧 | WEBデザインギャラリー
Bootstrapで作られたレスポンシブWebデザイン参考サイトまとめ
「一定の時間経過したら等、時間でCSSを制御するスクリプト・「STIMED.js」」のご紹介| Webデザイン参考記事まとめアプデ
モーションデザイン参考〜ボタンのホバー編〜 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作