TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLとCSSでおしゃれな見出しデザインを作る方法を現役デザイナーが解説【初心者向け】
オーダーメイドコース
icon
icon
HTML

HTMLとCSSでおしゃれな見出しデザインを作る方法を現役デザイナーが解説【初心者向け】

初心者向けにHTMLとCSSでおしゃれな見出しデザインを作る方法について解説しています。ここでは見出しデザインの装飾の基本と、デザインのサンプルをいくつか紹介します。タイトルデザインのアイデアに役立ててください。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

HTMLとCSSでおしゃれな見出しデザインを作る方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

今回は、HTMLに関する内容だね！

大石ゆかり

どういう内容でしょうか？

田島悠介

HTMLとCSSでおしゃれな見出しデザインを作る方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

様々な見出しデザインを見てみよう

最近は画像を使わずテキスト+CSSで見出しデザインを作ることが主流になりました。CSS3が使えるブラウザが増えたことで表現の幅は広くなってきています。

CSSだけでどれだけ見出しデザインができるか見てみましょう。

 

見出しデザインを装飾する基本を学ぼう

見出し背景を装飾する上でのポイント！背景色と枠線をおさえましょう！

  1. 装飾したいhタグ（h1,h2,h3,h4,h5,h6）などのブロック要素に背景色などを指定します。
  2. タイトルの文字は中央なのか、左揃えなのかを指定します。
  3. タイトルの文字色、文字サイズを指定します。
  4. タイトルの幅、高さを指定します。
  5. 枠線を指定します。
h2{
width: 300px;
height: 40px;
background-color: #b4e391;
text-align: center;
color: #000;
font-size: 14px;
border: 1px solid #22aa5b;
}

 

[PR] Webデザインで副業する方法とは

コピペだけで実装してみよう

最後に冒頭で紹介したタイトルデザインをコピペで実装できるよう用意しました。基本的なCSSの組み合わせで色々なタイトルを装飾できることがわかります。ぜひ、ご活用ください！

 

See the Pen
title by This is standard (@koutafunahashi)
on CodePen.

 

監修してくれたメンター

舟橋幸太郎

フリーのWebデザイナー、グロースハッカーです。

KaizenPlatform社主催のGrowth Hacker Awardsで受賞歴があります。過去行ったA/Bテストが実績として書籍に掲載されました。

TechAcademyではWebデザインコースを担当しています。

 

大石ゆかり

内容分かりやすくて良かったです！

田島悠介

ゆかりちゃんも分からないことがあったら質問してね！

大石ゆかり

分かりました。ありがとうございます！

TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

記事を検索

関連するキーワード

関連する記事

これだけは覚えておきたい！絶対パスと相対パスの違いとは【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。 今回は、HTMLの絶対パスと相対パスの違いについて解説します。 ...
HTML

HTMLで複数の画像を均等に横並びする方法を現役エンジニアが解説【初心者向け】

HTMLで複数の画像を均等に横並びする方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 HTML...
HTML

HTMLのページ全体をフォント指定する方法を現役デザイナーが解説【初心者向け】

HTMLページ全体のフォントを指定する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
HTML

HTMLで文章の途中で改行する方法を現役デザイナーが解説【初心者向け】

HTMLで文章の途中で改行する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、...
HTML

HTMLをスマホ対応にする方法を現役デザイナーが解説【初心者向け】

HTMLをスマホ対応にする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、HT...
HTML

HTMLとCSSでツリー構造を作る方法を現役デザイナーが解説【初心者向け】

HTMLとCSSでツリー構造を作る方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそ...
HTML

あわせてよく読まれている記事

今年のトレンド！2016年最も売れたフォント、トップ50を集めてみた

