【後で役立つWebヒント集 Vol.05】Webの引き出し：私だけのWebライブラリ

スマホで眠っていたWeb制作に役立つ情報まとめ

Web制作の学習を進める中で、たくさんの有益な情報に触れる機会がありますよね。ついつい「あとで読もう」と思って、ブラウザのタブを開きっぱなしにしてしまう方も多いのではないでしょうか。

今回は、そんなWeb制作に役立つ情報の中から、特に実践的で重要な内容を厳選してご紹介します。サイトの企画段階から、デザインやコーディングの具体的なテクニックまで、スキルアップに役立つヒントが見つかるはずです。

1. デザインコンセプトの作り方をわかりやすく解説

Webサイト制作の最初のステップである、デザインの方向性を決めるための情報です。

• デザインコンセプトシートでつまずきを防ぐ

  • URL: https://designmemo.jp/2018/02/design-concept-sheet.html

  • デザインの方向性のズレを防ぐための**「デザインコンセプトシート」**の活用法を解説。クライアントやチーム内でイメージを共有するための項目と記入方法が説明されています。

• セブンデックスが実践する「デザインコンセプト」の作り方と成功のポイント

  • URL: https://sevendex.com/post/3830/

  • デザインの指針となる**「デザインコンセプト」の策定方法**を解説しています。プロジェクトの成功に不可欠な要素として、キーワードの抽出からシート作成までの具体的なステップが紹介されています。
    

2. 【初心者向け】レスポンシブなfont-sizeの単位はどれが良いか検証してみた

フォントの単位や、ブログの見出しをCSSで装飾する方法など、実践的なコーディングテクニックを学べます。

• 【超初心者向け】フォントサイズの正しい使い方！px・%・em・remの使い分け方を解説

  • URL: https://www.ycomps.co.jp/staffblog/11841

  • CSS初心者向けに、**フォントサイズの単位（px、%、em、rem）**を比較解説。特にレスポンシブデザインに最適なremの利便性が説明されています。

• 【WordPress】Cocoonテーマの見出し（h2, h3, h4, h5）デザインをCSSで変更してみた

  • URL: https://blog.yoshinonaco.com/blogcustom-heading/

  • WordPressテーマ「Cocoon」の見出しデザインをCSSでカスタマイズする方法を解説。手書き風の枠やストライプなど、具体的なCSSコードが掲載されており、自分のブログに簡単に適用できます。
    

3. 【HTML・CSS】見出しの左右両端に線を入れる方法

Webサイトの装飾やパーツを効率的に作るための、すぐに使えるHTML/CSSテクニックです。

• 見出しの左右に線を入れるHTMLとCSS【Web制作】

  • URL: https://design-levelup.com/webdesign/html_css_making_2/

  • CSSのflexboxやposition: absoluteを使って、見出しの左右に線を入れる方法を紹介。横幅いっぱいに広げる方法や、両端に短い線を配置する方法が解説されています。

4. コピペ可ですぐに役立つ！マテリアルデザインを極めるHTML/CSSスニペット30個まとめ

• URL: https://photoshopvip.net/102987#google_vignette

• Googleが提唱するマテリアルデザインの原則を取り入れた、コピー＆ペースト可能なHTML/CSSスニペットを30個まとめた記事です。ボタンやカード型レイアウトなど、すぐに使えるパーツがCodePenで公開されています。

5. 【ブログカスタマイズ奮闘記】Cocoonの見出しデザインをCSSで変更

• URL: https://blog.yoshinonaco.com/blogcustom-heading/

• WordPressブログの見出しデザインをCSSで変更

この記事は、WordPressの無料テーマ「Cocoon」の見出しデザインをCSSでカスタマイズする方法を解説しています。

デザインで気を付けたこと

• 階層が分かること: h2が最も目立つように、スクロールしたときに目に飛び込むような存在感を意識しています。

• サイトの雰囲気を伝えること: 「軽やかで明るい」という印象を与えるために、色やデザインを工夫しています。真面目なサイトであれば、シンプルで落ち着いたデザインがおすすめだと提案しています。

カスタマイズ方法の解説

Cocoonの各見出し（h1〜h6）に対応したCSSコードを、それぞれのデザインのポイントとともに具体的に紹介しています。

• h1: 余白やフォントサイズを調整し、レスポンシブにも対応させています。

• h2: ボーダーとbackgroundを使って、手書き風の色枠を表現しています。

• h3: linear-gradientを使って、2色のななめストライプを作成しています。

• h4: シンプルな下線デザイン。

• h5・h6: 左側に太い線を付けるデザインで、h6はh5よりも目立たないように調整されています。

紹介されているCSSコードは、そのままコピー＆ペーストして使えるようになっています。見出しのデザインを変更するだけで、記事全体の雰囲気が大きく変わるため、サイトの個性を出す上で重要なポイントだと締めくくられています。