しかし、実際に作成する際に慣れていないとフォントを選ぶのに迷ってしまうことも・・・。

それもそのはず、Canvaで使えるフォントは日本語フォントだけでも300種類以上あります。

こちらの記事ではCanvaで使えるおすすめの無料フォントを10選ご紹介します。

デザインの作成においてフォント選びはとても大切です。イメージデザインを作成してみたのでそちらも是非参考にしてみてください。

この記事はこんな方におすすめ

• ノンデザイナーさん
• Canvaを使い始めたばかりの方
• Canvaでオリジナルの投稿用画像を作りたい方
• デザイン制作時にフォント選びに迷ってしまう方

Canvaで使えるおすすめのフォント

Noto Sans JP

AdobeとGoogleが共同開発したCanva定番のフォントです。様々な媒体で使われているシンプルで読みやすく、少し丸みのあるゴシック体。

ひらがな、カタカナ、漢字、英語と多言語に対応しているため、多様な場面で利用することができます。また、字体の太さも幅広く展開しているので、メインテキストやサブテキストなど付け足したい要素に合わせて追加することもでき、汎用性が高いです。

フォントにクセがなくどんなジャンルにも相性が良いので、とにかくどれを使えばいいかわからないときにおすすめです。

つなぎゴシック

全体的に太文字でありながらも丸みが少しあることによって柔らかさを感じるゴシック体。インパクトを残しつつも、親しみやすい印象を与えることができます。太さがあり、視覚性も高いので見出しやキャッチコピー、ポスターのタイトルなどにおすすめです。

キアロ

ゴシック体をベースにしつつ、線に強弱のある明朝体の特徴を併せ持ったフォントです。爽やかさとリズム感をイメージして作られており、大正ロマンなデザインやレトロ調な雰囲気も演出することができます。

筑紫明朝

インクの溜まりを表現した一般的な活字体ですが、クセがなく読みやすいフォントです。文字の線が繊細で洗練されたデザインが特徴。上品さと親しみやすさが印象的でポスターなどにもよく使われています。

はれのそら明朝

角丸ですっきりとした美しさを持つ女性らしさと高級感のあるフォント。柔らかさも併せ持ち見た目にも優しさを感じさせるのが特徴で、ファッションや美容などのコンテンツに適しています。類似フォントのはんなり明朝もおすすめです。

ふい字

ペンで書いたような柔らかさと可愛らしさが両立された細めのタッチがポイント。汎用的に使いやすい字体なので男女ともに人気のあるフォントです。

あまりビジネスシーンのデザインでは使えませんが、温かい印象があるのでブログのアイキャッチ画像やSNSのトップ画像には適しています。また、メインテキストとしての使用だけでなく、狭いスペースで一言加えたいときにもおすすめです。

コーポレート・ロゴ

ひらがな、カタカナ、漢字、英語に対応するフォント。文字の幅が狭くモダンな雰囲気があります。企業やサービスに使用されることを想定して作られているので、サイトロゴなどに使用しても良さそうですね。

Time New Roman

英語の論文や新聞などの正確さを求められる場面で多く使用されているフォント。誠実さや上品さを表現することができます。また、古くから愛されているため、どこか懐かしさを感じることもできるのが魅力的です。

Pinyon Script

すらっとした形状が特徴のフォント。上品でゴージャスな印象があり、特別なイベントや結婚式などのパーティー招待状に最適です。

このフォントを使用することで特別な場面を華やかにすることができます。

Holiday

マーカーで書いたようなラフなタッチが印象的なフォント。

文字が少し不規則で手書きのような手作り感があるのでカジュアルな印象や、ラフな印象にしたいときに最適です。

Canvaでフォントを使ってデザインしてみる

文字の入れ方を工夫するだけで格段におしゃれなデザインに仕上げることができます。

実際にフォントを使用していくつかデザインを作成してみましょう。

例1.カジュアルなデザイン

一つ目はカジュアルさをイメージしたデザインです。同じフォントでも字体の太さを変えて組み合わせるだけで伝わるイメージに変化が出ます。

ただ、カジュアルな書体のフォントは使い方によってはビジネスシーンと合わなかったり、子供っぽい印象になってしまいます。

ですが、シンプルでメッセージが伝わりやすいので、様々なシーンでアレンジがしやすく汎用性が高いです。

もし使われる場合にはプライベートな雰囲気のあるデザインに使用するといいでしょう。

例2.高級感のあるデザイン

高級なイメージのある色といえばゴールドやシルバー。この2色とモノトーンな色を組み合わせると一気に高級感を演出することができます。

それ以外の色を使用する場合は深くて落ち着いたカラーがおすすめ。

赤系ならボルドー、青系なら紺色といった落ち着いた色合いの組み合わせがいいでしょう。

文字は小さくすると余白が生まれ、余裕のある優雅な雰囲気を演出することができます。明朝体や筆記体のフォントは線に強弱があるので品のある大人っぽい印象に仕上げてくれますね。

例3.フェミニンなデザイン

くすみカラーは彩度が低く、少しグレーがかかった可愛らしくも落ち着いた色合いでフェミニンな印象を演出してくれます。一般的には”ニュアンスカラー”と呼ばれています。

また、くすみカラーは程よいくすみ具合がフェミニンさを引き立ててくれます。くすみすぎてしまうと印象が暗くなってしまうのでやりすぎには注意しましょう。

こちらも余白を取り入れることによってバランスがとることができ、洗練されたデザインに仕上げることができます。

また、背景に文字を入れるスペースがない場合、文字に背景色を配置することで読みやすくなります。今回は図形を配置しましたが、エフェクトや素材からでも簡単に追加できます。

まとめ

ここまで本記事をお読みいただきありがとうございます。おすすめのフォントを10選ご紹介しましたが、いかがでしたでしょうか？

Canvaには魅力的なフォントの種類がたくさんあり、選ぶことに時間を取られてしまいがちです。字体ごとの特徴や使用シーンについて理解を深めることによって、楽しみながらフォント選びを実践できます。

また、Canvaには今回紹介したフォント以外にも魅力的なフォントがたくさんあります。

デザイン制作をする中、フォントで文字の入れ方を工夫するだけで印象が大きく変わり、制作イメージに合わせることによって全体に統一感が出てメッセージ性を強化し、目を惹くおしゃれなデザインに仕上げることができます。

コンテンツのオリジナリティを高めたい場合には、自分好みのフォントを探してみてはいかがでしょうか？

今回の投稿が皆さんのデザイン制作のお役に立てたらうれしいです。

▼今回紹介したフォントの一覧はこちら

• Noto Sans JP
• つなぎゴシック
• キアロ
• 筑紫明朝
• はれのそら明朝
• ふい字
• コーポレート・ロゴ
• Time New Roman
• Pinyon Script
• Holiday

そんなときに助けてくれるのが「CSSフレームワーク」です。

しかし、CSSフレームワークの種類は非常に多いため、自分にあったCSSフレームワークを見つけることは大変です。

この記事では、CSSフレームワークのそれぞれの特徴をまとめています。目的に合わせたCSSフレームワーク選びに役立てていただければ幸いです。

CSSフレームワークとは？

CSSは、Webページ内のテキスト、画像や動画の幅、余白を指定したり、それぞれの表示箇所を指定してレイアウトを決めたりして見た目を設定するプログラミング言語です。
フレームワークとは、Web制作やアプリケーション開発においてよく利用される機能をあらかじめパーツとして備えた枠組みのことです。
そして、Webサイトの制作で使用できるCSSコードを集めたものがCSSフレームワークです。さまざまなパーツがあらかじめデザインとコーディングがされ、セットの状態でインターネット上にあがっています。さまざまなパーツとは以下の通りです。

さまざまなパーツ

• 見出し
• フォーム
• レイアウト
• カラム
• ボタン型のリンク
• 送信ボタンや確認ボタン
• タブメニュー
• ドロップダウンメニュー
• バーガーメニュー

次にCSSフレームワークはどのようにしたら使えるのか説明します。

CSSフレームワークの使い方

1. フレームワークの配布ページからファイルをダウンロード
2. 指定されたCSSを読み込ませる
3. ドキュメンテーション通りにHTMLを開く
4. パーツを指定するclassを追加

