月: 2025年5月

Webデザインのスタイルについて

デザインスタイル比較表

デザイン名	特徴	質感/立体感	奥行き	参考リンク
ニューモーフィズム (Neumorphism)	スキューモーフィズム＋フラット＋マテリアルを組み合わせた立体的UI。光と影で凹凸表現。	◯（やわらかい）	◯	archetyp.jp
スキューモーフィズム (Skeuomorphism)	現実の物体を模倣。メタル感や質感のあるUI。	◎（リアル寄り）	◎	tsunagaru-design.jp
フラットデザイン (Flat Design)	ミニマルでシンプル。影・装飾を排した2Dスタイル。	×	×	medix-inc.co.jp
マテリアルデザイン (Material Design)	紙のような要素をレイヤーで構成。影や動きにルールあり。	△（抽象的）	◯	tayori.com
グラスモーフィズム (Glassmorphism)	ガラス風の半透明、ブラー、背景ぼかしを使用。幻想的・近未来的。	◯（透明感）	◯	evoworx.co.jp
クレイモーフィズム (Claymorphism)	ぷっくりした粘土風3Dスタイル。カラフルで視認性が高い。	◎（ポップな質感）	◎	t-r-a-m.jp
サイバーパンク (Cyberpunk)	ネオン、グリッチ、ノイズなどを多用した未来的スタイル。	△（装飾多め）	△	webdesigngarden.com
レトロモダン (Retromodern)	80〜90年代風の色使いとモダンなレイアウトの融合。	△（装飾重視）	△	mixltd.jp

ざっくりとですが、Webデザインのスタイルには上記のようなスタイルが存在します。

フラットデザインやサイバーパンク、レトロモダン、マテリアルデザインのページやサイト、アプリを最近はよく目にします。

デジタル庁からはデザインシステムが公開されております。

https://design.digital.go.jp

使用する青系の色の例:

#0077cc (鮮やかな青)
#3498db (明るい青)
#2c3e50 (濃い、落ち着いた青)
lightblue (淡い青)
steelblue (少し灰色がかった青)

パターン 1: シンプルな下線

見出しの下に細い実線の青い線を追加します。

CSS

h1 {
  border-bottom: 2px solid #0077cc;
  padding-bottom: 5px; /* 線との間に少し隙間を作る */
}

パターン 2: 左側の太い線

見出しの左側に太い青い線を追加して、ブロックのような印象を与えます。

CSS

h1 {
  border-left: 8px solid #3498db;
  padding-left: 10px; /* 線との間に隙間を作る */
}

パターン 3: 背景色によるハイライト

見出しの背景に薄い青色をつけて、目立たせます。

CSS

h1 {
  background-color: lightblue;
  padding: 10px 15px; /* 内側の余白 */
}

パターン 4: 点線の下線

見出しの下に点線の青い線を追加します。

CSS

h1 {
  border-bottom: 2px dashed steelblue;
  padding-bottom: 5px;
}

パターン 5: グラデーションの下線

グラデーションの下線です。青のグラデーションを使用します。

CSS

h1 {
  position: relative;
  padding: 0.25em 0;
  padding-bottom: 5px; /* グラデーションとの隙間 */
}

