アーカイブ: コラム

デザインの勉強をする時、配色やレイアウトなどビジュアル要素に注力してしまって、文字の勉強が疎かになりがちです。しかし、文字はあらゆるデザインで使われる、もっとも重要な要素です。文字の扱いを知ることは、デザインをする上での基本と言えます。

特にWebサイトにおける文字の割合は高く、使用する書体や文字組みによって印象が大きく変わります。書体が合っていなかったり、文字組みが整っていないと、本来伝えたかった情報もきちんと伝わりません。Webデザイナーは書体の役割や読みやすさを考慮して、デザインする必要があります。

今回はWebデザイナーが覚えておくべき文字の扱い方について紹介します。

1. フォントの選び方

どんなにわかりやすく丁寧な文章を心掛けたとしても、読みづらいフォントを選んでしまうと情報は正しく伝わりません。また、読みやすいフォントだけを使用しても、面白みのないデザインになってしまいます。

適切なフォントを選ぶポイントは「文字の役割」と「フォントの特性」を理解することです。

まず「文字の役割」は、次の2つに大別することができます。

1. 読ませる文字 … 文字情報として伝えたい文字のことです。
2. 魅せる文字 … ビジュアル要素としての文字です。

そして「フォントの特性」とは以下の3つを指します。

1. 可読性 … 単語や文章にした時に読みやすいか。
2. 判読性 … ほかの文字と判別しやすいか。誤読しないか。
3. 誘目性 … 目立ちやすいか。

「読ませる文字」には可読性、判読性の高いフォントを、「魅せる文字」には可読性や判読性よりも誘目性を重視したフォントを選びましょう。このように「文字の役割」に応じたフォントを選ぶことで、伝えたい情報はしっかり伝えつつ、面白みのあるデザインを作ることが可能になります。

しかし、フォントを選ぶポイントを押さえたとしても、世の中にはフォントが無数にあります。次は「文字の役割」に応じたフォントの探し方を紹介します。

1-1. 「読ませる文字」のフォント

「読ませる文字」のフォントを探す上で重視すべきは「判読性」です。情報伝達を目的とするなら、誤読されやすいフォントの使用は控えなければいけません。

判読性の高いフォントを探すコツは、似た組み合わせの文字をチェックすることです。
例えば「0（ゼロ）とO（オー）」や「l（エル）と1（イチ）」、「6と8」や「aとd」などです。

これらの判別がつきにくいとURLやメールアドレス、電話番号などを読み間違える原因となります。英数字には日本語とは別に専用のフォントを用意することが多いので、選ぶ際は事前にチェックしておきましょう。

1-2. 「魅せる文字」のフォント

「魅せる文字」のフォント選びで重要なのは「誘目性」です。情報伝達よりもデザイン性を重視したフォントを選ぶ必要があります。単純に見た目で選ぶこともできますが、個人の感覚だけで選ぶと他の人にはまた違った印象に見えているかもしれません。

意図した印象を読み手に与えるフォントを選ぶコツは、フォントの由来や制作意図を知ることです。フォントには誕生した由来やデザイナーの制作意図が込められており、長く使われてきた歴史があります。歴史を知ることで、どの場面にどのフォントが適しているかを判断できるようになります。

２. 文字組み

「文字組み」とは文字サイズや行間、字間などを調整して文章を読みやすく、美しく見せる作業のことです。どんなにわかりやすく丁寧に書いた文章も、行間や字間が詰まっていると、読み手は苦痛を感じてしまいます。

文字を読みやすくすることは、デザインの基本的なルールです。ここからは読み手が心地良く感じる文字組みのポイントについて紹介します。

2-1. 文字サイズ

Webサイトの文字サイズは、ターゲットの年齢を考慮して設定する必要がありますが、そのためには基準となる値を知っておくことが重要です。現在、一般的とされている文字サイズはGoogleが推奨している16pxです。また、最小サイズは10pxとされています。（Chromeでは可読性を維持するために、10px以下の文字サイズを指定しても、10pxで表示される仕様になっています）

ターゲットの年齢を考慮した文字サイズは、この基準を知ることで初めて検討することができます。

2-2. 行間