ものによって違いはありますが、多くのフレームワークはこれで使えるようになります。
Web上には、オープンソースで開発され、無料で使用できるさまざまなCSSフレームワークが数多く存在しています。従って、誰でもインターネットにアクセスできれば、これらのCSSフレームワークを手に入れ、Webサイトを制作するために利用できます。

CSSフレームワークのメリット・デメリット

メリット

• ページ制作時間の短縮
• デザインの統一感
• 複数人で作業してもクオリティがある程度保てる
• レスポンシブデザインに対応可能
• メンテナンス・管理がしやすい

このようなメリットのおかげで、WebデザインやWeb開発において、CSSフレームワークを活用すれば短時間でサイト構築できるだけでなく、クライアントへの対応も早くなります。

逆にデメリットの部分もあるので、そこも把握しながらCSSフレームワークを有効的に活用しましょう。

デメリット

• 似たようなデザインが多い
• バージョンによって更新されないことがある
• パフォーマンスが保てなくなるときがある

おすすめのCSSフレームワーク

CSSフレームワークのそれぞれの特徴・利点をご紹介します。

Tailwind CSS

世界中で一番「学びたい」「また使いたい」と思っている人の数が多いCSSフレームワークです。また、無料で利用できます。
個人プロジェクトや小規模のWebサイトを作る際におすすめです。
Tailwind CSSの特徴は以下の通りです。

• ユーティリティが重視されている
• CDNに対応
• 柔軟なカスタマイズが可能で、メンテナンスもしやすい

Pure.CSS

機能がシンプルなので初めての場合でも簡単に利用はできますが、ある程度CSSをかける方におすすめです。また、サイトデザインにオリジナル性を出したい方にもおすすめです。
ヤフーが開発をしたCSSフレームワークです。
Pure.CSSの特徴は以下の通りです。

• レスポンシブデザイン対応
• 最小限のフレームワーク
• 軽量なファイルサイズ

Foundation

ある程度CSSを書ける方におすすめです。また、大規模なプロジェクトを行う際にもおすすめです。
カスタマイズ性が高いため、アプリやHTMLメールを作成する際にも利用されています。
Foundationの特徴は以下の通りです。

• 機能性が豊富
• CDNとサーバー設置の両方に対応
• レスポンシブデザイン対応

Bulma

無料のオープンソースCSSフレームワークです。
カスタマイズが不要のため、CSSの知識がなくても利用できます。
Bulmaの特徴は以下の通りです。

• レスポンシブデザイン対応
• ドキュメントが充実している
• CDNとサーバー設置の両方に対応

Ant design

企業レベルの大規模なアプリケーションの開発に最適です。
中国のAlibabaが開発したCSSフレームワークのため、知名度の高い中国企業の多くが利用しています。
Ant designの特徴は以下の通りです。

• 行き届いたメンテナンスがされていて国際化対応
• シンプルなデザインでアレンジしやすい
• 商品利用もできる

Materialize

CSSの知識があまりない方でも簡単に始められます。
このCSSフレームワークは、Googleが提唱するマテリアルデザインの原則に基づいています。これを利用することで、マテリアルデザインに準拠したウェブサイトを簡単に作成することができます。
Materializeの特徴は以下の通りです。

• UI（User Interface）/UX（User Experience）が重視されている
• アニメーションなど動きのあるサイト制作ができる
• ドキュメントやコード例が用意されている

UI kit

多くあるCSSフレームワークの中で、最も洗練されたデザインを持っているCSSフレームワークです。
UI kitの特徴は以下の通りです。

• 洗練されたデザインが用意されている
• カスタマイズがスムーズ
• 利用者とサイトにおける接点（ユーザーインターフェース）が美しい

Bootstrap

Twitter社が開発した知名度の高く利用者が多いCSSフレームワークです。
大きなプロジェクトを行う際におすすめです。
Bootstrap特徴は以下の通りです。

• Web上の情報が豊富
• レスポンシブデザイン対応
• デザインの一貫性がある

Open Props

新しく出てきたCSSフレームワークですが、小規模ながら熱心なファンを生み出しています。また、無料で利用できます。
Open Propsの特徴は以下の通りです。

• レスポンシブデザイン対応
• 単独でも他のフレームワークとの併用もできる
• 一貫性のあるUIコンポーネントを素早く実装できる

＊UIコンポーネントは、ウェブサイトやアプリの部品や要素です。ボタンやメニュー、入力フォームなど、ユーザーが画面上で対話する様々な要素を指します。これらのコンポーネントを組み合わせて、ユーザーインターフェースを構築しやすくすることができます。

参考サイト①
参考サイト②

選定のポイント

CSSフレームワークを選定する際には、以下のポイントに注意しましょう。

• プロジェクトの要件に合っているかどうか
• カスタマイズ性が必要か
• コミュニティサポートがあるかどうか
• ドキュメンテーションが充実しているか
• レスポンシブデザインに対応しているか
• CSS以外に必要な開発言語があるかどうか

CSSフレームワークを選ぶ際には、これらの選定ポイントを押さえて検討しましょう。そして、プロジェクトに最適な選定が行えるといいですね。

まとめ

この記事では、CSSフレームワークについての基本的な知識や選定の際のポイント、そして検討すべきCSSフレームワークのメリット・デメリットに焦点を当て、さらに具体的な8種類のCSSフレームワークもご紹介しました。
CSSフレームワークに興味や関心をお持ちの方々にとって、この記事が有益であれば嬉しいです。どのCSSフレームワークを選ぶかに迷っている方や初心者の方にとって、適切な選択をサポートできるような情報が提供されています。
まずは作りたいサイトについて考えて、構想が実現できるCSSフレームワークを選びましょう。

HTMLとCSS

HTMLとCSSは、Webページを作るにあたって、基本となるものです。この2つは役割には明確な違いがあります。この２つの基礎知識を理解し、CSSで出来ることを整理していきたいと思います。

HTMLはWebページの内容を作る骨組みになる言語

WEBページに必要な文章、画像などを作ります。

文字列はテキストだけでなく、「見出し」「改行」「段落」や、「太文字」「リスト」や画像をいれることができます。

CSSはHTMLの表示レイアウトを装飾するための言語

出来たHTMLの装飾や画面のレイアウトを整えたり、背景に色をいれる、アニメーションをいれて画像を動かす等、見栄えの良いWebページを作ることが出来ます。どのように作るか、そして具体的にどのようなことが出来るか見てみましょう。

CSSの基本

CSSの基本文法

CSSは以下の書式を使います。

セレクタ

HTMLの文章の中の、”どこ”を示す部分です。
　例えば、<ｂ>画像を丸くしたい、<ｂ>見出し<ｂ/>の文字を赤にしたい場合、セレクタは 画像の「img」や、見出しの「h1,h2」などを置きます。

プロパティ

プロパティはCSSの種類を伝える部分です。
画像を丸くしたい、文字の大きさを変えたい、色を変えたい、余白をつけたいなど要素に合わせて、必要なプロパティを入力します。プロパティの一覧は「CSS出来ること一覧」に載せていきます。

値

値は”どのように変更する”のかを示す部分です。見出しの文字を”赤色に””１４pxに”、など具体的にどのようにするのかを表します。色やサイズ（単位）、「px」「%」「em」「rem」をつかって表示します。

CSS出来ること一覧

では、よく使うプロパティと例を紹介していきます。

CSSを使用する４つのメリット

CSSを使うことでいろんなことが出来るということを理解していただけましたか。
CSSを使うメリットを４つ紹介していきます。

作業の大幅な効率化

HTMLファイルでは１つ１つ修正、変更しなければいけない箇所も、CSSではまとめて、
見出しの色やサイズ、ページごとの背景の変化などを一括で行うことが出来ます。

効果的なSEO（サーチエンジン最適化）対策

HTMLとCSSでファイルを作ることで、HTMLのソースコードが軽量化します。軽量化することでファイルの、読み込み速度も向上するため評価されやすくなり、上位検索向上につながります。

各メディアに対応

パソコンのディスプレイ以外の、メディア機器（スマホ、タブレット、テレビ）などに対応したWEBページを設定することが出来ます。

CSSの学習方法

