見出し画像

Photoshop用のよく使うUIデザインキットを無料公開

どうも、フリーランスでWebデザインとフロントエンドエンジニアをやっているJohnyです。

今回は僕が以前に制作したPhotoshop用のUIデザインキットを無料で公開したいと思います。
ベーシックなWebサイトだとこのキットに含まれているUIを組み合わせて、写真を組み込んで、カラーリングを整えればWebデザインのカンプを完成させることができると思います。
その他の用途としましては、

・プロトタイプのワイヤーフレームとして
・コーディング勉強中の方の教材として
・カスタマイズしてみてWebデザインの勉強をする
・ただただ現役Webデザイナーの作るPSDデータを覗いてみたい

など、いろんな用途で使ってもらえれば幸いです。
記事の最後にダウンロードできるリンクを貼っておきます。
UIキットの全体像は下画像のとおりです。

画像1

この後セクションごとの説明を簡単にしていきますね。
その前になぜこのUIデザインキットを無料公開しようと思ったのか、簡単に触れますと、

・AdobeXDでも無料のUIキットが豊富に無料で公開されているので、特に珍しくない
・以前にデザイン制作が捗るように作ってはみたものの、案件ごとにオリジナリティを出すことが多く、僕自身はこのまま使うケースは少なくなった
(とは言っても本当に簡単なデザインを求められれば使うことはあります)
・Web制作を志している方々に使ってもらう方が有意義かもしれない

といったところです。
では説明していきますね。

メインビジュアル

画像2

ヒーローエリアとも呼ばれるサイトのメインビジュアル部分です。
グレーの部分に使用したい画像を差し替えて、ロゴやナビゲーションメニューやSNSアイコンを必要に応じて調整するだけで使えます。
サイズはブラウザの全画面表示に対応させた1920×1080pxで作成しています。
カンプを制作するときの要望に応じて全画面の必要がなければ高さを調整してカスタマイズしています。
あと初期設定ではレイヤーを非表示にしていますが、よく使う下にスクロールを促すエレメント画像のスライドショーで表示させる左右の矢印エレメントハンバーガーメニューなども揃っています。

コンセプトセクション

画像3

メインビジュアルの次に配置されることの多い、伝えたい想いやコンセプトを表示させるレイアウトパターンを2つ入れています。
よくある「私たちについて」というタイトルで別ページでしっかりと記載することが多いので、ここでは内容を少しだけ触れてリンクボタンを設置して誘導するというパターンが多いと思います。

カラムレイアウト

画像4

上段のコンセプトやその他にも使える写真と文章によるカラム(段組)レイアウトです。
グレーの部分に写真を入れてより印象的に魅せることができると思います。
コンセプトもそうですし、「業務内容」「事業内容」としてもいいでしょう。
このセクションを複製して、左に写真・右にテキストと入れ替えて交互に見せるパターンもよく使います。
写真の上にテキストの入ったボックスを重ねて、さらにそのボックスにドロップシャドウを付けている部分は、コーディング初学者の方には少し難易度が高い気もしますが頑張ってください。(要望がございましたらこのレイアウトの組み方のCSSコードも公開するかもしれません。)

カルーセルスライダー

画像5

商品などをギャラリーのように一定のスピードで流して表示させるカルーセルスライダーをWebサイトに組み込むときに、デザインカンプで表現する用のレイアウトです。
色違いのグレーの部分にそれぞれの写真を入れれば完成となります。
流れるスライダーということを表現するのに画面の端にある画像をわざと切る感じがポイントとなります。

ブログレイアウト

画像6

ブログの表示によく使われるカード型レイアウトカラムレイアウトの2パターンが入っています。

CTA(Call To Action)

画像7

企業のコーポレートサイトによく設置されるCTAセクションです。
CTAとは「Call To Action」の略称で、Webサイトの閲覧者に商品の購入や資料請求などの行動を促すために設置されるセクションです。

ニュースレイアウト

画像8

「お知らせ」や「トピックス」によく使うレウアウトを通常とダークモードの2パターンで入れています。

メンバーレイアウト

画像9

「スタッフ紹介」や「メンバー一覧」によく使われるレイアウトです。
写真と肩書き、名前、紹介文、リンクアイコンと一通りのエレメントは揃っていると思います。

テーブルレイアウト

画像10

2段組みに分かれたシンプルな表のレイアウトです。
カスタマイズして1段にしてもいいですし、罫線を追加してもっと表らしくしてもいいと思います。

バナーレイアウト

画像11

ブラウザ画面の横幅いっぱいを利用してバナーを3つ並べた場合のレイアウトです。
色違いのグレーの部分にそれぞれの画像を入れて、画像の上に配置している文字の視認率を上げるために画像の彩度を落としたり工夫してみるとよいかと思います。
たまにこういう画面全体を使ったレイアウトを入れることで、単調になりがちなデザインに目を惹くポイントを作れるかなと思います。

フッター

画像12

よくあるようなフッターのレイアウトです。
ロゴを差し替えたり背景の色を変えてみたりして完成させてください。
右下にはページの上部へ戻るアイコンも配置しています。
コーディングのときにはこのアイコンをスクロールしても常に右下にあるように設置したりします。

フォントについて

このUIデザインキットで使用しているフォントは以下のとおりです。

・Noto Sans JP Regular(日本語)
・Noto Sans JP Bold(日本語)
・Anton Regular(英語)
・Merriweather Regular(英語)

全てGoogle Fontsから使用・ダウンロードが可能なものとなっています。
ローカル環境に該当のフォントが無ければダウンロードしてインストールすれば大丈夫ですし、コーディング練習するときにはそのままWebフォントとして読み込めば使えます。

上記のリンクを開いて左上の「Search」というボックスに「Noto Sans」と入力すれば、左上に「Noto Sans JP」というフォントが出てきますのでクリックします。

画像13

すると右上に書体のダウンロードリンクがありますので全ウェイトを一括でダウンロードできます。
同じ方法で他のフォントもダウンロードしてください。

画像14

ローカル環境で使用するときには以上ですが、Webフォントとして使用したい場合の説明は長くなるので割愛します。
ググればたくさん情報も出てきますので。

GoogleFontsでは確か数年前からこの「Noto」という日本語書体をWebフォントとしても使えるようにサポートしていまして、どのデバイスで見ても同じ意図したフォントを表示できるようになりました。
なのでコーディング時に「font-family」に迷うならGoogleFontsで統一するというのも選択肢の一つではないかと思います。


「PhotoshopUIElements」のダウンロードは下記リンクとなります。
みなさんに有意義に使われることを祈っています。


Twitterでは他にもデザインやコーディングについての情報を発信しています。
もし気に入っていただけたらフォローやたくさんの方に使っていただく為の拡散もご協力をお願いします。


この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
ホントですか!?僕もです!!
27
インハウスのWebデザイナーを6年勤めた後に独立してWeb系のフリーランスとして6年が経ちました。デザインとフロントエンドを両方やってます。好きなモノ→ 活版印刷 | ZINE | 心躍る写真 | 寝覚めのコーヒー
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。