日本のWebサイトで多く採用されている行間は1.5倍〜2倍程度と言われています。文章の可読性を低下させる主な原因は詰まった行間であり、基本的には行間を広めに取ることが推奨されています。しかし、行間の設定はサイト全体の雰囲気にも大きく影響を与えます。新聞や雑誌のような、賑やかな雰囲気のサイトにしたい時は、あえて行間を狭くすることもあります。サイトの目的に合わせて、適切な値を設定できるようにしましょう。

2-3. 字間

文字には適切な余白を設けることで、読みやすさが大幅に向上します。余白の中でも、行間に気付ける人はデザイナー以外にも多くいますが、字間に気付ける人はそういません。デザイナーとしては字間の調整も忘れずに行いましょう。

Webサイトの本文は字間を一律で設定することが可能です。CSSのletter-spacingやfont-feature-settingsを活用しましょう。

おわりに

今回はWebデザイナーが覚えておくべき文字の扱い方について紹介しました。

文字組みのスキルを身につけると、写真やイラストのような素材がなくても優れたデザインを生み出すことが可能です。また、多くのデザイン書籍においても文字を扱えることが一流のデザイナーだと言われています。

デザインの勉強をする時はビジュアル要素だけでなく、文字の勉強にも注力して取り組みましょう。

弊社では士業やメディア、医療関係を中心にサイト制作を行っております。Webサイトについてお悩みのある方はお気軽にお問い合わせください。

CSSアニメーションの設定は初めての人にとっては難しいですよね。
今回は@keyframesをはじめて使う方、CSSだけを使ってアニメーションさせたい方にとても簡単にできるアニメーション作成を紹介します。

1. ＠keyframesとは

指定した時間の中で、どのように変化（アニメーション）をするかを設定できるものです。
CSSファイルに書けるので、手軽に取り入れられます。

2. @keyframesの使い方①

■今回作成するもの

赤いボックスを5秒の中で色を変化させるアニメーションを作成します。

5秒の中で赤→緑→黄色に変化をさせます。
手順は下で説明します。

2-1. htmlファイルにボックスを用意する

<div class="box">
</div>

2-2. CSSファイルにボックスのスタイルを書く

animation-nameはアニメーション名を書きます。
自分の好きな名前を付けます。

animation-durationはアニメーション全体の秒数です。
自分の好きな時間を設定してください。
今回は5秒(5s)にしました。

.box {
 width: 200px;
 height: 50px;
 animation-name: color-animation;
 animation-duration:5s;
}

2-3. CSSファイルにアニメーションの記述を書く

@kryframesの後ろに上記でつけたanimation-nameを書きます。
今回はcolor-animationという名前にします。

０％が最初の色(赤)→50%が次の色(緑)→100%が最後の色(黄色)です。

@keyframes color-animation {
 0% {
 background-color : red;
 }
 50% {
 background-color : green;
 }
 100% {
 background-color : yellow;
 }
}

結果

3. @keyframesの使い方②

さきほどと同じ要領で別のアニメーションも作成していきます。

■今回作成するもの

5秒の中で赤丸を360度回転させます。

3-1. htmlファイルに赤丸を用意する

回転の際に回転をわかりやすくするために中にハートを入れました。

<div class="circle">
 <div class="heart">❤︎</div>
</div>

3-2. CSSファイルに赤丸のスタイルを書く

.circle {
　position: relative;
　width: 100px;
　height: 100px;
　border-radius: 50%;
　background-color: red;
　animation-name: circle-animation;
　animation-duration:5s;
}
/* ハートのスタイル */
.heart {
　position: absolute;
　font-size: 25px;
　color: white;
　top: 30px;
　left: 39px;
}

3-3. CSSファイルにアニメーションの記述を書く

@keyframes circle-animation {
　0% {
　transform: rotate(0);
　}
　100% {
　transform: rotate(360deg);
　}
}

結果

おわりに

簡単な@keyframesの使い方をご紹介しました。
今回は0%、50%、100％で作成しましたが、0％、20％、50％、70％、100％など細かく時間経過を設定することができます。
使い方によっては複雑なアニメーションも作成できるので、今後も色々な使い方を見つけていきたいと思います。

弊社では士業やメディア、医療関係を中心にサイト制作を行っております。webサイトについてお悩みのある方はお気軽にお問い合わせください。

コーディングの効率を上げる方法はいろいろあります。

例えば、SCSSやPugといった簡略記法だったり、プラグインが豊富なエディタ（Visual Studio Code等）を使用するなどです。