CSSを使用することで、効率よいWEBページの作成、SEO対策、そしてデザインの幅が広がりますね。ここではCSSの学習方法について紹介します。

本を活用する

必要な情報を簡潔にまとめられている本。
自身の学習度、知識に合わせて自分にあった本を選択することも一つだと思います。

無料の学習サイトを活用する

無料で学べる学習サイトも多くあります。基本的な文法、構造も学ぶことができます。

スクールに通う

費用は一番高いですが、WEBデザイナーを目指す方、期間を定めて本格的に学びたい方にとってはカリキュラムにそったスクールもありますね。同じ勉強をしている方との交流もうまれるかもしれませんね。

まとめ

この記事ではよく使うCSS一覧、基本、メリット、学習方法について紹介していきました。これからプログラミングを始めてみたい方やWeb制作をしてみたい方は、HTMLと一緒にCSSの学習をしてみてくださいね。
　

そんな時、背景画像を透過させることによって馴染ませることができます。

ここでは手間のかかる画像編集ではなく、
CSSの記述のみで、図形や画像・文字を透過させる3つの方法を紹介します！

CSSで透過させる方法は3つ

CSSを用いて背景を透過させる方法は、以下の3つがあります。

• CSSでopacityを使って透過させる
• CSSでbackground-color:rgba();を使って背景を透過させる
• CSSで擬似要素を使って背景を透過させる

それでは、3つの記述方法や注意点、目的に合った使い分けについて説明していきます！

opacityを使ってみよう！

CSSでopacityを用いて透明化する方法を使ってみましょう。opacityの値は0.0〜1.0の範囲で指定することができます。数値が0に近いほど透明に近づきます。

それでは、まずはじめに透過の指定のないコードを見てみましょう。

次に同じ画像に、CSSでopacity0.5を指定して透過させてみましょう。

透過させることができました。しかし、opacityでは子要素も透過させてしまうため、画像の上にあるテキストまで透過してしまいました。このように要素が重なった場合に、opacityは適しません。

opacityのおすすめの使い方

opacityは、画像にマウスをhovarさせた時に、画像を透過させる使い方がおすすめです。

下のCSSのコードは、ボタンにマウスをhover時に、ボタンを50％透過させたものです。ユーザーの動作に合わせて動きのあるサイトは、操作の意図がユーザーに伝わりやすくなります。

シンプルな動きですが、指定した要素を目立たせる事ができ、クリックをしてもらいやすくなります。

background-color:rgba();を使ってみよう！

次に、CSSでbackground-color:rgba();を使用して、背景画像だけを透過する方法を紹介します。

rgbaとは色の表現方法の一つです。r=red、g=geen、b=blue、a=alpha、の頭文字をとっています。最後の、alphaは透明度の設定で、0〜100まで指定することができ、数値が低くなるほど透明度は増します。

rgbaの4つの数値を用いて色と透明度を指定しますが、rgbaはopacityと異なり、子要素の透明度に影響を与えず、個別に透明度の指定が可能です。それではCSSのコードを書いてみましょう。

背景画像だけを透過させることができたので、テキストが読みやすくなりました。
またbackground-color:rgba();では、指定する色を変更することで、色を付けて透過させることも可能です。

rgbaで、yellowの設定をしてみましょう。

CSSでbackground-color:rgbaをyellowの指定をして透過させることができました。

CSSのbackgroundプロパティにはいろいろな種類があります。
「background:linear-gradient;」や「background:radial-gradient;」を指定することで、グラデーションをかけながら、背景画像を透過させることもできます。

擬似要素を使ってみよう！

次に、CSSで擬似要素を使用して、背景画像だけを透過させる方法を紹介します。

擬似要素は、HTMLの記述に影響を与えず、CSSで追加や装飾が行えるので、とても便利なものです。「::after」や「::before」はよく使われている擬似要素なので、使い方に慣れると表現の幅を広げることができます。

擬似要素では、「content:””;」というプロパティを必ず記述しなくてはなりません。beforeにて、中に何も含まれていないものを、要素として扱うために必要なものです。content:””;とdisplay:block;を組み合わせることで、疑似要素をブロック要素として配置しています。

それではCSSのコードを書いてみましょう。この記述によって背景画像に対して、透明度50％の白色を全面に被せています。

まず、CSSで親要素のcontentにposition:relativeとz-index:1を記述します。

続いて、擬似要素::afterにposition:absoluteとz-index:2を記述して親要素の表面に被せるように配置します。position: relative; は、position: absolute; とセットで使うことが多いです。

親要素に擬似要素を被せただけでは、子要素のh2まで透過してしまうので、h2に対してもposition:relativeとz-index:3を記述します。そうすることによって、h2が最前面に表示されるので、透過しない状態を表現することができます。

transparent

最後に、transparentを紹介します。

CSSのtransparentとは要素を透明にする方法です。transparentを指定すると要素の色が完全に透明になります。opacityやrgbaのように透明度を指定したり、変えることはできません。基本的にtransparentを指定して透明にする場合は、要素が重なっている時に、部分的に透明にして、その下にある要素を出したり、デザインの一環として使われる場合が多いです。

transparentは、テキストにも使えますが、意図的に透明にする場合は、明確な理由が必要です。意図が見えないまま乱用すると、「隠しテキスト」とみなされて、検索サイト側からペナルティを受ける可能性がありますので注意しましょう。

比較してみよう！

それぞれの特徴を知って、目的に合った使い分けをしましょう。

まとめ

CSSの記述で背景を透過させる方法を3つ（transparentを入れたら4つですね）紹介しました！

3つの中でも

いちばん簡単な方法は「opacity」
いちばん使い勝手が良い方法は「background-color:rgba();」

でしょうか？？

「疑似要素」も基本を理解するとデザインの幅を広げることができます。

それぞれ異なる性質がありますので、目的に合った使い分けが難しいこともあるかと思いますが、透過を加えることによって、ボタンやテキストを目立たせることができ、オシャレで、より華やかなWEBサイトを作成することができますので、ぜひ使ってみてください！

そんなパンくずリストですが、自分でWebページを作った時に実装するのは難しそう、と感じる方もいらっしゃるのではないでしょうか。

実は、特別なプラグインを使わなくても、HTMLとCSSを活用すれば設置できます。
また、背景を着色したり、図形で囲ったり、バリエーションを豊かにすることで、個性をアピールすることも可能です。

今回は、HTMLとCSSの基礎的な知識さえあれば、簡単に利用できるデザイン例をご紹介します。
加えて、「そもそも、パンくずリストはなぜ設置したほうがいいのか？」「設置するにあたって、気を付けたほうがいいことは？」といった疑問も、併せて解決していきます。

実例つき！　パンくずリストデザイン例

シンプルなデザイン例と、見た目を工夫したデザイン例をご紹介します。作りたいWebページのコンセプトやイメージに合わせて、デザインを選んでください。

シンプルなデザイン

• 「>」を使ったデザイン
• 「≫」を使ったデザイン
• 「」を使ったデザイン
• 「／」を使ったデザイン
• 「ー」を使ったデザイン
• 「・」を使ったデザイン

「>」を使ったデザイン

先ほどの「>」と同じく、シンプルで親しみやすいデザインです。

「」を使ったデザイン

親しみやすくありながら、ちょっとひとひねり加えたい時にピッタリなデザインです。

「／」を使ったデザイン

シンプルかつ見やすいデザイン。階層ごとの区分けが伝わりやすいですね。

「ー」を使ったデザイン

ちょっと珍しいながらもシンプルなデザイン。スタイリッシュさを出したいときに便利です。

こちらも珍しさとシンプルさが両立しているデザインです。

見た目が楽しいデザイン

続いて、「せっかくなら見た目をひとひねりしたい！」という方におすすめのデザインをご紹介します。

• ボタンみたいなデザイン
• 先頭をアイコン付きにしたデザイン
• フローチャートのようなデザイン
• 背景に色をつけたデザイン

ボタンみたいなデザイン

曲線を使うことで、やわらかいイメージのあるデザイン。クリックして他のページにも遷移してもらいたいことをさりげなくアピールできます。

フローチャートのようなデザイン

