このページは、本サイトをどのような意図で設計し、どのような判断のもとで各要素を配置したのかを記録したものです。デザインの根拠を残すことで、見た目の印象だけでなく、情報設計の意図まで読み取っていただけるようにしています。
1. 目的とターゲット
想定読者は「ドローンという言葉は知っているが、触ったことはない人」です。専門用語をいきなり並べると離脱してしまうため、用語を出すたびに言い換えを添えること、読む順番を示すことの2点を、サイト全体の方針としました。
2. 情報設計
トップページを入口とし、そこから「記事」「学習の順番」「用語」「出典」へ分岐する構造にしています。記事を読み終えた読者が次にどこへ行けばよいか迷わないよう、すべての記事末尾に次の行き先を用意しました。
トップページ
記事一覧
3本の記事へ
学習ロードマップ
4ステップ＋チェックリスト
用語集
18語を3分類
参考文献・出典
公的機関9件
このサイトについて
方針とお問い合わせ
3. デザインコンセプト「SKY-MINIMAL」
空を扱うテーマであることから、白を基調に、空の青からインディゴへ向かうアクセントカラーを設定しました。装飾を足すのではなく、余白と写真で見せる方向に振ることで、情報量が多くても圧迫感が出ないようにしています。
4. タイポグラフィと余白のルール
見出し
H2は左に5pxのアクセント罫線、H3は下線のみ。階層を色ではなく形で区別しています。
本文
16.5px／行間2.1。日本語は行間を広くとらないと圧迫感が出るため、通常より広めに設定しています。
1行の長さ
本文の最大幅は720px。1行が長すぎると読み戻しが起きるため、可読性を優先しました。
余白
セクション間は最低56px。要素を詰めず、余白で情報のまとまりを示しています。
角丸
カードは20px、バッジは999px。丸みを統一することで、やわらかい印象に揃えました。
影
0 14px 34px rgba(13,27,42,0.08)。濃い影は避け、浮きすぎない自然な立体感にしています。
5. 読みやすさ・アクセシビリティへの配慮
文字と背景のコントラスト
本文色 #20344e と白背景のコントラスト比は約 10:1。淡い文字色は補足情報だけに限定しています。
画像の代替テキスト
記事内の図版・写真すべてに、内容が伝わる代替テキストを設定しています。
見出しの階層
H1はページに1つ、その下にH2・H3を順に配置し、飛び級しない構造にしています。
リンクの見分け
リンクはアクセント色に加えて下線や矢印を併用し、色が判別しにくい方にも伝わるようにしています。
タップ領域
スマートフォンでの操作を想定し、ボタンの高さは44px以上を確保しています。
6. 制作環境
CMS
drone.fat2026.shop/（無料プラン）
テーマ
Assembler（ブロックテーマ）
実装方法
ブロックエディタ＋インラインスタイル
写真素材
Pexels（商用利用可）
図版
ページ内でHTML／CSSにより作図
想定環境
PC・スマートフォン両対応
7. 今後の課題
現在は記事が3本のため一覧を手動で構成していますが、本数が増えた場合は自動一覧への切り替えが必要です。また、法制度は改正されるため、参考文献ページのリンク確認を定期的に行う運用も課題として残っています。
最終更新日：2026年7月27日
参考文献・出典を見る →