しかし、これらの技術やツールを活用しても「CSS設計」が自己流のままでは十分ではありません。CSS設計がきちんとできていないと、クラス名を何度も修正する手戻りが発生したり、追加依頼に既存のクラスを流用できず、似たようなスタイルを一からコーディングする羽目になったりします。

今回はコーディングの効率化をする上で、もっとも重要な「CSS設計」について紹介いたします。

1. CSS設計とは

「CSS設計」とは、CSSを管理しやすく保つための手法のことです。

CSSでWebサイトを作ること自体は、自己流の書き方でも十分可能です。LPや小規模のサイトなら、まだ全体像を把握することができます。しかし、ページ数が増えてくるとCSSはどんどん複雑になり、全体を管理することは難しくなってきます。

きちんと管理されずに書かれたCSSは、サイト公開後の運用において「ページを追加したけどスタイルがきちんと当たらない」「見出しのデザインを修正したらレイアウトが崩れた」など、さまざまな問題を引き起こします。

こうした問題を回避するために考えられたのが「CSS設計」です。GoogleのエンジニアであるPhilip Waltson氏は「よいCSS設計」を以下のように提唱しています。

1. 予測できる
2. 再利用できる
3. 保守できる
4. 拡張できる

有名な手法としてはOOCSSやBEM、SMACSS、FLOCSSといったものがあります。ここからは私自身が使用して、実際に恩恵を受けているBEMとFLOCSSについて紹介します。

2. BEMについて

BEMとは「Block」「Element」「Modifier」の略で、要素を3つに分解して命名する手法です。BEMはクラスセレクターの使用が基本となっており、要素型セレクター（h1, p..）やIDセレクター（#header, #nav..）は推奨されていません。

Block
– どこでも使い回すことができる、大きなパーツ。
Element
– Blockを構成する要素で、Blockの外では独立して使用できない。
Modifier
– BlockやElementの状態や特徴を表す。必ずBlockやElementと一緒に使う。

2-1. BEMの記述法

「Block__Element—Modifier」のように記述します。
・ 「Block」と「Element」はアンダースコア2つ（ __ ）で区切ります。
・ 「Element」と「Modifier」はハイフン2つ（ — ）で区切ります。

記述サンプル例：

2-2. BEMのメリット

・ Block名から、どのパーツのクラスなのか判断できる。
（例：header / header-logo / header-navi）

・ Element名から、どのBlockに関連しているクラスなのか判断できる。
（例：header-navi__list / header-navi__item）

・ クラス名から影響範囲が予測できるので、想定外なレイアウト崩れがおきにくい。

・ 要素タグ（nav / ul 等）を基本的に使用しないので、スタイルがHTML構造に依存していない。
そのため、あとからHTMLを変更することができる。

3. FLOCSSについて

FLOCSSとは「Foundation Layout Object CSS」の略で、CSSファイルを「3つのレイヤー」と「3つの子レイヤー」に分けて管理する手法です。提唱したのは日本人の谷拓樹氏で、公式ドキュメントが日本語のため、わかりやすくて助かります。

Foundation
– サイト全体のデフォルトスタイルを定義します。（reset.scss / base.scss 等 ）
Layout
– ページを構成する大きなレイアウトを定義します。（header.scss / main.scss 等）
Object
– サイト内で再利用できるモジュールを定義します。ファイルはいずれかの子レイヤーに配置。
└ Component
– サイト内で再利用できる最小単位のモジュールを定義します。
（c-breadcrumb.scss / c-button.scss 等）
└ Project
– いくつかのComponentと他の要素で構成されるモジュールを定義します。
（p-ranking.scss / p-modal.scss等）
└ Utility
– ComponentやProjectで解決できないスタイル調整を定義します。
（u-clearfix.css や u-spacer.css等）

3-1. FLOCSSの記述法

FLOCSSではクラスの命名規則にBEMを採用しています。さらにクラスが属しているレイヤーによって、接頭辞（プレフィックス）を付与します。

・ Componentなら「 .c- 」
・ Projectなら「 .p- 」
・ Utilityなら「 .u- 」

記述サンプル例：

3-2. FLOCSSのメリット

・ クラスにFLOCSSの接頭辞をつけることで、クラスの役割が予測しやすい。どこでも流用できるComponentなのか、ページ独自のProjectなのか、一目で判断できるので非常に便利です。

・ 定義済みのCSSがレイヤー構造から把握できるので、検索がしやすく再利用も容易です。