流れが分かりやすく、着色もしやすいデザインです。Webページにテーマカラーがあって統一感を出したい場合や、スタイリッシュさを押し出したい時に有効です。

平行四辺形のようなデザイン

四角形を用いつつも、流れのあるデザイン。

背景に色をつけたデザイン

ページ内の配色に合わせて、パンくずリストに背景色をつけることもできます。上手く利用すれば、ページ全体のアクセントとして活かせそうです。

パンくずリストを設置するメリットは？

そもそも、「パンくずリスト」はどうして必要なのでしょうか？
設置するメリットは2つあります。

ユーザーが他のページに遷移しやすくなる

Webページを閲覧しているユーザーが、Webページ内を自由に行き来しやすくなります。ユーザーが記事を読み終え、「同じカテゴリの中にある、他の記事を読みたい」「このWebページには、他にどんなカテゴリがあるのだろう」と思ったとき、パンくずリストを辿って、他のページも訪れやすくなります。つまり、自分が作成した他のページを、さらに閲覧してもらえるチャンスにつながるのです。

加えて、パンくずリストによって、カテゴリの構造を明確化できます。
Webページ全体の構造が整っていると、ユーザーにとって「わかりやすい」「利用しやすい」サイトだと感じてもらいやすくなります。

SEO対策になる

パンくずリストでWebページ全体の構造を明確に把握できて嬉しいのは、ユーザーだけではありません。検索エンジンの情報収集ロボットである「クローラー」からしても、パンくずリストはWebページの構造を把握するのに大切な要素の一つです。

クローラーにサイトの構造や内部リンクといった情報を正しく把握してもらえば、「しっかりと構成できているサイト」と認識され、評価が上がります。そうすれば、検索結果で上位に表示される可能性が高くなり、より多くの人の目に止まりやすいWebページになることも夢ではありません。

ちなみに、パンくずリストは、Webページのどこに設置しても、SEOの観点では特に影響はありません。
ただ、多くのサイトにおいて、パンくずリストはページ上部に設置してあります。ユーザーからすると、ページ上部に設置されている方が、使いやすいと感じる人が多いでしょう。

設置する際は、Webページ全体のデザインと、ユーザーの使いやすさの両方を考慮しましょう。構造がわかりやすいと、ユーザーにも検索エンジンにも良い評価をもらえるため、Webページを多くの人に見てもらえるようブラッシュアップできます。

パンくずリストを設置する際の注意点

さっそく自分のWebページにパンくずリストを設置しよう！　と意気込む前に、以下の注意点を気にしてみましょう。

注意点

• サイト構造をシンプルに設計する
• リストのテキストにキーワードを盛り込む
• 目立たせすぎない
• スマートフォンでの表示にも配慮する

サイト構造をシンプルに設計する

パンくずリストを設置する前に、Webページの構造を階層ごとにわかりやすく並べましょう。カテゴリがわかりにくい場合や、分類の基準が不明瞭だと、ユーザーもクローラーもサイト構造を理解しにくくなってしまいます。
特に、ページ数が多いWebページの場合は、分類基準を明確にして構造設計をしましょう。

リストのテキストにキーワードを盛り込む

パンくずリストのテキストにキーワードを盛り込むと、クローラーにサイト構造を把握してもらいやすくなります。しかし、Webページの内容とパンくずリストのテキストの関連性が薄いと、「関係ないテキストを見出しに使用している」と判断されてしまい、評価が下がる危険性があります。Webページの内容を把握したうえで、パンくずリストのテキストを設定しましょう。

目立たせすぎない

パンくずリストは、あくまで補助的な要素です。あまり目立たせすぎると、かえってメインの内容がユーザーに注目されにくくなってしまいます。また、ページごとにパンくずリストのデザインが違うと、統一感がなくなり、悪目立ちしてしまいます。
Webページ全体の雰囲気に合わせて、目立ちすぎないようなデザインや配色を心がけましょう。

小さな画面での表示にも配慮する

近年、ユーザーはパソコンだけでなくスマートフォンやタブレット端末でWebページを閲覧することも多くなっています。スマートフォンやタブレット端末は、パソコンよりも画面が小さいため、カテゴリ数や記事のタイトルの長さによっては、パンくずリストが画面を占有してしまう場合があります。これでは、せっかくのメインコンテンツが目に入りにくくなり、本末転倒ですよね。

パンくずリストが長くなってしまう際には、レスポンシブ対応として、「横スクロールに設定して、1行に収まるようにする」「余白を確保しつつフォントサイズを調整する」など、小さな画面で見たときにも邪魔にならないように工夫しましょう。

サイト全体の構造や、PC以外のデバイスで見たときの見栄えにも十分注意しつつ、HTMLやCSSを駆使して、Webページ全体に統一感を出すようなデザインや配色になるよう心がけてみてください。きっと、デザイン面でも機能面でも、ワンランク上の仕上がりになるはずです。

まとめ

HTMLとCSSを使えば、簡単にパンくずリストを設置することができます。ページ上部のささやかな要素ですが、工夫すればユーザーにとって利用しやすいWebページだと思ってもらえるうえに、検索エンジンからも良い評価をもらいやすくなります。
Webページ全体のイメージや構造、ユーザー目線での使いやすさを考慮しつつ、パンくずリストを設置してみましょう。

参考サイト
パンくずリストのCSSデザイン9選（コピペOK）

パンくずリストとは？作り方とCSSデザインサンプル12選

コピペでできる！CSSとhtmlだけのシンプルなパンくずリストデザイン5選

【Webサイトの基本】パンくずリストについて知ろう

パンくずリストとは？メリット、種類、設置方法などを解説

CSSを使用したグラデーションは、Photoshop等で画像を作る手間もなく、拡大しても画像が荒れず見栄えが良く、PCだけでなくスマートフォンやタブレットで表示した時も美しい表示が可能です。

この記事では、HTMLとCSSだけで簡単にグラデーションを生成する方法を初心者にもわかりやすく解説していきます。

では、早速やってみましょう！

CSSでグラデーションを記述する基本的なコード

CSSグラデーションは、線形・円形・扇形から選択して、方向や角度、開始位置を指定することができ、多数の色が組み合わせられるため、鮮やかな美しい色のグラデーションを生成できます。

さらに、透過させて画像と合成したり、グラデーション同士を重ね合わせたりすることで、より複雑な表現をすることも可能です。

CSSで背景にグラデーションをかけるには、プロパティの関数を使用します。

CSSでグラデーションを記述する基本的なコードは以下の３種類です。

1. 線形グラデーション　background:linear-gradient()
2. 円形グラデーション　background:radial-gradient()
3. 扇形グラデーション　background:conic-gradient()

は、CSS3から登場した関数で、現在（2023年）主要なブラウザでは、線形グラデーションと円形グラデーションがほぼ全てのブラウザで対応しています。

扇形グラデーションは、使用してる実例もあまり見つけられず、使われる機会が少なそうなので、線型と円形のグラデーションのふたつに絞って、詳しく見ていくことにします。

linear-gradient：線形グラデーション

はじめに、一定の方向に徐々に変化していく最も基本的なグラデーションを作ってみましょう！

2色のグラデーション

「開始の色」と「終了の色」」の2色を指定するだけでグラデーションを表現できます。

※背景色をライトイエローに指定して、その上にグラデーションを乗せています。

色を２つ指定するだけで、線形のグラデーションを作ることができます。
上から下へ直線的にグラデーションします。

線形グラデーション　向きの設定

では次に、グラデーションの向きを変更してみましょう！！
向きを変えたいときは、色の前に方向の値を指定します

グラデーションの向きは、方向（to right，to top等）か角度（deg）で指示します。
角度は、時計回りで表します。マイナス（－）の表記もできます。

線形グラデーション 方向と角度の値

複数の色を使った線形グラデーション

右に向かって、aquamarine～royalblue～hotpink～cornsilkへと４色直線的にグラデーションしていきます。

色は、何色でも増やせますが、あまり増やすと色彩が濁って美しくなくなってしまうので、抑えめにしたほうが良さそうです。最近の流行りは３〜４色といったところでしょうか？
２色でグラデーションさせるより、格段に美しくなります。

線形グラデーションを透過させる

