【デザイン基礎】関連記事（[kanren id =””]）の左上に「STEP.○○」を表示させたい.

関連記事（kanren）の左上に「STEP.○○」を表示する実装戦略

Webサイト制作において、ブログ記事の回遊率を高めるための「関連記事（ショートコード）」は非常に重要なUI要素です。特に、連載記事や学習コンテンツのように「順序」が重要なコンテンツにおいて、関連記事の左上に「STEP.01」「STEP.02」といったインジケーターを表示させる手法は、ユーザーのナビゲーションを助け、離脱を防ぐための極めて効果的なUXデザインです。

本記事では、WordPress等のCMSで利用されるショートコード機能（例：[kanren id=””]）を拡張し、CSSのみでスタイリッシュにステップ表示を実装する方法を、プロフェッショナルな視点から詳細に解説します。

なぜ関連記事に「STEP」表示が必要なのか

ユーザーはWebサイトを訪れた際、その記事が「単体で完結しているのか」あるいは「シリーズの一部なのか」を瞬時に判断したいという心理が働きます。特に技術ブログやハウツーサイトでは、情報の順序性が理解の深さに直結します。

従来、関連記事ブロックはタイトルとアイキャッチ画像だけで構成されがちですが、ここに「STEP」という視覚的な指標を加えることで、以下のメリットが生まれます。

1. 階層構造の可視化：ユーザーが今どの位置にいるのか、次に何を読めばいいのかが明確になる。
2. クリック率の向上：単なるリンクではなく「学習のステップ」として提示することで、次の記事へのモチベーションを高める。
3. 信頼性の向上：体系的なコンテンツとして認識され、サイト全体の信頼度が向上する。

詳細な実装アプローチ：カスタムフィールドとCSSの連携

WordPressで[kanren id=””]のようなショートコードを使用している場合、多くは「投稿ID」を引数として受け取り、そのIDからタイトルやアイキャッチを取得してHTMLを生成しています。

この機能を拡張するためには、以下の2つのアプローチが考えられます。

アプローチA：カスタムフィールドを利用する（推奨）
各記事に「step_number」のようなカスタムフィールドを設定し、ショートコード側でその値を取得してHTMLに付与する方法です。柔軟性が高く、管理が容易です。

アプローチB：ショートコードの引数で直接指定する
[kanren id=”123″ step=”1″]のようにショートコードに引数を追加する方法です。記事作成時の自由度は高いですが、ショートコードの記述が長くなるデメリットがあります。

ここでは、保守性と再利用性を考慮し、CSSの疑似要素とHTMLのデータ属性を組み合わせた「アプローチA」をベースとした実装を解説します。

実装サンプルコード

まず、PHP側でショートコードのHTMLを生成する際、対象の投稿IDからカスタムフィールド（ここでは例として ‘step_number’）を取得し、データ属性として出力します。


// functions.php でのショートコード処理のイメージ
function custom_kanren_shortcode($atts) {
    $atts = shortcode_atts(array('id' => ''), $atts);
    $post_id = $atts['id'];
    
    // カスタムフィールドからSTEP番号を取得
    $step_number = get_post_meta($post_id, 'step_number', true);
    $data_attr = $step_number ? ' data-step="STEP.' . esc_attr($step_number) . '"' : '';

    $html = '
';
    $html .= '';
    // 画像やタイトルの取得処理...
    $html .= '
';
    
    return $html;
}
add_shortcode('kanren', 'custom_kanren_shortcode');

次に、CSSで「STEP.○○」を左上に表示させます。ここでは、HTMLのデータ属性をCSSの疑似要素（::before）で表示させるテクニックを使用します。


/* 関連記事の親要素 */
.kanren-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
    margin: 20px 0;
}

/* データ属性が存在する場合のみ表示 */
.kanren-wrapper[data-step]::before {
    content: attr(data-step);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    background-color: #ff4500; /* ブランドカラー等に調整 */
    color: #fff;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 0 0 4px 0;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
    pointer-events: none; /* クリックを阻害しない */
}

実務におけるデザインの最適化と注意点

プロのWebデザイナーとして、この実装をより洗練させるためのアドバイスをいくつか提示します。

1. モバイルレスポンシブへの配慮
スマホ表示では関連記事のアイキャッチが小さくなるため、STEP表示のフォントサイズやパディングが大きすぎるとデザインを崩す要因になります。メディアクエリを用いて、スマホ時はフォントサイズを縮小するか、配置を微調整する処理を必ず入れましょう。

2. アクセシビリティの確保
::before疑似要素で表示するテキストは、スクリーンリーダーで読み上げられない場合があります。もし「STEP」という情報がコンテンツの理解に不可欠であれば、CSSだけでなく、HTMLの構造内に隠し要素としてテキストを含める（sr-onlyクラスを使用するなど）ことを推奨します。

3. 配色のコントラスト
背景色とテキスト色のコントラスト比はWCAG 2.1のガイドラインを意識してください。特に「STEP」表示はアイキャッチ画像の上に重なることが多いため、画像が暗い場合でも明るい場合でも視認性が保たれるよう、適度なドロップシャドウや背景の透過度調整を行ってください。

4. メンテナンスの自動化
カスタムフィールドの入力が面倒な場合、「特定のカテゴリーに属している記事は自動的に連番を振る」といったロジックをPHP側で組むことも可能です。運用負荷を減らすための自動化は、CMS運用において非常に重要です。

まとめ

関連記事への「STEP」表示の実装は、単なるビジュアルの装飾ではなく、ユーザーの学習体験を最適化するための戦略的なUI改善です。

今回紹介した「データ属性 + 疑似要素」の手法は、HTMLの構造を汚すことなく、CSSのみで柔軟にスタイリングを変更できるため、将来的なデザイン変更にも強く、保守性の高いコードとなります。

Webデザインにおいて「何をどう見せるか」は、常にユーザーの動線を意識したものでなければなりません。ステップ表示を取り入れることで、あなたの運営するWebサイトのコンテンツが、より親切で、より体系的なものとしてユーザーに届くようになるはずです。

まずは自身のブログの特定のシリーズ記事でテスト導入し、読者の反応やクリック率の変化を計測してみてください。細部へのこだわりこそが、質の高いWebサイトを構築する唯一の道です。

スポンサーリンク

コメント

タイトルとURLをコピーしました