・ CSSファイルをレイヤーで細かく分割することで、ページ数の多い大規模サイト制作でもスタイルの管理が容易になります。

おわりに

今回は「CSS設計」の手法からBEMとFLOCSSについて紹介しました。

これらの手法は知っておくと非常に便利なものではありますが、自己流のやり方でもサイト制作は可能です。そのため「今はまだ使わなくていいや」「学習コストがかかりそう」と敬遠しがちです。しかし、WEBデザイナーとして日々の業務を効率良く行う上では、欠かせないスキルです。

今まで意識せずに書いていた方は、一度経験すればその便利さを実感することができます。
ぜひWeb制作に取り入れてみてください。

弊社では士業やメディア、医療関係を中心にサイト制作を行っております。webサイトについてお悩みのある方はお気軽にお問い合わせください。

みなさんは画像を書き出しする際、保存方法はどうしてますか？

今回はJPG、GIF、PNG、SVG、WebPの各ファイル形式の違いをご紹介します。

1.JPGについて

JPGって？

JPEGとは、静止画像のデータ圧縮形式の一つ。フルカラーの画像を多少の劣化を伴いながら高い圧縮率で符号化できるのが特徴で、写真など自然画像の記録に向いている。ファイル名の標準の拡張子は「.jpg」あるいは「.jpeg」。

引用元:IT用語辞典e-Words/JPEGとは

JPGのメリット

フルカラー1677万色で表示できるため、写真の色がきれいにでます。

JPGのデメリット

非可逆圧縮の性質上、圧縮するたびに画質が劣化します。
そのため複数回にわたって編集が必要なものはJPGじゃないほうがよいと言えます。

2.GIFについて

GIFって？

GIFとは、画像データを圧縮して記録するファイル形式の一つ。256色までの画像を無劣化（lossless）で圧縮することができ、図やイラストなどの画像に向いている。ファイル名の標準の拡張子は「.gif」。

引用元:IT用語辞典e-Words/GIFとは

GIFのメリット

色数が限定されている為、軽いです。
色数は256色がmaxなので、アイコンやボタンデザインなど色が少なくてすむパーツの書き出しに適しています。

軽いので簡単なアニメーションも作成可能です。

GIFのデメリット

メリットでもありますが、色数が少ないことがデメリットです。

3.PNGについて

PNGって？

PNGとは、画像データを圧縮して記録するファイル形式の一つ。フルカラーの画像を無劣化（lossless）で圧縮することができ、図やイラストなど向いている。ファイル名の標準の拡張子は「.png」。

引用元:IT用語辞典e-Words/PNGとは

PNGのメリット

・可逆圧縮なので、劣化せずに保存のし直しができます。

・背景の透過ができます。

・ベタ塗りのイラストなどは高画質で軽い画像に保存ができます。

・色数が選べます。
PNG-8：GIFと同じ256色
PNG-24：フルカラー1677万色可能

PNGのデメリット

写真の画質が高くなるので、重くなってしまいます。風景や人物などの色が多い写真はJPGで書き出したほうが無難です。

4.SVGについて

SVGって？

SVGとは、XMLの記法を用いて画像を図形の集合として表現する記述言語の一つ。2次元のベクター形式の画像ファイル形式の一つでもあり、ファイルに保存する場合の標準の拡張子は「.svg」。

引用元:IT用語辞典e-Words/SVGとは

SVGのメリット

上記３つのファイル形式に対し、SVGはベクターデータです。
拡大しても劣化がなく、きれいに表示ができます。

パスで作成したアイコンやロゴなどに適しています。

SVGのデメリット

写真には使用できないため、使用は限定的になります。

5.WebPについて

WebPって？

WebPは、Web上の画像に優れた可逆および非可逆圧縮を提供する最新の画像形式です。WebPを使用すると、WebマスターとWeb開発者は、Webを高速化する、より小さく、よりリッチな画像を作成できます。

WebPロスレス画像は、PNGと比較してサイズが26％小さくなっています。WebPの不可逆画像は、同等のSSIM品質インデックスで同等のJPEG画像よりも25〜34％小さくなり ます。

ファイルに保存する場合の標準の拡張子は「.webp」。

引用元:Google Developers

WebPのメリット

・とても軽く保存ができます。

・背景透過が可能です。

WebPのデメリット