h1:after {
  content: "";
  display: block;
  height: 3px; /* グラデーションの高さ */
  background: linear-gradient(to right, #0077cc, transparent); /* 青から透明へのグラデーション */
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

パターン 6: テキストの色と波線の下線

見出しの文字色を青にし、波線の下線をつけます。

CSS

h1 {
  color: #2c3e50; /* 濃い青の見出し文字 */
  text-decoration: underline wavy #3498db; /* 波線の下線 */
  text-underline-offset: 5px; /* テキストからの距離 */
}

パターン 7: 擬似要素（::before）を使った装飾

見出しの前に青い四角形や丸などの装飾を追加します。

CSS

h1 {
  position: relative;
  padding-left: 20px; /* 擬似要素の分のスペース */
}

h1::before {
  content: "";
  display: block;
  width: 10px; /* 装飾の幅 */
  height: 10px; /* 装飾の高さ */
  background-color: #0077cc;
  position: absolute;
  left: 0;
  top: 50%; /* 垂直方向中央 */
  transform: translateY(-50%); /* 中央揃え */
  /* border-radius: 50%; 丸にする場合 */
}

パターン 8: 二重線の下線

見出しの下に二重線を引きます。

CSS

h1 {
  border-bottom: 4px double #3498db;
  padding-bottom: 5px;
}

パターン 9: 太い下線

見出しの下に太い青い線を引きます。

CSS

h1 {
  border-bottom: 5px solid #2c3e50;
  padding-bottom: 5px;
}

パターン 10: 上下二重線

見出しの上下に二重線を引きます。

CSS

h1 {
  border-top: 3px double #0077cc;
  border-bottom: 3px double #0077cc;
  padding: 5px 0; /* 上下パディング */
}

MarkDownの基本の書き方

はじめに

Markdownは、シンプルで読み書きしやすいプレーンテキスト形式で記述された文書を、構造化された形式（HTMLなど）に変換するための軽量マークアップ言語です。

1. 見出し

見出しは、行頭に # と半角スペースをつけて作成します。# の数で見出しのレベル（サイズ）が変わります。

# 見出し 1
## 見出し 2
### 見出し 3
#### 見出し 4
##### 見出し 5
###### 見出し 6

2. 強調

文字を太字や斜体にすることができます。

太字: 対象の文字列を ** または __ で囲みます。 **太字** __太字__
斜体: 対象の文字列を * または _ で囲みます。 *斜体* _斜体_
太字と斜体: 対象の文字列を *** または ___ で囲みます。 ***太字と斜体*** ___太字と斜体___

3. リスト

リストには、順序なしリストと順序ありリストがあります。

順序なしリスト: 行頭に -、*、または + と半角スペースをつけます。

- 項目 1
- 項目 2
  * ネストされた項目

表示例:

項目 1
項目 2
- ネストされた項目

順序ありリスト: 行頭に数字と . (ピリオド) と半角スペースをつけます。数字は自動的に連番になります。

1. 項目 A
2. 項目 B
3. 項目 C

表示例:

項目 A
項目 B
項目 C

4. リンク

リンクは、表示するテキストを [] で囲み、リンク先のURLを () で囲みます。

[Googleへのリンク](https://www.google.com)

表示例:Googleへのリンク

5. 画像

画像は、行頭に ! をつけ、代替テキストを [] で囲み、画像ファイルのURLを () で囲みます。リンクと似ていますが、先頭に ! がつきます。

![代替テキスト](https://www.markdown.jp/img/markdown-logo.gif)

6. コード

コードを表示したい場合に利用します。

インラインコード: 短いコードやコマンドなどを表示したい場合に、バッククォート (`) 1つで囲みます。

`print("Hello")` はインラインコードです。

表示例: print("Hello") はインラインコードです。

コードブロック: 複数行のコードを表示したい場合に、バッククォート (`) 3つで囲みます。最初のバッククォートの後に言語名を指定するとシンタックスハイライトされます（対応している場合）。

```python
def greet(name):
    print(f"Hello, {name}!")

greet("World")
```

7. 引用

引用文を表示したい場合に、行頭に > と半角スペースをつけます

> これは引用文です。
> 複数行にわたる引用も可能です。

表示例:

これは引用文です。複数行にわたる引用も可能です。

8. 水平線

区切り線を表示したい場合に、ハイフン (-)、アスタリスク (*)、またはアンダースコア (_) を3つ以上単独行に記述します。

---
***
___

これらの基本的な構文を組み合わせることで、様々な構造のドキュメントを作成できます。

目次プラグインについて

目次プラグインの比較表

WordPressの目次プラグインの目的別の比較表です。

目的	プラグイン名	価格
初心者向け	Easy Table of Contents	無料
シンプルな目次を作成したい	SimpleTOC	無料
デザインにこだわりたい	Rich Table of Contents	無料
サイドバーに固定した目次を表示	Fixed TOC	$20（有料）
長文記事や技術系ブログに最適	Table of Contents Plus	無料
SEO対策と目次機能を一括管理したい	All in One SEO (AIOSEO)	無料/有料

採用にあたって

このブログでは、多くの情報をシンプルに扱いたいため、できるだけ装飾を増やさず、必要な情報を記載していく形式で運用したいと考えています。

私にとって大事なことはシンプルであることなので、SimpleTOCを採用しました。

MarkDownでブログを投稿する

プラグインの紹介

MarkDownで投稿できるWordPress用のプラグインの紹介です。

「Advanced Editor Tools」は、WordPressのプラグインで、通常のエディターを強力なエディターにしてくれる心強いツールです。

https://wordpress.org/plugins/tinymce-advanced

WordPress拡張プラグイン

例えば、記事の編集画面でMarkDownで文章を書くと、自動でHTMLに変換してくれて、そのまま投稿できます。

以下は、MarkDownのサンプルです。

MarkDown

## 見出し

- 例1
- 例2

HTML（変換後）

見出し

例1
例2

MarkDownを覚えると、構造化された文書をすらすらと書くことができます。

情報を整理したいときなどに非常に便利です。