IRブログニュースリリースお問い合わせ2020-02-13文章を書くときにHTML5の文書構造が役立っている話ティップスこんにちは。シュフティ事業部デザイナーのナカジマです。「段落の分け方とか、改行のタイミングが綺麗ですね」とお褒めをいただきまして。(やったぜ!)なんか意識してることあったかなぁ、、、あ、そういえばHTML5の書き方意識してるわ!となったので、その内容を実践を交えてご紹介したいと思います。なんか偉そうなタイトルですが、今回のお話はHTMLのタグがわからなくても大丈夫!HTML5が提唱する文書構造の概念を、文章を書くときに実践に移すだけです。文書構造」と入れると色々と出てくるのでそちらで確認していただき、ここではかいつまんで説明させてもらいますと、HTML5が提唱する文書構造の概念(ナカジマ解釈ver)・話の内容できちんとセクション(段落)分けてね・1つの話題の中でも細かい意味でセクション(段落)分けてね(入れ子構造)・各段落には適切な見出しをつけようねというものです。人はテキスト情報を読む(見る)時に、見出しや段落によって自分の欲しい情報が書いてあるかどうかを判断しています。HTMLではこれをタグでマークアップすることで、ブラウザでわかりやすく表示され、Googleにも評価されるようになります。補足:HTML5以前のwebページHTMLの中で、むやみに同じキーワードを繰り返すことで検索順位をあげるなどのSEO対策が主流でした。このむやみに同じキーワードを繰り返すという意味の持たない文書構造はユーザーにとって有益ではないとされるようになりました。いうことで、先述した3つの事柄を意識して、実際に文章を整形していきましょう。実践:「これは何の話?」を常に意識する&話の単位でセクショニングする今回はこのただ単にだーーーーーっっと書いた私の自己紹介文を、文書構造を意識しながら整形していきます。「何の話」をしているかに注目してみてみましょう。話の単位で改行を入れていきます。セクショニング(段落分け)です。中盤の寝ることとかがなんの話か微妙なところですが、今はこんなところで大丈夫です!実践:1つの話題をさらに細かくセクショニング(段落分け)&見出し付け大きな段落分けができたところで、分けた段落に対してさらにセクショニングできないか見ていきましょう。例.仕事の話さらに分けるとこんな感じでしょうか。この段落は一言で言うと「得意なこと」について話していると言えそうでしたので、すぐ下にあった仕事以外の特技的な内容もここにくっつけてみました。この段階で軽く見出しをつけてみましょう。仕事関連の得意なことの中は・デザインについての得意なこと・UI・サービス設計についての得意なことについて書かれています。これは冒頭で今やっている仕事として紹介しています。そこで、冒頭の紹介文を取っ払って、仕事関連の得意なことの小見出しとして昇華させると全体がすっきりとまとまりそうです。それがこちら↓ここまでのまとめ「適切な意味でセクショニングして、見出し設定する」というのがHTML5の大きなルール。・話の意味で段落分けをしよう・1つの話題の中でも細かい意味に注目して段落分けしよう・細かく分けた段落に簡単な見出しをつけてみる・全体の大見出しと小見出しを設定しようこんな感じで、他の段落に対しても同様のセクショニングをしていきます。実践:情報を複数個リストアップする場合は箇条書きにする複数の事柄を羅列する場合は、文章にするときは箇条書きにすると見やすくなります。箇条書きにすると、「量」が視覚化されやすいのと、読み手が必要な情報を抜き出しやすくなるメリットがあります。文章単位でも箇条書きの見せ方を取り入れる事で、長い文章も読みやすくなります。・箇条書きを駆使して、ただのだらだらと長いだけの自己紹介をまとめてみました!BEFOREAFTERやっていることは、「セクショニング」「見出し付け」「箇条書き」の3つです。この3つをやっていく中で、情報をまとめる・削る・追加するなどをして、適切な意味合いの段落に仕上げています。13:36文章を書くときにHTML5の文書構造が役立っている話Tweet関連記事2020-02-21「ふりかえり」の「ふりかえり」をした話こんにちは。シュフ...2020-02-06『良いデザイン』をするために必要なこと:後編こんにちは。シュフ...2020-02-06『良いデザイン』をするために必要なこと:前編こんにちは。reservedスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。