ムラゴンの運営はHTMLをしっかり学習したほうがよい

「余白」でブログ記事を見やすく=改行して、行間を空ける - アクセス数と読者数の増やし方 - muragon(ムラゴンブログ)からのお知らせ
アクセス数や読者数を増やしたいブロガーの皆さんへ 「余白」で記事を見やすくしましょう "アクセス数が増える" 文章の書き方をお伝えいたします。 「改行すると記事が見やすくなります」 「行間を空けると文章が読みやすくなります」 ブログの見やす...

あまりにもひどいコードに驚愕してしまいますね。ツッコミどころ満載でどこから説明したらよいかわからないほどです。今回は筆者が適切だと思うコードで記述していきます。

参考例

ブログが好き! ムラゴン

あなたも今日からブログを始めてみませんか?

ブログは誰でもカンタンに、思いや考え、体験、作品などを多くの人に伝えられる無料ツールです。

ご存じですか?ブログがすばらしい 7つの理由 
ブログを始めるとあなたは・・・!?

  1. 好きなことで楽しく幸せな気分になれる!
    趣味や興味がある情報を発信できます。新しい発見で世界が広がり、夢が叶います。
  2. 生活や人生が変わる!悲しみや苦しみからも救われる!
    生きがいや喜びにあふれ、人生が輝きます。孤独が消え、心穏やかに暮らせます。
  3. 世の中や誰かの役に立てる!
    いろいろな仲間と共感でつながり、やさしさや感動を分かち合えます。
  4. 個性が磨かれ、自分の可能性が広がる!
    価値観や活動を表現でき、自分の存在を知ってもらえます。頭や心の整理もできます
  5. 思い出や人生を記録に残せる!
    自分の気持ちや生き様が未来の人々やあなた自身の大切な財産になります。
  6. 街を盛り上げ、地域貢献できる!
    地元やふるさとを PRしたり、海外から日本語で情報発信もできます。
  7. ビジネスを無料宣伝できる!
    広告費ゼロで顧客を獲得できます。お小遣いも稼げます。

さあ、気楽に自分らしくブログをお楽しみください。ムラゴンで始めてみませんか?

自由
平等
みんな人間 あなた宝物
ブログが好き! ムラゴン

ウェブデザインの基本:読みやすさと一貫性を保つためのHTML

ムラゴンが提唱するHTMLには多くの問題を抱えています。

  • なぜか引用の<blockquote>が記述されている
  • 不要な空の <p> タグが多い
  • 構造化が不適切
  • 全体的に読みやすさの向上が必要

ムラゴンの文章ではたびたびフォントの大きさを変えていますが、現代のウェブデザインでは見出しなど以外の箇所で一部のフォントサイズを変更することはほとんどありません。理由としては

  • 可読性の維持
    統一されたフォントサイズは読みやすさを保ち、ユーザーが文章をスムーズに読むことを助けます。無闇にフォントサイズを変更すると、視線の移動が増え、読みにくくなります。
  • デザインの一貫性
    一貫したフォントサイズはページ全体のデザインに統一感を与えます。フォントサイズがバラバラだと、見た目が雑然として見え、プロフェッショナルな印象を損ねることがあります。
  • アクセシビリティ
    視覚障害を持つユーザーにとって、フォントサイズの急な変化は読み取りの障害となることがあります。特にスクリーンリーダーを使用する場合、一貫したフォントサイズが読みやすさを確保します。
  • レスポンシブデザインの問題
    無闇にフォントサイズを変更すると、異なるデバイスや画面サイズでの表示が不適切になることがあります。レスポンシブデザインでは、一貫したフォントサイズを使用する方が適応しやすいです。
  • ユーザー体験の向上
    ユーザーは一貫したデザインと読みやすいテキストを好みます。フォントサイズの変動が少ない方が、ユーザー体験を向上させることができます。
無駄な<p><br><p>タグを連発

また、フォントの文字色を頻繁に変更することは、通常避けるべきです。以下の理由からです:

  • 可読性の低下
    様々な色を使うことで、文章全体の可読性が低下する可能性があります。
  • デザインの一貫性の欠如
    統一感のない色使いは、デザインの一貫性を損ねるため、ページ全体がプロフェッショナルでなく見えることがあります。
  • アクセシビリティの問題
    色覚異常のユーザーにとって、特定の色は区別がつきにくく、情報が伝わりにくくなることがあります。
  • ユーザーエクスペリエンスの低下
    過度な色使いはユーザーを混乱させ、ページのナビゲーションが難しくなることがあります。
まとめ

ムラゴンが提示したHTMLコードにはいくつかの問題点が見受けられます。まず、フォントカラーの無闇な変更が多用されており、全体の統一感が欠如しています。特定の色を過度に使用することは、ページの可読性を低下させ、ユーザーの目に負担をかける原因となります。

さらに、フォントサイズの変更も頻繁に行われており、これが読みやすさとデザインの一貫性を損ねています。特に、大きなフォントサイズを無意味に使用することは、ユーザーエクスペリエンスを悪化させる要因となります。統一されたフォントサイズを使用することで、ユーザーがスムーズにテキストを読むことができます。

加えて、コード内には無駄な空の <p> タグが多く含まれています。これらはHTMLコードを冗長にし、ページの読み込み時間や視覚的な整合性に悪影響を与える可能性があります。不要なタグを削除することで、コードをよりシンプルかつ効率的にすることができます。

また、リストとして表示すべき項目が適切に構造化されていない点も問題です。リスト項目を正しく構造化するためには、<ul> または <ol> タグと <li> タグを使用する必要があります。これにより、情報が視覚的に整理され、読み手にとって理解しやすくなります。

最後に、アクセシビリティの問題も考慮する必要があります。色覚異常のユーザーやスクリーンリーダーを使用するユーザーにとって、情報が伝わりにくくなっている点は改善が求められます。一貫したフォントサイズと適切な色使いを徹底することで、より多くのユーザーにとってアクセスしやすいウェブページを作成することができます。

これらの問題を解決するために、フォントサイズとカラーの変更を最小限に抑え、HTML構造をシンプルかつ明確に保つことが重要です。また、アクセシビリティを意識したデザインを心がけることで、全てのユーザーにとって利用しやすいウェブページを提供することができます。

さらに、このようなフォントスタイルやデザインは、インターネット黎明期のものであり、現在のウェブデザインにはそぐわないという点にも注意が必要です。現代のウェブデザインでは、シンプルで一貫性のあるデザインが求められています。過度な装飾やフォントの無秩序な変更は、現代のユーザーの期待に応えられず、プロフェッショナルな印象を与えることができません。最新のデザインガイドラインに従うことで、より洗練されたユーザー体験を提供することができます。

この記事を書いた人

2024年5月からムラゴンでブログ運用を開始。他のブログサービスに比べてカスタマイズの制限やデザインテンプレートの少なさエディタの稚拙さなどに不満を抱き運営にフィードバックを送っています。

matsusanをフォローする
ムラゴン
ブログランキング・にほんブログ村へ
タイトルとURLをコピーしました