本稿は、Designmodeのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 また、本記事は、Doru Ciobanu氏によって投稿されました。   タイポグラフィは、独自の世界観、テクニック、統一感を組み合わせたアートです。素晴らしいデザインには、素晴らしいタイポグラフィがあります。 Webデザインまたは出版物のデザインでも、パンフレットやユーザーインターフェースのデザインでも、ロゴのデザインでも、プロジェクトを成功させるために重要な鍵となるものの1つはフォントです。 フォント、色、その他デザインをどのように組み合わせるかという選択が、成功と失敗の分岐点となります。こうした細部に十分な注意を払わないがために、優れた製品を生み出すために費やした全ての努力が無駄になることもあります。 しかし幸いなことに、優れたタイポグラフィのためのガイドとなるリソースは、豊富に存在しています。 そして、これから紹介するのは、2016年に最も売れた50のフォントです。   1. FF DIN デザイナー：Albert-Jan Pool デザインされた年：1995 発行者：FontFont FF Dinは、1995年から2009年にかけて、オランダのデザイナーAlbert-Jan Poolｚ氏によって制作されたフォントです。FF Dinには、20のウェイト（フォントの太さ）があります。 編集、出版物、広告、パッケージ、ブランディング、クリエイティブ産業（creative industries：知的財産権に関わるデザイン）、ポスター、看板、Webや画面の設計に適しています。なお、キリル文字とギリシャ語の書記体系については、サポートが限られています。   2. Brandon Grotesque デザイナー：Hannes vonDöhren デザインされた年：2010 発行者：HVD Fonts Brandon Grotesqueは、6つのウェイトとそれに対応する6つのイタリック体から成る、有名なサンセリフのフォントです。このフォントは、可読性を高めるために光学的な修正を加えた幾何学的形状から、インスピレーションを受けています。 Brandon Grotesqueは機能的かつエレガントなフォントです。ウェイトの太さをthinで色をブラックにすると、展示デザインに適しています。 Brandon Grotesqueは、洗練されたプロフェッショナルな印象を与えるデザインを生み出すには良い選択です。また、西ヨーロッパ言語だけでなく、中欧および東ヨーロッパ言語をサポートする拡張文字のセットもあります。   [PR] Webデザインで副業する方法とは3. Century Gothic デザイナー：Monotype Design Studio　Sol Hess　Morris Fuller Benton デザインされた年：1990-1995-2007 発行者：Monotype Century Gothicは、Futuraフォントの競合他社の2つの書体から派生したフォントですが、Futuraフォントの影響も強く受けています。 軽くて広々とした印象の書体であり、クリーンな縁取りを備えた、細部まで完璧なフォントです。見出しや大きな看板のデザインには理想的です。   4. Proxima Nova デザイナー：Mark Simonson デザインされた年：2005 発行者：Mark Simonson Proxima Novaのフォントファミリーは、有名なProxima Sansフォントの完全な復古版です。OpenTypeフォント機能は48個に拡張されました。 3つの幅には、それぞれ16のフォントが対応しています。 人間的な比率と幾何学的なデザインを組み合わせた、スタイリッシュなフォントです。ほとんどのラテン語系言語の文字をサポートしています。   5. Avenir デザイナー：Adrian Frutiger デザインされた年：1988 発行者：Linotype Avenirも、Futuraフォントの影響を受けたフォントですが、幾何学的なデザインを取り入れたフォントではありません。 垂直方向の文字が、水平方向の文字とアセンダ （アルファベット文字において、標準的な高さのx文字よりも背の高いb、fなどの文字の、上に突き出た部分）よりも太い幅になっているデザインです。 可読性が重視されるテキストに最適です。   6. Helvetica Neue デザイナー：Edouard Hoffmann デザインの日付：1983 発行者：Linotype Helveticaは世界で最も人気のある書体の1つであり、マーケティングが成功した例です。 このフォントファミリーは51種類のウェイトから構成されています。 古典的なサンセリフのフォントであり、時代を超えたニュートラルなデザインです。あらゆるコミュニケーションや情報媒体に適したデザインです。   7. Avenir Next Pro デザイナー：Adrian Frutiger　Akira Kobayashi デザインされた年：2004～2007 発行者：Linotype Avenirファミリーは、これまでに作成されたフォントファミリーの中で最も優れたものの1つですが、画面上での表示の問題があったため、これを解決するために代替フォントのAvenir Nextが開発されました。 32種類のフォントから構成されています。：それぞれに8種類のウェイトがあり、ローマ字とイタリックに対応しています。また2種類の幅を選択できます。 グリフは、小文字と同じ高さの大文字、下付き文字、上付き文字、合字を含むように拡張されました。   8. Isidora デザイナー：Enrique Hernandez デザインされた年：2016 発行者：Latinotype Isidoraは、機能性に重点を置いて開発された、現代的な幾何学的フォントです。表現力豊かでフレンドリーな印象ですが、合理性を兼ね備えたフォントでもあります。 Isidoraは28種類のフォントから構成されていて、サブファミリーフォントとして、7ウェイトの2つのフォントがあります。 ロゴ、ブランディング、見出し、パッケージ、Web上での利用、出版物に最適です。複数の言語をサポートしているユニバーサルデザインフォントです。   9. Sagona デザイナー：Rene Bieder デザインされた年：2016 発行者：Rene Bieder 力強いセリフ体を特徴とするフォントです。 小さな文字サイズのテキストと見出しの両方に使用できる汎用の書体です。このフォントファミリーはイタリック体に対応していて、9つのウェイトがあります。 OpenTypeフォントの機能として、代替グリフ、合字、オールドスタイル数字などが幅広くサポートされています。   10. Trade Gothic デザイナー：Jackson Burke デザインされた年：1948 発行者：Linotype Trade Gothicは曲線的デザインのサンセリフ体のフォントです。サンセリフ体のフォント特有の厳密さを破っています。 Trade
Webデザイン

基礎から学ぶ！HTMLにCSSを適用（読み込み）させる方法【初心者向け】

