Freelance Wanted
WEB制作をするうえでどう作成すればよいか、どうデザインするのがよいか悩むことが多くあると思います。
このブログではそんなWEBデザイナーの役に立つサイトを紹介します！
目次
動くWebデザインアイディア帳
動くWebデザインアイディア帳ではホバーやクリックなどのユーザーのアクションにより変動する箇所のデザインの参考をコード付きで見ることができます！
こちらは書籍がもととなっているサイトで「動くWebデザインアイディア帳」と「動くWebデザインアイディア帳 実践編」が出ており、動きのあるデザインを作成する際にどんなレイアウトにするのが良いか迷ったときにすごく参考になります。
また、例えばボタンのホバーアクションについてコーダーさんに伝えたいときにJPGなどのデータのみではホバー後にどういうデザインになるかはわかっても、そのデザインになるまでにどういう動きをするかまでは伝えられないので、このサイトをコーダーさんに共有することでこういう動きがさせたい！と明確に伝えることができます。
サイトの使い方
例えばグローバルナビゲーションを作成する際に、グローバルナビゲーションだけでも26種類のレイアウト・アニメーションから選ぶことができます。
適当なアニメーションを選んだら以下のような詳細ページに遷移します。
デモページが用意されているのでどのようなレイアウトにするか参考にしましょう！
コーディングの時もHTML・CSS・JSをコピー＆ペーストするだけ！
あとはデザインに合わせて調整すれば簡単にグローバルナビゲーションを実装することができます。
さらにサンプルコードを利用したのに動かないときのチェック項目まで用意されていています…！
至れり尽くせりですね。
注意事項
TOPページ上部にも記述があるようにこのサイトは「3年間の期限付き」のようです。
https://coco-factory.jpから始まる記述をしてしまうとサイト閉鎖後に支障が出るので気を付けましょう。
期限は書籍の売れ行き次第で変わるようなので書籍のほうもぜひチェックしてみてください！
WEB Design Clip
WEB Design Clipはデザインの参考サイトです。
こちらのサイトはほぼ毎日更新されているので常に最新のデザインを見ることができます！
登録されているサイト数が3,844サイト（2022/05/23 現在）とかなり多いのであなたの探しているような参考サイトを必ず見つけることができるでしょう！
サイトの使い方
一覧のサムネイルから自分のイメージに合ったサイトを見つけることができます。
画像を押したらそのサムネイルのサイトにリンクし、ホバーすると出る虫眼鏡のアイコンをクリックするとこのサイト上の詳細ページへリンクします。
ただ一覧から探すだけでなく、上のタブを切り替えることで日本以外のサイトを見ることが出来たり、画面右上のメニューボタンをクリックすると検索が表示されて様々な条件で自分の見たいジャンルのサイトを見つけることができます。
「キーワード検索」「Main Color」「Sub Color」「Layout」「Category」「Tag」と6種類の検索から探すことができるのでかなり探しやすいですよ！
Webサイト制作の参考になる日本のWebデザインリンク集 WEB Design Clip
ファビコン favicon.icoを作ろう!
こちらのサイトでは簡単にfavicon.icoを作成することができます！
ファビコンとはブラウザのタブに出てくるサイトを表すアイコンのことです。
このファビコンは拡張子が「.ico」なので通常Photoshopでは書き出すことができない形式となっています。
そのためこのサイトで簡単に作成しましょう！
サイトの使い方
まずはファビコンのサイズを決め、そのサイズでPhotoshopでそのサイズでpngデータを作成します。
もし作成したサイズが32×32であれば真ん中の「32×32用画像ファイルを選択」で作成したpngデータを選択します。
後は「favicon.icoを作成」ボタンを押すだけです！
そうすればicoファイルができるので、ダウンロードして使用しましょう。
おまけ
このサイトのサイトの運営会社では他にもサイト制作に役立つサイトやアプリを作成しているようです。
すごく役に立つものから用途不明なサイトもあり面白いので是非フッターからほかのサイトも見てみてください！
QRのススメ
QRのススメでは様々な用途に合わせたQRコードが作成できます！
あまりWEBデザインではQRコードは使用しませんが、WEBサイトに合わせてパンフレットやチラシを作成するときにサイトに飛ぶことのできるQRコードを載せておくと簡単にサイトを閲覧できるようになります。
なので普段QRコードは必要ないと思うデザイナーさんも頭の片隅に入れておくといざというときに役立ちますよ！
サイトの使い方
サイト上部の「さっそく作る」という箇所にQRコードを作成したいサイトのURLを記入し、「OK」ボタンを押します。
すると、QRコード画像の調整ができるページに遷移するのでそこから自分の作成したいQRコードのサイズや色・アレンジ・ファイル形式を選択します。
ファイル形式は使用用途を基準に決めるのが良いです。
基本的にベクター形式で作成するパンフレットやチラシに使用する場合は「EPS」を選択すると良いですよ。
全ての調整ができたら「ダウンロードする」ボタンからダウンロードして使用しましょう。
tinypng
tinypngでは画像の軽量化をすることができます！
SEO対策やユーザビリティ向上のためあまりサイトの動きが重くなるのは避けたいですよね。
サイトが重くなる原因として画像が重いということがあります。
そのためコーダーさんが書き出してそのまま適切な状態で画像が使用できるようにデザイン作成時にtinypngで画像を軽くしておきましょう！
サイトの使い方
まずは軽量化したいWebP・PNG・JPEGいずれかの画像ファイルをまとめて「Drop your WebP, PNG or JPEG files here!」と書いてある枠の中にドラック＆ドロップします。
すると自動でそのファイルを軽量化してくれるのであとはダウンロードするだけです！
一つずつダウンロードしたい場合は「download」というテキストボタン、すべてのファイルをまとめてダウンロードしたい場合は「Download all」という緑のボタンをクリックしてください。
AUN
AUNは画像やサイトのキャプチャにメモを書き込み共有ができます！
デザインやコーディングで修正指示を出す際にどこの箇所についての指示なのかが伝えずらい時がありますよね。
しかし、AUNなら画像のピンポイントな位置にメモを残すことができます！
サイトの使い方
「PC内の画像」からデザインの書き出しデータ・またはコーディングのキャプチャをドラッグ＆ドロップします。
サイトは「ページキャプチャ」でURL入力でもよいですが、テスト環境などベーシック認証の掛かっているサイトは401表示になってしまうのでコーディングもキャプチャを事前に用意しておきましょう。
画像を選択すると上記のようなページに遷移します。
そこで画像のメモを残したいところをドラックします。
するとそこに対するメモを残せる入力欄が表示されるのでそこにメモの内容を記入し、「メモを追加」ボタンをクリックします。
追加されたメモは左側に一覧として表示されます。並び順もドラック＆ドロップで自由に変更することができます。
全てのメモを追加し終えたら右上の「保存して終了」ボタンをクリックします。
そうするとURLが発行されるのでそのメモを共有したい相手にURLを伝えましょう！
アスペクト比計算ツール
アスペクト比計算ツールは任意の数字を入力すると自動でアスペクト比計算してくれます！
画像を表示するときなどにきれいな比率で表示したいときに便利ですね。
ここまでこだわりをもってデザインするように意識するとさらにデザイナーとしてレベルアップすることができますよ！
もし、どのアスペクト比がどういうときに効果的なのかが気になる方は同じサイト上で解説があるようなので一度こちらに目を通しておくとよさそうです！
アスペクト比とは
サイトの使い方
まずは横幅か高さの基準となる数値を決めます。
例えば横幅300pxを基準とするならば「300」と記入し、「width（横幅）」を選択します。
するとアスペクト比が計算されます！
また、ファイルを選択すると各アスペクト比に重ねたイメージが透かしで表示されるようです。
アスペクト比は「16:9」「3:2」「4:3」「2:1」「黄金比」「白銀比」の6パターンで計算してくれるのでどの比率がちょうどよいか決めるポイントになりますね！
OGP画像シミュレータ
OGP画像シミュレータでは作成したog-imgが様々なサイズで表示されるときに適切に表示されるかを確認することができます！
og-imgは作成しても公開前だと通常確認することができないので、このサイトで正しい表示がされるか確認しておくと、公開後に表示より文字がはみ出してしまったりするミスを防ぐことができます。
og-imgのサイズをいくつで作るか忘れてしまった場合もこのサイトを覚えていれば安心ですね！
サイトの使い方
サイトの上部に「ドラッグ＆ドロップで画像を追加」と書いてる枠があるのでそこに作成したog-imgをドラッグ＆ドロップします。
それか枠内にマウスカーソルを持っていくと「クリックで画像を追加」とテキストが切り替わるのでクリックして画像を選択します。
すると下の6つの枠に選択した画像が表示されるので表示範囲からテキストがはみ出していないかなど適切に表示されているかを確認しましょう。
ちなみに複数の画像を選択すれば見比べて確認することができるので微調節した際もとても確認しやすいですよ！
まとめ
今回はWEBデザイナー向けのお役立ちサイトを紹介しました。
気になったサイトはありましたか？
どのサイトも本当に簡単に効率化できるようになるので是非一度試してみてください！
最後までお読みいただきありがとうございました。