IE以外の主要ブラウザには対応しているものの、画像編集ソフトからは書き出しができません。

書き出しは以下の手順で可能です。
・編集ソフトからJPG、PNGなどで保存する・
・Squooshに保存した画像を入れて、保存形式「webp」を選択する。

おわりに

今回はJPG、GIF、PNG、SVG、WebPの違いや使い方について紹介致しました。
きれいで出来るだけ軽い保存方法を心がけていきましょう。

弊社では士業やメディア、医療関係の制作実績もありますので、Webサイトについてお悩みがある方は、お気軽にお問い合わせください。

みなさんはフリー素材や写真素材はどこで探していますか？

Web制作において欠かせない、画像やアイコンを探す作業って案外面倒ですよね。

今回はそんな時に便利な著作権表記不要で会員登録不要のフリー素材配布サイトをご紹介します。

アイコン、イラスト素材

ICOOON MONO

「ICOOON MONO」

とにかく種類が豊富です。無難なアイコンを探している際には便利なので、まずICOOON MONOで検索してみると良いでしょう。

データ形式：PNG/JPG/SVG

Icon rainbow

「Icon rainbow」

アイコンの種類が豊富です。ICOOON MONOとはテイストが違いますので、制作しているサイトの雰囲気に合わせて使い分けると便利です。

データ形式：PNG/JPG/SVG

iconmonstr

「iconmonstr」

データ形式が豊富で、どんな場合でも使用することができます。メリハリのついたアイコンが魅力です。

データ形式：PNG/SVG/EPS/PSD

EXPERIENCE JAPAN PICTOGRAMS

「EXPERIENCE JAPAN PICTOGRAMS」

日本の文化に特化したアイコンが多くあります。観光サイトなどを作成する際にはぜひ利用してみてください。

データ形式：PNG/SVG

icon-pit

「icon-pit」

シンプルで細い線が特徴です。細い線のアイコンを探す機会って意外と多いんですよね。そんな時に利用してみてください。

データ形式：PNG/AI

シルエットイラスト

「シルエットイラスト」

とにかく色んな種類のアイコンがあります。上記で紹介しているサイトにも無いようなニッチなアイコンもあったりするので、「探しているアイコンが無い！」という時にはシルエットイラストで検索してみると良いかもしれません。

データ形式：PNG/AI

フリー素材 ブログ

「フリー素材 ブログ」

アイコンだけではなくイラストも扱っています。種類も多く、同じアイコンでもパターン違いを多く配布していたりするので非常に便利です。

データ形式：PNG/JPG/SVG/EPS

icon-icons

「icon-icons」

カラーアイコンが豊富です。そのデザインは非常に細かく、色使いも丁寧で種類も豊富なのでアイコンを大きく見せたい時には非常に便利です。

データ形式：PNG/SVG/ICO/ICNS

イラスト配布サイトまとめ

Linustock

「Linustock」

細い線画が魅力的なイラスト配布サイトです。シンプルかつ繊細なデザインなのでこのイラストを使うだけでサイトがグッとオシャレに見えますね。

データ形式：PNG/EPS

ManyPixels

「ManyPixels」

イラスト配布サイトには珍しく、SVG形式でデータを配布しています。また、サイト内で好みの色に変更することもできるのでデザインに合わせて色味を自由に変更することが可能です。

データ形式：PNG/SVG

素材Good

「素材Good」

可愛い素材が多く配布されています。また、ラベル素材やフレームなども配布しているのでLP制作の際には非常に役立ちます。

データ形式：PNG/JPG/GIF/EPS

イラストの里

「イラストの里」

イラストの種類が多く、ニッチなイラストも多いのでPOP作りやチラシ広告を作成する際に便利です。

データ形式：PNG

いらすとや

「いらすとや」

フリー素材といえばいらすとや。と言っても良いほど有名なサイトです。こちらもPOPやチラシ広告を作成する際に便利です。

データ形式：PNG

おわりに

今回は私がWeb制作の際によく利用するフリー素材配布サイトを、私のオススメ順に紹介しました。他にもよく利用するフリー写真サイトやコーディングの際に便利なジェネレータもあるので、それはまた別の機会にまとめたいと思います。

今回ご紹介したサイトを是非みなさんのWeb制作にお役立てください。

弊社では士業やメディア、医療関係の制作実績もありますので、Webサイトについてお悩みがある方は、お気軽にお問い合わせください。