基本的にHTMLだけでは文字を表示するだけで、リッチなデザインが整ったWebデザインを制作することは難しいです。 そんな時に必要になってくるのがCSSです。 HTMLでCSSを読み込むためには、2つの方法があります。 今回は、その方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 本記事はテックアカデミーのはじめての副業コースのHTMLカリキュラムの内容をもとに解説しています。 目次様々な見出しデザインを見てみよう見出しデザインを装飾する基本を学ぼうコピペだけで実装してみよう監修してくれたメンター そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 HTMLにCSSを適用（読み込み）させる方法について詳しく説明していくね！ 大石ゆかり お願いします！   CSSの読み込み方（適用方法） HTMLでCSSを読み込むためには、次の2つの方法があります。 外部CSSファイルをHTMLから読み込む方法 HTMLファイル内に直接CSSを記述する方法   1.外部CSSファイルを読み込む方法 外部CSSファイルを読み込む方法は、Webデザインの現場で一般的に使用されている方法です。 事前に拡張子が「.css」のファイルを用意し、HTMLに以下のタグを記述します。 <link rel="stylesheet" href="sample.css"> HTMLファイルに上記のコードを1行追加することで、sample.cssという名称のファイルに記述されたCSS定義をHTMLに適用することができます。   また、この1行をHTMLファイルのどこに記述するかという点についてですが、場所はHTMLファイルの<head>タグ内に記述します。 以下のようにHTMLファイルに記述しましょう。 HTML <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="sample.css"> <title>HelloTechAcademy</title> </head> <body> <p>ここにHTMLの文章などが入ります</p> </body> </html> ここで、CSSファイル読み込み処理のhrefの値は、HTMLファイルとCSSファイルの配置場所によって変化するので気を付けましょう。 上記サンプルの場合は、HTMLファイルとCSSファイルは同じディレクトリに配置する必要があります。   また、HTMLファイルと同じディレクトリにcssというフォルダがあり、その中にsample.cssというファイルが配置されている場合、CSSファイル読み込み処理は以下のように記述します。 <link rel="stylesheet" href="css/sample.css">   2.HTMLファイル内に直接CSSを記述する方法 HTMLファイル内に直接CSSを記述する方法は、一般的にはほとんど使う機会の無い方法ですが、このような適用のさせ方もあります。 まず、以下のようにCSS定義を<style>タグの中に記述します。 <style type="text/css"> p { color : red; } </style>   用意した<style>タグは、HTMLファイルの<head>内に以下のように記述します。 HTML <html> <head> <meta charset="UTF-8"> <style type="text/css">p { color
HTML

作業を円滑に！エンジニアとデザイナーが衝突しない秘訣とは

本稿は、UXPinのブログ記事を了解を得て日本語翻訳し掲載した記事になります。記事は、エンジニア、Webデザイナー、ペンシルバニア州立大学の助教授であるJames Stone氏によって投稿されました。   プロジェクトをタイトなスケジュールで進めるときには、共同作業は困難を極めます。 デザイナーとエンジニアの意見を一致させるのは、非常に大変です。 もし彼らが同じプロジェクトで、Webサイトを公開しようとすれば、オフィスの中は戦争状態と化すかもしれません。   では、デザインを素早く完璧にこなし、かつ世界に通用するレベルのWebサイトを構築するにはどうしたらいいでしょうか？ この記事では、プロジェクトの共同作業における問題を解決するためのアドバイスを紹介します。すべてのアドバイスは、私が過去10年間にWebデザイナーおよびエンジニアとして経験してきた成功と問題から引き出したものです。   目次 グリッドシステムをレスポンシブデザインで設計する ピクセルパーフェクトなデザインを実現できるツールを使う Photoshopの代替ツールを考える 値を統一する プロトタイプを使った共同作業をする デスクトップファーストの手法を排除しないこと アセットの引き継ぎには十分注意を払う   1. グリッドシステムをレスポンシブデザインで設計する グリッドシステムはすでにご存知かもしれません。私がエンジニアとしてデザイナーと共同作業をしたときに直面した問題は、グリッドシステムをレスポンシブに設計するスキルが、デザイナーたちに不足していたことです。   グリッドの幅を具体的に設定する まず技術的な話から始めましょう。最初に、グリッドの幅は具体的な数値で設定し、各グリッドごとにガターのサイズも正確に把握します。こうしておくことで、デザインに統一感が生まれ、またくり返し微調整する手間も省けます。 開発チームへグリッドシステムを引き継ぐときにも、数値は正確に揃えておきましょう。もしパディング（padding）を15ピクセルで設定したら、厳密に15ピクセルになっていなければなりません。グリッド全体の幅を1000ピクセルで設定したときも、厳密に1000ピクセルです。 レスポンシブデザインとは、あらゆるデバイスやシステムにおいてWebデザインが柔軟に機能することを意味しますが、最初の数値設定は厳密に行う必要があります。   デザイナーは、モバイル端末上の表示もチェックすること モバイルビュー デザインを美しく仕上げても、それで完成ではありません。モバイルビュー（モバイル端末上の表示）も忘れずにチェックしてください！ もしデザイナーがモバイルビューをチェックしなければ、エンジニアはデザインの意図を汲みながら、モバイル端末上でも上手く作動するように、すべて一人で設計しなければなりません。私はエンジニアとして、こういう状況によく遭遇します。 デザイナーも、グリッドシステムをレスポンシブに設計する方法について、よく理解しておくべきです。 プロジェクトの共同作業を円滑に進めるためには、デザイナーは、デスクトップ版からモバイル版へ移植するときの各要素の並べ方（mobile stacking order）も考えておくといいでしょう。 また時間に余裕があれば、モバイルビューのモックアップを作成しておくと大いに役に立ちます。完成製品のデザインをイメージしやすくなります。   互換性の問題 デスクトップ上で作成したグリッドシステムは、モバイル端末上では上手く機能しないこともあります。たとえば、サイズの大きい要素は、モバイル版のサイズに上手く縮小されないことがよくあります。 デスクトップとモバイルのインターフェース間では、このようにデザインの互換性の問題が起こることがあり、タイムラインを示すUIの要素（timeline UI element）にも見られます。 デスクトップ上では問題なく表示され、時間軸上の各ポイントも見やすいデザインです。しかしモバイル端末上では表示が崩れることがあります。 デザイナーは、こうした問題を自力で解決する必要があります。そうでなければ、エンジニアにデザインの意図を誤解され、予想もしなかったようなおかしなデザインが生まれるおそれがあります。   [PR] Webデザインで副業する方法とは2.ピクセルパーフェクトなデザインを実現できるツールを使う ショックを受けてほしくないのですが、Photoshopは現代的なWebサイトを構築するのに適したツールとはいえません。 私はエンジニアとして、Photoshopで作成されたモックアップを渡されることがよくあります。残念なことに、Photoshopで作られたモックアップは、エンジニアがWebサイトを構築するときには問題となることがあります。Photoshopでは、エンジニアが必要とするレベルの精度と正確さを実現できないからです。   フォントの整合性 第一に、PhotoshopとWebの間で、フォントの整合性が保たれる保証はありません。 Photoshopのファイル形式でデザインされた文字は、Web上で表示が崩れてしまうこともよくあります。文字がより太くなったり、全く異なるデザインになっていたりするのです。オープンソースのフォントでさえ、Photoshopで編集すると、Web上で表示が変わることがあります。 デザイナーは、ウェイト（太さ単位）を基本にして、フォントの調整を行うべきです。 スクリーン上での表示を基本にしてフォントの調整を行うのは、良くありません。Webを構築したときに、デザインが歪んだり劣化する原因になるおそれがああるからです。   パフォーマンスの問題 ピクセルパーフェクト（px単位の正確な設計）が重要なのは、他にもデザイナーがWeb用に作成するPhotoshopのファイルには問題があるからということも理由の1つです。 その1つの例がドロップシャドウです。 Photoshopは高機能なドロップシャドウなどを備えています。デザイナーは、シャドウ、マスクなどのデザイン効果を柔軟に使いこなすことができます。しかし、エンジニアがこれらのデザインをWeb用にコーディングするときには、使える選択肢がかなり限られているのです。 また、エンジニアがWebサイトのフロントエンドの開発をするときには、パフォーマンスを非常に重視します。 スタイリッシュなUI要素を表現するために、24bitの半透過または透過のPNG形式のサイズの大きい画像などを使うとしたら、Webサイトの読み込みに時間がかかります。もしこのような要素が100個あれば、100倍の時間がかかり、Webサイトの動きは非常に鈍くなります。   解決策の1つは、ドロップシャドウを使う代わりに、CSSでコーディングすることです。 CSSを使うと、ドロップシャドウの他にも多くのデザイン効果を表現できます。もしエンジニアがCSSを使えるなら、Web上にPNG形式の画像を埋め込む代わりに、CSSを使うべきです。 軽量なデザインが可能となり、要素のサイズを小さくすることができるというメリットがあります。しかしデメリットもあり、CSSで作ったタイポグラフィやドロップシャドウは、元の画像と全く同じデザインに仕上げることはできません。 2つの画像のうち、上が透過のPNG形式の画像で、下がSVG形式の画像です。 見た目はほとんど同じですが、画像のサイズはPNG形式は12.3kもあるのに対して、SVG形式はわずか1.7kです。SVG形式の場合、シャドウをデザインするときには、ディテールの調整、ブレンドモードによる色の変更なども、完璧に行うことができます。 一方、透過のPNG形式だと、画像の背景色を変更するときに、背景色がアルファチャンネルのデータ領域ににじんでしまって、他の要素の周りに光の輪がついたように見えることがあるのです。   Photoshopの代替ツールを考える あなたがどのようなツールを選ぶとしても、PhotoshopがWebデザインのツールとしては最適な選択でないことは明らかです。たとえば私は、Bohemian Coding社の開発したSketch 3というデザインツールを使っています。 今のところSketchにはバグや問題もあるのですが、デザインの整合性を保つためには非常に優れたツールです。 まず、px単位で厳密に行う設計なデザインを素早く簡単に行うことができます。フォントやドロップシャドウも、CSSでコーディングするのと変わらない出来栄えです。 Sketchには、作成したデザインからCSSのコードを取得して、コピー&ペーストで利用できる機能もあります。そのため、一度デザインしたものを、最終的にHTMLやCSSでコーディングし直す必要もありません。   ピクセルパーフェクトなデザインを可能とする現代的なツールを使えば、デザインの意図を完成製品に反映することが可能です。プロジェクトのメンバーの仕事の負担軽減にも大いに役立ちます。 より詳しい活用方法をご紹介すると、私は各レイヤーのプロトタイプを作るために、Sketchで作成したモックアップをインポートして共有しています。こうすることで、同じチームのエンジニアはデザインの見た目だけではなくて、デザインの動作性も知ることができます。   3. 値を統一する マージン（margin）、フォント、行（line）の値を統一することで、プロジェクトを速いペースで進めるときにもフラストレーションの緩和に役立ちます。 良いデザインを生むためには、フォントのサイズやウェイト（太さ）、文字間隔、行の高さを制限することも大切です。具体的なアドバイスは、次に示しています。   マージン（margin） マージンについてのアドバイスはシンプルです。 マージンとパディングの幅のpx（ピクセル）の数値は、端数を切り捨てて、5の倍数に設定します。たとえば、13、17pxなどよりも、10、15、20pxなどを使いましょう。 デザインと開発の両方の観点から、5の倍数のpxを使うことには、統一感を生む効果があるといえます。   行（line）の高さ 行の高さを統一することで可読性が高まります。 もし行の高さを出力するときに、Photoshopなどのプログラムをデフォルトとして使っているとしたら、可読性に問題が生じるおそれがあります。また、行の高さを1.2（元のフォントの1.2倍の高さ）に設定するのは、現代的なWebデザインには適していません。エンジニアやエンドユーザーが問題を抱える可能性があります。 多くのWebサイトでは、可読性を最大限に高めるために、行の高さを1.5または1.6に設定しています。エンジニアが後で修正しなくてもいいように、本文（body）のテキストにはこれらの数値で統一しておくといいでしょう。もっとも、見出し（headline）のテキストは、1.2で設定しても見栄えの良いデザインになります。   ただし一貫性を保つのがルールです。たとえば完成製品のデザインにおいて、見出しの行の高さを1.2、本文の行の高さを1.5とすることが目標であれば、このデザインを実現できるように、モックアップやプロトタイプの作成においても、同じ数値を一貫して使うことが大切です。   フォントサイズと文字間隔 使用するフォントサイズは3または4種類、最大でも5種類までに止めましょう。 BootstrapやZURBのFoundationなどのレスポンシブデザインに使えるフレームワークでは、フォントサイズが規定値になっていることがあります。さらに、モバイル版を設計するときには、見出しのフォントサイズが一回り小さな規定値になります。デザインするときには、これらの規定値を解除しておきましょう。 見出しに使うフォントサイズは、端数のない数字で統一します。ページからページへ移行するときにも、デザインの統一感が保たれる効果があります。40pxと42px、または38pxと38.5pxなど不揃いな値を組み合わせて使うと、デザインの統一感が失われてしまいます。   文字間隔についても、値を統一することが大切です。文字間隔には、見出しを強調して、美しいタイポグラフィを生み出す効果があります。 また、もしあなたがデザイナーで、文字のデザインについてエンジニアより主導権を握りたければ、各要素ごとに文字間隔を統一して設定しておきましょう。   フォントのウェイト（太さ） エンジニアの観点からいうと、デザイナーがフォントのウェイトを増やすほど、フォントの読み込みに時間がかかります。 これは、Googleフォント、AdobeのTypekit、その他すべてのフォントについて当てはまります。どのくらいの時間になると思いますか？フォントのウェイトの数を2上げるごとに、ページの読み込みに2倍の時間がかかります。Webサイトの読み込み時間が長くなるほど、利用者もユーザーエクスペリエンスを遅く感じるはずです。   フォントのウェイト数はなるべく控えめにすることを、私はおすすめします。デザイナーは「このデザインのフォントはもっと軽いウェイトで実現できないか？」、「5ではなくて3のウェイトでも良いのではないか？」など自問してみるべきです。 ウェイトの数を小さめにすれば、プロジェクトを効率的に進めて、軽量なデザインを実現することができますし、結果としてモバイル端末や他のプラットフォーム上での読み込み時間も少なくなるので、ユーザーエクスペリエンスの質を高めることにもつながります。   4. プロトタイプを使った共同作業をする プロジェクトの共同作業を進めるときに、プロトタイプを利用しないとしたら、ミーティング、電話のやりとり、（コーヒーのしみのついた）手書きのメモなどが溢れかえり、コミュニケーションは収拾がつかなくなります。 言うまでもなく、文書は管理不可能になり、プロジェクトマネジャーやデザイナーたちはデザインのコンセプトを伝えるのに苦戦するでしょう。 画像：注釈を入れすぎたワイヤーフレームの悪い例 次に、文書を減らして、明確なコミュニケーションを図るのに役立つステップをご紹介します。 まずプロジェクトの開始時に、要件定義書などは、網羅的な文書というよりもナレッジハブ（情報の中央管理システム）として活用するよう、提案してみましょう。たとえば次の画像に示した要件定義書では、基本デザインと技術原則を定め、これにプログラムのバージョン管理のために使うツールへのリンク情報を加えただけのシンプルなものです。あとは、これらのツールを使ってデザインやバージョンをマークアップ言語で記述したときに、現場での必要性に応じて、追加の文書を作成すればいいのです。 画像：Autodesk社のソフトAutoCAD 360で作成した製品の要件定義書 プロジェクトの開始後には、システム全体のインタラクションを考えるために、ユーザーフローを作成します。次の画像で示すように、ユーザーエクスペリエンスにおいて重要な鍵となる部分には、コメントを追加しておきましょう。エンジニアとプロジェクトマネジャーが全体の流れを把握するのに役立ちます。 画像：Autodesk社のソフトAutoCAD 360で作成したユーザーフローの図 ユーザーフローについてディスカッションを重ね、イテレーションを実践したら、次はユーザーエクスペリエンスのデモを行います。ローファイのプロトタイプを作成し、エンジニアに説明するためのコメントを余白に加えておきます。   5. デスクトップファーストの手法を排除しないこと 私の携わったプロジェクトの約95%は、いわゆる「デスクトップファースト」の手法で開発が進められました。デスクトップファーストは、モバイル版より先にデスクトップ版から、インターフェース、デザイン、インタラクションなどの開発を進める手法です。 デスクトップファーストと対比される手法がモバイルファーストで、Web製品のモバイル版を開発するときには、とても優れた手法です。しかしながら実際に有効活用するのが難しいこともあり、デザイナーはデスクトップファーストの手法を排除するべきではありません。 デスクトップファーストで開発を進めるとして、すでに製品のユーザーがいるときには、Googleアナリティクスのトラフィック分析を利用すれば、ユーザーの使っているデバイスの「画像の解像度」を知ることができるので、最適なスクリーンサイズを決定できます。   プロジェクトによっては、13インチまたは15インチのMacBook Pro Retinaディスプレイモデルのスクリーンに合わせてデザインすることもあるかもしれません。おそらく、12インチの小型ノートPCなどのスクリーンに合わせてデザインすることが最も多いと思いますが。 Googleアナリティクスを利用することで、ユーザーがコンテンツをどのように見ているかを知ることも、コンテンツがスクリーン上で一番映えるにはどうデザインしたらいいかを知ることもできます。 またCSSのメディアクエリ（Media Queries）とブレイクポイント（Breakpoint）を、レスポンシブデザインに上手く活用する方法を知ることも大切です。ブレイクポイントのpxの数値は、デザインが良く見えるように適切に設定します。   6. アセットの引き継ぎには十分注意を払う デザインした要素などアセットをチームのメンバーに引き継ぐときには、渡すだけで済むこともあれば、デザインを改良するためにコミュニケーションを何度も重ねなければならないこともあります。 「画像はプログレッシブJPEG形式にするべきか？」、「どのくらい縮小するか？」、「SVG形式にするべきか？」、「SVG形式の画像を最適化する方法は？」、「SVG形式の画像をどのように作成するか？」などのやり取りが行ったり来たりすることもあります。 たとえば、デザイナーがサイズの不揃いなアイコン一式を作成したとします。 これらを引き継いだエンジニアは、SVG形式のファイルでアイコンを作成し直すことになります。SVG形式のファイルはパフォーマンスが高い一方で、そのままでは要素のサイズは不揃いなので、スクリーンの上（top）または下（bottom）に合わせて配置したたときには、統一感のないデザインになります。 その結果、エンジニアはすべてのアセットを最初から作り直すか、CSSでコーディングをしてサイズを統一しなければなりません。 仕事の無駄を避けるには、なるべく早い段階で、最適なファイル形式を選んでおくべきです。 [お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。
Webデザイン

今さら聞けない！CSSとは【初心者向け】現役Webデザイナーが解説

CSSとは何かについて、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   「CSSが分からないけど今さら聞けないよな…」 「CSSってなんで必要なんだろう…」 「どうやってCSSを書いたらいいんだろう…」   上記のような疑問や悩みを感じている方は、最後まで読んでいただければ「CSSとは何か」を理解できますのでぜひ参考にしてみてください。 目次様々な見出しデザインを見てみよう見出しデザインを装飾する基本を学ぼうコピペだけで実装してみよう監修してくれたメンター そもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。   大石ゆかり 田島メンター！！CSSは何を行うものなんですか～？ 田島悠介 CSSの役割はサイトの「見た目」を作ることだよ。 音声による読み上げや印刷時に関する設定もできるけれど、一番多く使われる役割はWebページのデザインやレイアウトなど「見た目」に関する指定だね。 大石ゆかり 見た目というと文字や画像の大きさ、色などですか？ 田島悠介 そうだね。 実際のサイトで、CSSが適用されている場合とそうでない場合の違いを見てみよう。   CSSとは CSSとは「Cascading Style Sheets」 の頭文字をとったものであり、スタイルシートとも呼ばれます。   HTMLは見出しやヘッダー情報などWebページの文書構造を形作るための言語です。 対してCSS言語は、HTMLで作られた文書構造にデザインを加えて見栄えを整える役割を担っています。   WebページはHTMLとCSSが組み合わさって作られているのです。     実際に、ブラウザでWebページを表示してみましょう。 （ここでは、例としてテックアカデミーのWebサイトを開いています） 上記のページはHTMLとCSSとの両方を使って作られています。 画像が入っていたりリンク部分をボタンのように装飾したり、見栄えが良くなるようデザインされていますよね。     試しに上記のページからCSSを除き、HTMLの文書構造のみを表示させてみましょう。 かなり簡素なページになりましたね。   たまにWebページの読み込みがうまくいかない場合など、このような画面が表示されたことがある人もいるのではないでしょうか。   キレイに整ったデザインのWebページを表示するためには、HTMLにCSSを加える必要があるのが分かりますね。   田島悠介 CSSを適用していない場合のサイトを見るとどうかな？ 大石ゆかり 見出しと文字がただ順番に書かれただけになって、画像の位置や大きさもなんだか変わっちゃいましたね。 田島悠介 これらのレイアウトやデザインを指定しているのがCSSになるんだ。 今見ているのは、HTMLだけで構成された状態の文書だね。 大石ゆかり 見やすいページを作るのに、CSSはとても大事なんですね。   CSSファイルの作り方 CSSファイルの作り方の手順をご紹介しましょう。 ファイル名に拡張子の「.css」をつけることで、CSSファイルとしてコンピュータが認識してくれます。   拡張子とは 拡張子とは、ファイルの種類を分かりやすく判別するために使われる文字列です。 みなさんも普段使うWordやExcelなども以下のような拡張子で表示されます。 Word：.docx Excel：.xlsx 文書：.pdf 画像ファイル：.jpeg   CSSファイル作成の手順 CSSファイルの作成は以下の手順で行います。 新規フォルダを作成 作成したフォルダ名の最後に「.css」と書く 練習でCSSファイルを作成する場合は「test.css」や「style.css」など、分かりやすい名前を付けてあげましょう。   実際に以下の画像のように「.css」のファイルを作成してみます。 上記のように簡単にCSSファイルが作成できますので、実際に手を動かしてみて作成してみましょう。   [PR] Webデザインで副業する方法とはCSSを実際に書く方法 先ほど作成した「style.css」ファイルを使って、実際にCSSを書いてみましょう。   まずは、HTMLファイルを用意します。 CSSをHTMLファイルに読み込ませるために、<head>と</head>で囲まれた部分に <link rel="stylesheet" href="style.css"> といった一文を以下の画像のように入れます。 <link rel="stylesheet" href="style.css">を書くことで、HTMLに「style.css」ファイルがリンクされ、CSSの指定をHTMLでも読み込んでくれるようになります。     では実際に、以下のような緑色の背景に白色で「TechAcademy」という文字を表示させるCSSの指定を書いてみましょう。   編集は以下の手順で行います。 HTMLファイルを編集 CSSファイルを編集 では、順番に見ていきましょう。   HTMLファイルの編集 まずはHTMLファイルの編集です。 <body>と</body>で囲まれた部分に表示させたい文章を書いていきましょう。   コードを書く際、CSSを適用させる場所を分かりやすくするため、緑色の背景を表示させるための「main」という枠と、文字を表示させる「text」という枠を用意します。 完成されたページで見ると、以下のように分けています。   用意した枠にそれぞれ「クラス名」を設定してあげます。 クラス名とは「class=”○○”」というように表記されたCSSを適用させるためのタグのことです。     今回はbodyタグ内に、「main」と「text」のクラス名をそれぞれ以下のように記述します。 （HTMLの記述に自信がない方は「HTMLとは」という記事も合わせてお読みください。） 以上でHTMLの編集は終了です。   CSSファイルの編集 続いて、CSSファイルの編集です。   HTMLの編集で全体を囲む「main」クラスと、文字を表示させる「text」クラスを用意しましたね。 それぞれのクラスに幅や配色などのデザインを「style.css」に指定していきましょう。   今回は背景と文字のデザインを以下のように指定しましょう。 背景色：緑 高さ：200px 幅：100％ テキストの位置：センター フォントサイズ：36px テキストの色：白 上記の内容を「style.css」に以下のように記述していきます。 CSSファイル内では、クラス名の名前の前に「.」を付けて表現するのが決まりですので覚えておきましょう。     上記のようにCSSを指定すると以下のようなページが表示されます。   はじめはCSSの記述と完成イメージがうまく結びつかず、思うようにレイアウトやデザインが出来ない場合も多々あるでしょう。 しかし、繰り返し練習していくと慣れていきますので何度も試しながら学習していきましょう。   執筆してくれたメンター ノマ リカ 印刷会社の校閲部門に半年、DTPオペレータとして4年間経験を積んだ後、Web制作会社にて8年間デザイナーとして従事。 現在は住宅メーカーに勤務しながら社内のSE及びWeb担当として従事しています。   田島悠介 CSSに関する基本的な構造だよ。 大石ゆかり 「main」の部分、「text」の部分それぞれに色や大きさの指定をしているんですね。 田島悠介 この「.main」「.text」のようなスタイルを適用させる範囲の指定を「セレクタ」というんだ。 まずはこれを覚えておこう。 大石ゆかり 頭に入れておきます。 ありがとうございました！   CSSを実際に書いてみたい場合は、CSSの書き方の記事も合わせてお読みください。 また「HTMLとは」という記事も読んでおくと、よりHTMLの理解も深まりますのでおすすめですよ。   CSSを学習中の方へ これで解説は終了です、お疲れさまでした。 つまずかず「効率的に」学びたい 副業や転職後の「現場で使える」知識やスキルを身につけたい CSSを学習していて、このように思ったことはありませんか？ テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。 まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。 時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
CSS

HTMLで見出しタグと段落タグを使う方法【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。 今回は、HTMLの「見出しタグ」と「段落タグ」について解説します。 そもそもHTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。   なお、今回の記事の内容は動画でもご覧いただけます。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 見出しタグと段落タグを使う方法について詳しく説明していくね！ 大石ゆかり お願いします！   HTMLの見出しと段落 HTMLはもともとスイスの物理学研究所の研究員だったティム・バーナーズ＝リーという人物が、数千人規模の研究者たちと研究や仕事のやりとりをするためにつくられました。初期のHTMLは学術文書を共有するシステムとして開発されたため、論文の書き方に沿うように、タイトル・本文・引用と文書の構造が明確に定義されています。 今回は見出しと段落を分けることにより、ちょっとしたウェブページを作ってみましょう。   見出し（hタグ） 見出しはHeadlineの頭文字hを意味するhタグを使います。 body の部分にh1タグをつかって「はじめてのHTML」と記述してみましょう。 <h1>はじめてのHTML</h1> 大きな文字で見出しが表示されました。   hタグには見出しが6段階あり、一番重要な大見出しがh1、中見出しがh2、小見出しがh3と数字が大きくなるにつれ、深い階層にある見出しとなります。 論文を書くときに、章・節・項と文書の構造があるように、HTMLでも見出しはh1→h2→h3…と数の小さなものから順番につけるのがルールです。h2の見出しで書かれた文章のなかにh1の見出しを入れることは、深い階層の文章の中に浅い階層の文章を入れることとなり、文の構造を崩してしまうことになるので気をつけましょう。   大石ゆかり 6個もあって、どうやって使ったらいいんですか？ 田島悠介 見出しタグは、ページ内で一番言いたいことなので、h1タグはページのtitleタグと同じになってることもあるよね。 大石ゆかり h1タグは何回も使用してもいいんでしょうか？ 田島悠介 h1タグを複数回利用する人もいるでしょうが、一般的には1回のみの利用に留めておいたほうがSEO上良いかと思うよ。   複数の見出しタグ（hタグ）を使用した例 先程の例では、h1からh6までそれぞれ1回づつ利用したHTML構造でした。 実務では、複数の見出しタグを組み合わせて利用します。   コード例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>複数の見出しタグ（hタグ）を使用した例</title> </head> <body> <h1>h1タグ</h1> <p>h1タグ内のp要素</p> <h2>h2タグ</h2> <p>h2タグ内のp要素</p> <h3>h3タグ</h3> <p>h3タグ内のp要素</p>
HTML

デザインを実装する上で知っておきたい！9つの原理とは

本稿は、Smashing magazineのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事は、UXディレクターでありデザイン本の執筆もしているTom Greever氏によって投稿されました。   先日、クライアントに向けたHTMLとCSSを使用してデザインを実装するための方法についての講習会で指導を行っていました。 そこでは、スタイルガイド駆動開発やOOCSS・SMACSSのような取り組み方、及びモジュール設計などの工程についての議論も行われました。最終日近く、ある人に「でも、どうやってそれが正しく行われていると判断したらいいんでしょうか？」という質問を受けました。 最初、私は混乱していました。それまで私は「正しく行う」ことだけを説明していましたが、その質問が何が主格の選択肢であるかを評価するためのより深いニーズに根ざしているのに気付きました。 例えば「他と共同して動作するクラスの数は最小限にする」というような特定のアドバイスは、モジュール性に関する幅広い認識がなければ役に立たないのです。 私たちの仕事がきちんとできているかを本当に知るために、デザイン実装の目安として使えるより高いレベルの原則が必要であると気付きました。 この溝を埋めるため、デザイン実装に関する9つの原則をまとめています。 CSSやコードを吟味するときの他にチームに志願している人への面接を行うときでも、これらの原理は特定の技術やデザインを実装する一般的な手段を超越した骨組みとして利用することができます。   1.構造化 文書はスタイルシート適用の有無に関わらず、意味があり論理的に書かれている。 2.効率的 デザイン実装に使われているマークアップとアセットは最小限である。 3.標準化 共通の規定があり、自由に使うことができる。 4.抽象化 ベースとなる要素は特定のコンテキストから切り離され、中心となるフレームワークを形成している。 5.モジュール化 共通して使える要素は、再利用ができるように分割されている。 6.設定が可能 ベースとなる要素を、任意のパラメータでカスタマイズできる。 7.拡張が可能 コードは簡単に拡張することができ、今後も追加されることが見込まれている。 8.文書化されている すべての要素は、それを使用して拡張できるように他の人に説明されている。 9.正確である 最終的なアウトプットは、予定された通りのデザインとして適切な表現がされている。   プロジェクトに各原則がどのように適用するかを確認するため、この記事の基準として私のプロジェクトのひとつのモックアップを使用します。 これは既存のECサイト中の、デイリーディールを宣伝する特別なランディングページです。スタイルの一部は既存のサイトから継承されますが、ほとんどの要素は新しいものであるということに注意してください。上記の原則を使って、この静止画像からHTMLとCSSを生成してみましょう。 この製品の「カード」レイアウトは、新しい要素です。   1.構造化 文書はスタイルシート適用の有無に関わらず、意味があり論理的に書かれている。 ここでの原則は、ドキュメント(HTML)の内容がスタイル(CSS)がなくても意味を持つということです。正しい見出しレベル(heading)や順序なしリスト(ul)などを設定し、<header>や<article>といった意味のあるタグを利用するということでもあります。 aria-labelやalt属性、その他のアクセシビリティに必要な可能性があるものをきちんと使用しましょう。 見た目的に変わらないアンカータグとボタンのどちらを使うかということは、大したことには思えないかもしれません。ですが視覚的に同じであっても、これらは違う意味を伝え違う動作を行います。セマンティックマークアップはその意味を検索エンジンや補助技術に伝え、他デバイスにおいての再利用もやりやすくします。それはプロジェクトの将来性に繋がります。   よく構造化された文書を作成するということは、セマンティックHTMLを書くことを学び、W3Cによる標準や他の専門家のベストプラクティスを習慣づけ、自分のコードが分かりやすくなるように時間をかけることです。 スタイルシートなしでブラウザで確認するのが、一番シンプルなHTMLのテスト方法になります。 そのHTMLはCSSがなくても使うことができるか 階層構造が一目で分かるかどうか HTML自体で意味を伝えることができるか しっかりした構造をもつ文書を作成するにはHTMLから始めるのがよいでしょう。ビジュアル的なスタイルを考える前に、構造とそれぞれの意味のためにプレーンなHTMLを書きます。divは避け、妥当なタグを考えます。この基本的なステップが、適切な構造を作るために役立つでしょう。 <section> <header> <h2>Daily Deals</h2> <strong>Sort</strong> <span class="caret"></span> <ul> <li><a href="#">by ending time</a></li> <li><a href="#">by price</a></li> <li><a href="#">by popularity</a></li> </ul> <hr />
Webデザイン

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

Webエンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

オーダーメイドコース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLとCSSでおしゃれな見出しデザインを作る方法を現役デザイナーが解説【初心者向け】