次に、徐々に透過していくグラデーションをつくってみましょう！

色の指定にを使うと一定方向へ透明になっていくグラデーションを簡単に表現できます。

で色と透明度を指定してあげると、もっと複雑で細かい透過グラデーションを作ることもできます。

このような透過グラデーションを画像の上に重ねたり、テキストの背景に使用することで、よりニュアンスを豊かにしたり、文字を見やすく読みやすくしたりすることが可能になります。

参考：線形グラデーション　リファレンス
https://developer.mozilla.org/ja/docs/Web/CSS/gradient/linear-gradient

radial-gradient：円形グラデーション

次に、円形グラデーションを作っていきましょう！放射グラデーションとも呼ばれます。

中心から一番離れた端に向かって円形に色が移り変わっていくグラデーションです。

線形グラデーションと同様に、2色を指定するだけで円形のグラデーションを描くことができます。

細かい設定をするには、色の前に＜円の形・大きさ・中心の位置＞を指定します。

円の形状、大きさ、中心の設定

円の形状は楕円形と正円のふたつがあります。デフォルトは楕円です。
正円にしたいときは、最初の値にcircleと記述します。
circle・・・正円
ellipse・・・楕円（※初期値）

大きさの指定

グラデーションの終了位置を指定できます。

• closest-side・・・一番近い辺でグラデーションが終了
• farthest-side・・・一番遠い辺でグラデーションが終了
• closest-corner・・・最も近い角でグラデーションが終了
• farthest-corner・・・最も遠い角でグラデーションが終了（※初期値）

円形グラデーションの中心の設定

中心の指定

グラデーションの中心の位置を指定することができます。
指定しなかった場合の、既定値は centerです。

例えば、色の前に(at right top)を指定すると、右上の角がグラデーションの中心になります。

(30% 60%)と指定すると、左から30％で上から60％の位置がグラデーションの中心になります。

複数色の円形グラデーションと透過

複数のカラーのグラデーションと透過のグラデーションを見てみましょう！

線形のグラデーションと同じように、色を複数指定するだけです。
これで色々な色の組み合わせのグラデーションを生成できます。

透過させるには、rgbaで1色づつに透明度を指定するか、transparentを指定します。
画像と重ねたり、テキストやロゴを乗せると素敵な効果がありそうですね。

円形グラデーション　リファレンス
https://developer.mozilla.org/ja/docs/Web/CSS/gradient/radial-gradient

以上、線形と円形のグラデーションのCSSコードを解説してきました。
好みのグラデーションを作るためには、コードを書いてブラウザで確認という作業を何度も行ったり来たりする必要があります。結構手間がかかる上リアルタイムで確認ができないため、なかなか難しいと思います。

そこで、もっと感覚的に簡単にCSSグラデーションを生成する方法もご紹介しておきます。

ジェネレーターを使う方法です。

グラデーションのCSSコードを自動生成してくれるジェネレーター

　
1. grabient
   https://www.grabient.com/
2. mesher
   https://csshero.org/mesher/
3. CSS グラデーション ジェネレーター
   https://front-end-tools.com/generategradient/

見た目で確認しながら好みのグラデーションを作れて、CSSコードもコピペで使うことができます。とても便利ですね。

以上、CSSでグラデーションコードを書く方法とジェネレーターについて解説してきました。Webサイトをおしゃれに彩ることができるCSSグラデーションを取り入れるとデザインの幅が広がります。是非、活用してみてください。

「CSSだけで見出しをおしゃれにしたいけれど、どのように作ればよいかわからない」

そのように悩まれている方も多いでしょう。

見出しのデザイン一つでWebサイトやブログの印象は大きく変わります。

そこで、今回はCSSだけで作ることができる、2023年最新版おしゃれな見出しデザイン20選をトレンド解説とともに紹介します。また、コピペで使えるHTML・CSSのサンプルコード、Wordpressとはてなブログでの使い方も紹介しているので、ぜひ参考にしてみてくださいね。

CSSのみで作る見出しデザイン

WEB(HTML)上で、見出しとして使用されるタグはhタグ(h1～h6)です。そのため、サンプルのHTMLではh2を例にして作成してますが、使用したい箇所にclass属性を追加するなどして、見出し以外のデザインにも反映することも可能です。

おしゃれな見出しデザイン

• シンプル系
• ポップ系
• かわいい系
• スタイリッシュ系
• 手書き系

シンプル系

無駄なものを省き、必要最小限のものだけでシンプルに表現をする「ミニマリズム」を意識したデザインもトレンドの一つです。

また、配色トレンドの一つにモノクロ調もあり、白と黒で表現することで、カラフルなWebサイトが多い中で、強い印象も与えられそうです。

さらに、使い勝手もよく、シンプルで洗練された雰囲気もあっておしゃれですね。

両端にライン

h2 {
position: relative;
display: inline-block;
padding: 0 55px;
}
h2:before, h2:after {
content: ”;
position: absolute;
top: 50%;
display: inline-block;
width: 45px;
height: 1px;
background-color: black;
}
h2:before {
left:0;
}
h2:after {
right: 0;
}

上下にライン

h2 {
position: relative;
text-align: center;
border-top: solid 1px;
border-bottom: solid 1px;
}

上下に四角のライン

h2 {
position: relative;
text-align: center;
background-color: #fff;
}
h2:before {
content: ”;
height: 150px;
width: 150px;
border: solid 1px #000;
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
z-index: -1;
}
h2-wrap {
padding-bottom: 20px;
}

背景に文字と下にライン

h2 {
position: relative;
padding-top: 45px;
border-bottom: 1px solid rgba(5,62,98,1);
}
h2::before {
content: “Contents”;
position: absolute;
top: 0px;
left: 0px;
color: rgba(5,62,98,0.15);
font-size: 55px;
text-transform: uppercase;
z-index: -1;
}

上下のラインと付箋風アイコン

h2{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
border-top: solid 1px black;
border-bottom: solid 1px black;
}
h2::before{
content: “”;
position: absolute;
top: -15px;
left: 20px;
width: 50px;
height: 70px;
background-color: #898787;
z-index: -1;
}

ポップ系

自粛ムードも明け、ちょっとした面白さや楽しさ、陽気な雰囲気をデザインに取り入れることもトレンドとなってます。

また、配色トレンドの中では、グラデーションカラーと鮮やかな蛍光色とがあり、この色合いを取り入れることでより明るいユニークな印象になりそうです。

明るいカラーがアクセントになっていたり、ストライプやボーダーでカジュアルな印象のデザインもポップでかわいいですね。

囲み斜めストライプ

