19Web制作やUIデザインに役立つ「パーツ・カテゴリー」ごとにデザインをまとめているサイトをご紹介します。サイトをデザインする時は初めからパーツなどの細部を作り込むことはないのですが、全体的なデザインの方向性が決まった後でも、意外と見出しとかページネーションとかのデザインでなかなかアイディアが思い浮かばず、詰まってしまうことがあります。全体から見ると小さい部分なので似たようなデザインになりがちですし、一度ハマるとなかなか抜け出せないこともしばしば...。Proのノートアプリでデザインのアイディア帳を作るのもオススメです。Proのノートアプリを使ったスクラップブックの作り方を説明しています。PatternsパーツごとのWebデザインの他に、UI(ユーザーインターフェース)のパターンと解説が多く掲載されています。「Navigation」という項目を見てみると、ドロップダウンやアコーディオンといったナビゲーションパターンのリンクが並んでおり、それぞれどんな問題の時にどのように使用し、どう問題を解決するのかという機能面での説明が書かれています。デザインパターンの説明ページはパーツごとにデザインのスクリーンショットと紐付けられているので、作成を見ながらUIを包括的に学べます。デザインのパターンはこちらから、デザインのスクリーンショットはこちらのページから確認できます。Tapスタイル・タイプ・色・端末でフィルターをかけられ、複数の条件で検索できます。カード式のサムネールでとても見やすいです。Garage最近のデザインが多いので、UIのトレンドも一緒に確認できそうです。モバイルが多いかなという印象。Cloud様々なサイトからクオリティの高い46600以上のデザイン要素と1000以上のUIキットの中から検索が可能です。ユーザーが作成したデザインはダウンロード可能ですが、必ずライセンスや利用規約を確認しましょう。他の人が作ったデータを見ると勉強にもなりますね。CloudCalltoideaアイコン型のナビゲーションでカテゴリーが分かりやすいです。シンプルな作りで使い勝手もよいです。Catというサイトの中の一カテゴリーで、デザインのスクリーンショット以外にもSEOやCSSといったWeb制作に役立つ記事(英語)も掲載されています。DESIGN」以下にあります。youページやお問い合わせページといったページがカテゴリごとに細かくタグ付けされているので、UI全体のインスピレーションとして活用できるサイトです。毎日更新されています。CodePenブラウザ上でコードを書いてその場で確認したりサイトに貼り付けできるサービス「CodePen」で、コードとデザインを一緒に見ることができます。結局最後はコードに落とし込まないといけないので、このようなサイトはとても勉強になりますね。CodePen国内のサイト見出しデザイン.com日本語の見出しを集めたサイトです。見出しは結構悩むので助かります。デザインを見ながらどうやってCSSで組むかを考えるトレーニングにもよさそう。見出しデザイン.comブブンデザインアーカイブ日本語のパーツごとのデザイン集では、現時点で一番データが多いサイトだと思います。業界別カテゴリーもあるので、サイトのデザインに合ったパーツを探しやすいです。ブブンデザインアーカイブCroppyWebデザイナーのためのソーシャルスクラップブックサービスです。閲覧しているサイトの気になるデザイン部分をブックマークレットで切り抜き、自分のページで切り抜いたパーツの一覧を見ることができます。切り抜いたパーツデザインを色彩分析したり、お気に入り・フォロー機能などもあります。詳しい使い方はこちらです。CroppyWEBデザインのメインビジュアルまとめサイトの顔ともいえるメインビジュアル作成、毎回悩みますよね〜。サイトの分野や色でソートできるのはありがたいです。実際のサイトへのリンクも記載されているので、サイト全体のデザインも確認できます。WEBデザインのメインビジュアルまとめフッターデザイン.comサイト名の通り、フッターだけを集めたサイトです。最近は個性的なフッターが多いので、見てるだけでも楽しいです。フッターデザイン.comPinterest私はサイトのデザインやUIパターンはPinterestで見ることが多いです。かなりのヘビーユーザーで、カテゴリーごとにボードを作り、様々な分野のデザインやインテリア、ファッションなど気になるものを集めています。footer」というようにキーワードを入れて検索すると、関連画像がどんどこ出てきます。このページでご紹介したサイトのように手動でセレクトはされていないので、最初はざっくりとした内容の画像が出てきますが、ピンときたものをクリックすれば芋づる式に関連画像が出てくるので、行ったり来たりしながら探しているイメージに出会えます。画像だけでなく、画像をテーマごとにまとめたボードやユーザーも検索できるので、色々な角度から画像検索が可能です。designスマートフォンに特化したサイトやアプリのUIデザインを集めたギャラリーサイトは以下の記事でまとめました。参考記事スマートフォンサイト・アプリのUIデザインに特化したギャラリー参考サイトまとめ(随時更新)上記参考サイトではあまりお目にかかれない「サイトマップ」のデザインパターンは以下の記事でまとめています。サイトマップも似通ったデザインになりがちなので、参考までにどうぞ〜。3D」でz-indexの重なり順を確認するAboutフリーランスのWebデザイナーです。Web制作/デザイン/写真に関するメモや、仕事/育児/家事の両立に役立ちそうなことも書けたらと思っています。楽天ROOMやってます。reserved...。