BUILD – Webサイト制作 / ホームページ制作Webサイト制作

Webサイトを使いやすくする、私なりのユーザビリティ11の施策について紹介します。本記事で紹介するのは一般的なユーザビリティの内容ですが、検討すべきタイミングがかならずくるはずです。制作前にチェックしておくことをおすすめします。

Web制作はデザインやコーディングの知識だけでなく、制作前後にも重要な仕事はたくさんあります。しかし、作り方にばかりフォーカスが当たり、契約や法律周りの情報、ディレクション、Web運用などの知識はおざなりにされがちなのが現状。そこで今回はWebサイト制作に必要な知識が学べる書籍を6冊紹介します。特に独学フリーランスは情報が抜けがちなので、これらの書籍から一通り知識を身につけておくことをおすすめします。

COSYDESIGN代表の佐藤浩二氏の著書「ロゴデザインのコツ プロのクオリティに高めるための手法65」を読んだので、本書を読む上でのポイントを残しておきます。

Figmaをデザイン作成のメインアプリに変えてから数ヶ月経過し、Figmaプラグインの見直しをおこないました。新たに発見したもの含め、私が使い続けているプラグインを17個紹介します。

Google Fontsは、約1500種類のフォント（執筆時点）を提供しているWebサービスで、イメージに合ったフォントを見つけるためには、多くの時間が必要です。日々追加されるGoogle Fontsの中から厳選した、ほどよい個性で見出しに使いたくなるフォントを19個紹介します。

これまでは画像で表現していたデザインを今ではCSSのみで実装できるものが多くなってきました。今回は覚えておくと便利な現場で使えるCSSデザインTipsを9個紹介します。いざという時に使えるものばかりですので、ストックしておくことをおすすめします。

アイコンやイラストの素材はいくらあっても足りないもの。特にWebサイトで利用する場合、サイト全体で一貫したテイストで表現したいため、大手の素材サイトでは難しいこともしばしば。そこで今回はサイト内で一貫したテイストであり、無料でアイコンやイラストを配布しているサイトを8つ紹介します。素材で困ったらまずはこちらを見てみてください。

CSSのみで実装できるシンプルな見出しデザインを21パターンご紹介します。汎用性が高くテイストに縛られず現場ですぐ使えるデザインなのでストックしておくと便利に使えます。あなたの現場でぜひご利用ください。

コンテンツの幅に合わせたサイズを指定できるfit-content。無駄なタグを省くことができ、便利に使えるこのコードを私は見出しデザインで使用しています。今回はfit-contentについて実例つきで紹介していきます。

Web制作をサポートしてくれるツールを13個紹介します。グラデーションを使ったCSSアニメーションジェネレーターや、mix-blend-modeやgridレイアウト、transformなどのコードジェネレーターの他にもフォントチェックや背景画像を作成できるツール、VSCodeのテーマ作成ツールもあります。あなたのWeb制作を快適に進めるためにチェックしてみてください。