h2 {
position: relative;
border-radius: 5px;
outline: 2px solid #ffe5cc;
outline-offset: 8px;
background: repeating-linear-gradient(-45deg, #ffe5cc 0 3px, #fff 5px 10px);
color: #fff;
text-shadow: -1px -1px 0 #ff7b00, -1px 1px 0 #ff7b00, 1px -1px 0 #ff7b00, 3px 3px 0 #ff7b00;
font-weight: bold;
text-align: center;
}

背景にグラデーション

h2 {
background: linear-gradient(to right, rgb(255, 86, 170), rgb(255, 255, 86));
background-repeat: no-repeat;
color: white;
font-weight: bold;
}

背景にグラデーションと囲み線

h2 {
border: 5px solid;
background-image: linear-gradient(89.9deg, rgba(178, 253, 238, 0.96) 10%, rgba(207, 244, 254, 1) 30%, rgba(207, 244, 254, 1) 45%, rgba(255, 230, 255, 1) 60%, rgba(255, 204, 255, 1) 75%, rgba(219, 183, 255, 0.85)86%);
color: #ff007f;
font-weight: bold;
}

背景に色と文字に影

h2 {
font-style: italic;
letter-spacing: .1em;
color: #fff;
background: #4242ff;
text-shadow: -5px 2px 0 #282899;
}

タグ風背景

h2 {
position: relative;
padding: 15px;
color: #a347ff;
font-weight: bold;
}
h2::before,
h2::after {
position: absolute;
width: 100%;
height: 110%;
content: ”;
z-index: -1;
transform: skew(15deg);
}
h2::before {
top: -5px;
left: -10px;
background-color: #ffff60;
}
h2::after {
top: 5px;
left: 5px;
border: 2px solid;
}

かわいい系

1980～1990年代をイメージされるレトロなデザインと今のトレンドを組み合わせた、「レトロモダン」もトレンドのデザインの一つです。

無機質な質感でありながら、どこか温かみのあるノスタルジックなデザインスタイルがかわいいですね。

ステッチ風

h2 {
position: relative;
padding: 1.5rem 2rem;
border: 4px solid #000;
border-color: #c39143;
}
h2:before,
h2:after {
position: absolute;
left: 0;
width: 100%;
content: ”;
border-top: 4px dotted #000;
border-color:#c25742;
}
h2:before {
top: 6px;
}
h2:after {
bottom: 6px;
}

囲み線

h2 {
position: relative;
text-align: center;
border-top: 2px solid #fbca4d;
border-bottom: 2px solid #fbca4d;
color: #b7282e;
}
h2:before,h2:after{
content: ”;
position: absolute;
top: -15px;
width: 2px;
height: calc(100% + 1em);
background-color: #fbca4d;
}
h2:before {
left: 10px;
}
h2:after {
right: 10px;
}

ストライプの下線

h2 {
position: relative;
color: #800000;
font-weight: bold;
}
h2::before {
position: absolute;
height: 0.5rem;
width: 100%;
bottom: 5px;
right: 0;
border: 1px solid #800000;;
background: repeating-linear-gradient(45deg, #f8b862 0 2px, transparent 2px 4px);
content: ”;
}

背景にドット

h2 {
position: relative;
outline: 3px solid #e45e32;
background-image:
radial-gradient(#ffebcd 30%, transparent 30%),
linear-gradient(#fddea5 0 100%);
background-repeat: repeat, no-repeat;
background-size: 20px 20px, 100% 100%;
font-weight: bold;
text-align: center;
}

囲み線の角に丸

h2 {
color: #fff;
position: relative;
text-align: center;
border: solid 2px #000080;
border-radius: 3px 0 3px 0;
background: #800000;
}
h2:before, h2:after {
content: ”;
position: absolute;
width:10px;
height: 10px;
border: solid 2px #000080;
border-radius: 50%;
background: #cc8800;
}
h2:after {
top:-12px;
left:-12px;
}
h2:before {
bottom:-12px;
right:-12px;
}

アート系

図形や幾何学柄、色で表現する抽象画のようなデザインもトレンドになってます。

四角や三角など様々な形を組み合わせたり、カラーで遊んだりするのもおしゃれですね。

四角を組み合わせる

h2 {
position: relative;
text-align: center;
display: inline-block;
}
h2:before {
content: ”;
height: 20px;
width: 40px;
border: solid 1px #ccc;
border-color: #94adda;
display: block;
position: absolute;
left: 0;
top: 0;
margin: auto;
z-index: -1;
}
h2:after {
content: ”;
height: 80px;
width: 80px;
border: solid 1px #ccc;
border-color: #e3adc1;
display: block;
position: absolute;
right: 0;
bottom: 0;
margin: auto;
z-index: -1;
}
h2-wrap {
padding-bottom: 20px;
text-align: center;
}

三角を組み合わせる

h2 {
position: relative;
margin-bottom: 15px;
padding-top: 50px;
padding-left: 40px;
}
h2:before {
content: ”;
width: 0;
height: 0;
border-style: solid;
border-width: 0px 0 110px 80px;
border-color: transparent transparent #ff99ff transparent;
position: absolute;
z-index: -1;
transform: rotate(30deg);
top: -20px;
left: 30px;
}
h2:after {
content: ”;
width: 0;
height: 80px;
border-style: solid;
border-width: 80px 0 30px 50px;
border-color: transparent transparent #14ffff transparent;
position: absolute;
z-index: -1;
transform: rotate(40deg);
bottom: 0;
margin: auto;
}

いびつな丸を作る

h2 {
font-weight: bold;
}
h2::first-letter {
padding: 0.7rem;
border-radius: 54% 46% 38% 62%/49% 70% 30% 52%;
background-color: #2d1b11;
background-image: linear-gradient(135deg, #236641 10%, #3cb371 100%);
color: white;
font-size: 36px;
}

手書き系

あえて文字だけで、フォントやカラーで個性を出す、デザイン性の高いレイアウトもトレンドとして注目を集めています。

手書き風な文字もインパクトがあり、おしゃれですね。

中心に影のような英字

h2 {
text-align: center;
position: relative;
}
h2::before {
content:”Contents”;
position: absolute;
top: -50px;
left: 50%;
transform: translateX(-50%) rotate(-12deg);
color: #c0c0c0;
font-size: 80px;
font-family: ‘Dancing Script’, cursive;
font-style: italic;
z-index: -1;
}

エレガントな英字

h2 {
position: relative;
padding-top: 50px;
padding-left: 30px;
}
h2::before {
content: “Contents”;
position: absolute;
transform: rotate(-5deg);
top: -20px;
left: 0;
color: #ef857d;
font-size: 80px;
font-weight: 400;
font-family: ‘Great Vibes’, cursive;
font-style: italic;
}

WordPressとはてなブログでの使い方

ここまで、デザインサンプルやHTML・CSSコードを紹介してきましたが、それをWebサイトやブログ作成でよく使われている、Wordpressとはてなブログではどのように反映していくかの手順を解説していきます。

WordPress

1. CSSコードをコピペ
2. HTMLコードをコピペ

使いたいデザインのCSSコードをコピーして、ワードプレスのCSSファイル(Style.css)に貼り付けます。最初からコードが記載されておりますが、それは消さないように注意してください。

次に、使いたいデザインのHTMLコードをコピーして、記事の中で見出しデザインを挿入したい箇所に貼り付けます。ここでは、HTMLで編集ができるモードに切り替えた後に貼り付けるよう注意しましょう。

はてなブログ

1. CSSコードをコピペ

使いたいデザインのCSSコードをコピーして、はてなブログのデザインCSSに貼り付けます。CSSを書き終えたら変更を保存するをクリックして完了です。

しかし、はてなブログのテーマデザインに依存している見出しデザインがある場合、CSSコードのデザインが反映されない場合がありますので、注意が必要です。

まとめ

以上、CSSだけで作るおしゃれな見出しデザインをサンプルコードとともにご紹介しましたが、いかがでしょうか。

また、Webサイトやブログ作成でよく使われている、Wordpressとはてなブログでの使い方も合わせて解説しました。

そして、よりデザインに興味を持った方は、下記の記事でWEBデザインのトレンドも解説されてますので、ご覧ください。
https://japan-design.jp/design/0014/#index_id1

文字や色味、ラインの太さを少し変えるだけでも、がらりと印象が変わります。お好みでカスタマイズをしながら、素敵な見出しを作ってみてください。

この記事では、ウェブページやホームページをスマートフォンでもうまく表示できるために

• レスポンシブデザインとは？
• レスポンシブデザインのメリット・デメリット
• レスポンシブデザインの作り方

など初心者の方がWebサイト制作の際、これを見ればレスポンシブデザインを完成させられるように作り方を解説していきますので、ぜひご活用ください！

レスポンシブデザインとは？

「レスポンシブデザイン」とは、ユーザーが使用しているデバイスの幅に合わせて表示ができるよう、Webサイトの表示を最適化するデザインのことです。

HTML/CSSファイルをパソコン用とは別に用意するのではなく、CSSに「任意の画面幅より小さかった場合はこのレイアウトを使用する」などと書き込むことで、同じHTMLファイルでもパソコン、スマホの幅に合わせた表示が可能となります。

※スマホだけではなく、タブレットの設定も可能です。

ただのスマホ表示ではない？スマホ表示とレスポンシブデザインの違い！

スマホ表示に対応する主な方法には「CSSによるレスポンシブなデザインでの対応」のほかに「スマホ専用ページの作成」というやり方もあります。

これはパソコン用とは別にスマホ用のHTML/CSSファイルを作成する方法です。
よって、ページURLもパソコン用とスマホ用で2つとなります。

簡単に言えば、レスポンシブ対応は「ユーザーが使用するデバイスの幅に合わせて、表示を切り替えること」に対して、スマホ表示では「スマートフォンできれいに見えるようにすること」が目的となります。

なぜレスポンシブなデザインが必要？メリット・デメリットを紹介

ではなぜ、レスポンシブ化する必要があるのでしょうか？

Googleは「モバイルファーストインデックス」を打ち出しており、Webサイトの評価軸をパソコンからスマホに変更しました。それにともないGoogleはレスポンシブデザインを推奨しています。

そのため、レスポンシブ対応していないWebサイトに関しては、SEOの観点から検索上位に上がらないリスクがあるのです。

また、パソコン用とスマホ用でページURLが別となる場合、コンテンツが重複していると判断されてしまい、SEO上不利に働く可能性もあるため対策が必要です。

ではレスポンシブデザインによるメリット・デメリットを紹介します。

レスポンシブデザインのメリット

• Google検索で優位になる可能性がある
• 1つのHTMLファイルなので、1回の更新でパソコン用もスマホ用も更新可能
• 2つのファイルを作成するより時間とコストの削減になる

レスポンシブデザインのデメリット

• CSSが複雑となる
• スマホ表示も意識したデザインが必要となり、デザインの自由度が下がる可能性がある
• スマートフォンでのページ表示が遅くなることがある

レスポンシブデザインの作り方

ここまでは、レスポンシブデザインについて説明してきました。
では実際にレスポンシブ対応に必要な基礎となる、3つの手順を説明します。

1. viewportの設定
2. メディアクエリの設定
3. cssの値の変更

では、それぞれ解説していきます。

1.viewportの設定

まずはHTMLファイルのheadタグ内に、下記を追記します。

これは、表示領域に関する記述を意味しており、以下の内容を表しています。

• コンテンツの幅はデバイスの画面幅に合わせる
• 表示倍率の初期設定はそのまま表示(1.0倍)

まずはこれをそのままコピペしていただければ問題ありません。

2.メディアクエリの設定

次に、画面幅に合わせた表示にするためにCSSを設定します。
そこで使うのがメディアクエリです。
メディアクエリとは画面サイズによって適用されるCSSの指示内容を、切り替える設定のことです。

CSSファイルには下記のように記載します。

@media(max-width: 480px) {
　/*　ここにスマホ用のCSSを記述　*/
}
（※閉じタグを忘れないように注意）

これは画面幅が480pxより小さい場合、このCSSを適用するという条件の指定となります。
480という数字は任意の数字に変更可能なため、タブレットの画面幅にも設定可能です。

レスポンシブデザインにおけるブレイクポイント

ブレイクポイントとはレスポンシブデザインの表示を切り替えるポイントのことを言います。

毎年最新のデバイスが発売されるためおすすめの値は存在しないのですが、一例としてデバイスごとの画面幅を紹介します。

実際に最適化したいデバイスやトレンドに合わせて、ブレイクポイントを変更することが必要です。

3.値の変更

ここまで用意ができたら、あとは実際にレスポンシブ時の要素の値を記述します。

ポイントとして横幅などの値は%で示すことをおすすめします。
pxで値を指定してしまうと、画面サイズが変わった際に見づらくなる可能性があるためです。

レスポンシブデザインでよく使うCSS

ここで実際にレスポンシブデザインでよく使うCSSについても紹介します。
値の変更はどのようなものに必要なのか参考にしてみてください。

画像サイズの変更

画像はスマホ表示の場合、小さすぎて見えなくなることがあります。
この場合は、画像の横幅をスマホの横幅いっぱいまで表示させると見やすくなるため、以下のように画像の横幅を100%にする内容を記述します。

（例）
@media(max-width: 480px) {
　img {
　width: 100% ;
　}
}

コンテンツを非表示にする

パソコンではうまく表示されても、スマホだとうまく表示されないコンテンツや、スマホ表示に不要なものは、非表示にすることが可能です。
例えばスマホの場合、画像を非表示にしたい場合「display : none」と記述します。

（例）
@media(max-width: 480px) {
　img {
　display : none ;
　}
}

レスポンシブの確認方法

レスポンシブの確認にはGoogle Chromeのデベロッパーツールがおすすめです。

Chromeデベロッパーツールの起動にはいくつかやり方があります。

• ウェブを開いた状態で「F12」キーを押す
• 右クリックをして「検証」をクリック
• 「Ctrl」＋「Shift」＋「I」キーを同時に押す

そうすると画面の右側に検証ツールが表示されます。

そこで以下の手順を行うと、デバイスごとのスマホ表示を確認することが可能です。

スマホ用のCSSが実際にうまく反映されているか、このデベロッパーツールで随時確認を行いながら作業するようにしましょう。

まとめ

ここまでいかがでしたか？今回は初心者の方でもわかるレスポンシブデザインについて説明しました。
みなさんも、これでまずは「レスポンシブデザインとはなにか」「レスポンシブデザインの書き方」について理解ができたと思います。

今回ご紹介した内容はスマホ対応のごく一部となります。
Webデザインは奥が深く、まだまだ実現可能なことはたくさんあります。
この記事をきっかけに、レスポンシブ対応やWebデザインが楽しいものだと、より感じてもらえるきっかけになれば幸いです。

現在のWebサイトがレスポンシブ対応でない場合、早めにサイトリニューアルを考えたほうが良いかもしれません。

この記事は、

• レスポンシブって何？
• レスポンシブにはどんなメリットがある？
• レスポンシブデザインはどのように作ればいい？

など、webサイト制作・サイトリニューアルの際に必要となるレスポンシブデザインについて解説していきます。

レスポンシブデザインとは

レスポンシブデザインとは、ユーザーの端末画面サイズに合わせてwebサイトが自動で最適化するデザインのことです。

レスポンシブを実装すれば、1つのhtmlだけで自動的に画面が切り替わるので、パソコン用・タブレット用・スマホ用と複数のwebサイトを作成する必要がなくなります。

Viewportとは

PCやスマホ、タブレットなど端末ごとに表示領域を変化させる為のHTMLのmeta要素のことです。

レスポンシブデザインにするメリット

①ユーザビリティの向上

近年、パソコンだけでなく、スマホやタブレットなど多様なデバイスからユーザーがインターネットを利用しています。
レスポンシブデザインは、ユーザーが快適にコンテンツを利用する為の必須条件と言えるでしょう。

②検索順位の向上

現在GoogleはWebサイトを評価するにあたり、パソコンではなくモバイルの表示を基準にしています。これは「モバイルファーストインデックス（Mobile First Index. MFI）」と呼ばれ、Googleが明確に定義している判断基準です。パソコンのみでしか表示されないコンテンツはGoogleに評価されず、検索しても表示されずらくなってしまいます。

SEOの観点からも、レスポンシブの実装は非常に重要です。

レスポンシブデザインにするデメリット

①デザインに制限がある

レスポンシブを導入すると、デザインに制限が起こってしまうことがあります。すべてのデバイスで1つのHTMLを使用するため、PCやスマホ、タブレットなどでレイアウトを大幅に変えることが出来ないからです。また、特定のデザインやフォントが使用できない場合もある為、デザインが制限されてしまう点はデメリットとなるかもしれません。

②スマホの表示速度が遅くなることがある

レスポンシブデザインは、1つのHTMLを各デバイスで読み込みます。その為、スマートフォンやタブレットで閲覧する際も、PC向けのHTMLやCSSの情報を読み込んでしまうので表示完了に時間がかかってしまうのです。

表示までどれくらい時間がかかるかは、下記サイトで測定が可能です。

https://digitalidentity.co.jp/blog/creative/responsive-web-design.html

レスポンシブの実装方法

早速レスポンシブの設定を行っていきましょう。ここでは超基本の3STEPをご紹介していきます。

step1 ブレイクポイントの設定

「ブレイクポイント」とは、各デバイスに応じて表示内容を切り替える為の画面サイズの基準のことです。CSSにブレイクポイントを記述すれば、ブレイクポイントを基準に自動で画面が切り替わります。デバイスごとにおけるブレイクポイントの目安は、下記の表のとおりです。

step2 Viewpointタグの記述

Viewportを設定するには、はじめにHTMLファイルのheadタグ内にmeta要素を記述します。そのあと、meta要素のname属性の属性値のところにmeta viewportを記述します。

さらに、content属性の属性値にwidth=device-width, initial-scale=1.0の記述が入ります。

上記がgoogle推奨の、基本的なmeta Viewportの記述方法です。

step3 CSSの設定

設定したブレイクポイントをCSSスタイルシートに記述します。ここでは、

• スマートフォン：480px以下
• タブレット：768px以上1,024px以下
• PC：1,024px以上

としました。

CSSファイルに「メディアクエリ（media query）」でPC・スマホ・タブレット用のスタイルシートを記述します。

以上で基本的な設定は完了です。

レスポンシブデザインの確認方法

設定が完了したら、きちんとデバイスごとに反映されているか確認を行いましょう。確認方法は下記の通りです。

1. ブラウザの検証ツールを使って、各デバイスごとの見え方を確認する
3. googleが提供しているモバイルフレンドリーフレンドリーテストを使用する

Googleが提供している「モバイルフレンドリーテスト」は、WebサイトのURLを記載するだけで、モバイル端末に対応しているかどうかを確認できるサイトです。viewportの設定やフォントサイズ、レスポンシブデザインが正しく実装されているかなどが、手軽に確認ができるのでおすすめです。

リンク
https://search.google.com/test/mobile-friendly?hl=JA

まとめ

以上、レスポンシブデザインの説明から基本設定方法についてご紹介しました。

以下まとめです。

• レスポンシブデザインはこれからの時代必須の条件
• viewportとは、デバイスごとに表示領域を変化させる為のHTMLのmeta要素
• レスポンシブデザインを実装するには、CSSファイルにメディアクエリを記述する
• レスポンシブデザインはHTMLとcssが連携することで初めて動作する

参考リンク

今回は基本の3stepのご紹介となりましたが、より詳しく学びたい方は、下記のリンクもチェックしてみて下さいね。

https://web.dev/responsive-web-design-basics/#viewport
https://developer.mozilla.org/en-US/docs/Web/CSS/Viewport_concepts

今回は、WhatTheFontアプリの使い方についてご紹介します。

スマホでフォント検索できるアプリ「WhatTheFont」とは？

MyFonts
https://www.myfonts.com/pages/whatthefont-mobile

WhatTheFontは、画像に使われているフォントの名前を検索できるアプリです。web版とアプリ版があり、どちらも無料で使用できます。アプリ版にはAIが使われているため、web版と比べると検索の精度が高くなっています。

海外のフォント販売サイト「MyFonts」の中から、同じフォントや似ているフォントを検索することができます。また、検索の結果からフォントを購入することができるため、自分のデザインに取り入れたいフォントが見つかった場合にも役立ちます。

MyFontsに登録されているフォントのみ調べることができる点と、海外のフォント検索サービスのため、欧文フォントのみ対応している点には注意が必要です。

WhatTheFontアプリを使ってみよう！

それでは、WhatTheFontを使ってみましょう。

次の手順でフォントを調べることができます。

1. アプリをインストールする
2. テキストを撮影する
3. フォントを調べたいテキストを選ぶ
4. 検索結果を確認する

アプリをインストールする

こちらのURLから、アプリをインストールします。

iOS(App Store)
https://apps.apple.com/jp/app/whatthefont/id304304134
Android(Google Play)
https://play.google.com/store/apps/details?id=com.monotype.whatthefont

テキストを撮影する

アプリを起動すると、カメラへのアクセス許可を求められます。アクセスを許可すると、スマホのカメラ機能が起動します。画面の中央下にある丸いボタンをタップして、調べたいテキストを撮影してください。

また、スマホに保存した画像を使ってフォントを検索することもできます。画面の左下にあるアイコンをタップして、画像を選択してください。

撮影した写真や画像は、MyFontsのサーバーにアップロードされてテキストの認識を行います。そのため、ネット回線につながっていないと検索ができません。アプリを使用する際は、ネットに接続している状態で使いましょう。

フォントを調べたいテキストを選ぶ

テキストが認識されると、認識できた文字に枠組みがついた状態になります。
調べたいテキストの部分をタップすると、画面の中央下に青い丸の矢印ボタンが表示されます。

検索結果を確認する

矢印ボタンをタップすると、似ているフォントの候補が一覧で表示されます。画像のテキストと見比べながら、見た目の近いフォントを確認してください。

また、画面の上側に表示されているペンのアイコンをタップすると、表示されるテキストの文字を編集することができます。自動認識された文字が間違っていた場合、テキストを訂正することで認識の精度が上がります。

フォント名をタップすると、作成団体名などフォントの詳細を確認することができます。「購入する」ボタンをタップすると、MyFontsの詳細ページに移動するため、そのままフォントを購入することもできます。「シェアする」ボタンをタップすると、SNSでフォントの詳細情報をシェアすることができます。

テキストが認識できない時は？ 使い方のコツ

テキストがうまく認識できない場合や、検索結果で似ているフォントが見つからない場合には、テキストを認識しやすいように画像を撮影したり、撮影した画像を調整することで、検索の精度を上げることができます。

WhatTheFontアプリでテキストを認識しやすい画像の特徴は、次のようなものになります。

• 1種類のフォントだけ写っている
• テキストが一定の大きさ
• 文字が小さすぎない(最小100ピクセル)
• 文字の間隔が離れている
• テキストはなるべく水平になっている
• 画像のサイズが2MB以下

こちらはWhatTheFontのヘルプページに記載されています。
https://www.myfonts.com/pages/faq#faqs

テキストが小さいために認識できない場合は、文字のサイズが大きく写るように、新しくテキストの撮影を行うとよいでしょう。テキストが傾いていたり、画像に複数のフォントが写っている場合は、WhatTheFontアプリで画像を調整することができます。

画像の傾きを調整する

画面の左下にあるアイコンをクリックすると、傾きの編集画面になります。白の縦線を右にスライドすると右回りに動き、左にスライドすると左回りに動きます。スライドで傾きの調整をしている間はガイド線が表示されるので、認識したいテキストが水平になるように動かしてください。

また、画像の白い枠をスライドすると、画像のトリミングを行うことができます。画像に写っているフォントが1種類になるように、認識したいテキストを残してサイズを調整してください。

傾きの調整と画像のトリミングができたら、画面の中央下にある青い丸の矢印ボタンをタップしてください。

テキストの枠を調整する

テキストの枠をタップすると、枠のサイズを調整することができます。枠の角に表示されている白い丸をスライドして、テキストに合うようにサイズや位置を調整してください。

枠の下に表示されるゴミ箱のアイコンをタップすると、枠を削除することができます。いらない枠は削除しておきましょう。また、枠を追加したい場合は、画面右下のアイコンをタップすることで新しい枠を作ることができます。調べたいテキストに合わせて、枠の調整をしてください。

枠の調整ができたら、画面の中央下にある青い丸の矢印ボタンをタップして、もう一度検索結果を確認してみましょう。

日本語のフォントを検索できるアプリ「Adobe Capture CC」

日本語のフォントを調べたい場合には、WhatTheFontを使うことができません。そんな時は、日本語のフォント検索もできるアプリ「Adobe Capture CC」を使ってみましょう。Adobe CCのアカウント登録をすれば、無料で使用できます。

Abobe Capture CCを使うと、Adobe Fontに登録されているフォントから似ているフォントを検索できます。WhatTheFontと同じように、スマホのカメラで撮影した写真や、スマホに保存している画像からフォントを調べることができます。日本語フォントの名前を調べたい際には、利用してみてください。

Abobe Capture CCはこちらからダウンロードできます。
iOS(App Store)
https://apps.apple.com/jp/app/adobe-capture/id1040200189

Android(Google Play)
https://play.google.com/store/apps/details?id=com.adobe.creativeapps.gather&hl=ja&gl=US

まとめ

WhatTheFontアプリを使うことで、スマホで手軽にフォントを調べることができます。完全に一致するフォント名が表示されないことも多いため、検索の精度は完璧ではありません。しかし、イメージに近いフォントを調べる際には役立つでしょう。また、フォント検索にAIを使用しているため、これから検索の精度が上がっていくことが期待できます。

WhatTheFontを使って、気になるフォントをデザインに取り入れてみてはいかがでしょうか。