画像とWebフォントを最適化してWebサイトを高速化

現在のWebサイトはRetina対応で高解像度の写真を使用したり、Webフォントを利用してリッチなサイトに見せるなど表現方法が豊かになりました。しかしその反面、ページ容量は大きくなりやすく、しっかり最適化を行わないと、ページの表示速度は大幅に低下してしまいます。

 

スマートフォンの普及によりモバイルサイトの需要が高まっている中で、表示速度の遅延はユーザーにストレスを与えるだけでなく、サイトから離脱される大きな要因となります。Webデザイナーは見た目だけでなく、UXデザイン(ユーザー体験)も考慮しなければなりません。

 

今回はサイト高速化のメリットと表示速度の改善ポイントについて紹介します。

高速化のメリット

サイトの表示速度は離脱率に大きく影響します。一般的には、ページが表示されるのに3秒以上かかると40%のユーザーが去ってしまうと言われています。デザインをどれだけ凝っても表示されるまでに3秒以上かかってしまったら、半数のユーザーはそのデザインを見ることなく去ってしまいます。

 

この数値だけでも高速化の重要性は伝わるかと思いますが、その他にも以下のような多くのメリットがあります。

 

・ 競合サイトよりも速ければ、利用されやすくなる。イメージの向上にも繋がる。
・ 高速であるほど再訪問率は高まる。(一度遅いと感じたら再訪問率は下がる)
・ Google検索結果での順位が上がる。(高速なサイトは遅いサイトよりも上位に表示される)

高速化のメリットはサイト単体を見ていては気付きにくいですが、競合サイトと比較した時に顕著になります。パフォーマンス対策は、デザインを検討する際に不可欠な要素であると言えます。

表示速度の計測方法

サイトの表示速度を計測する方法は「PageSpeed Insights」「WebPageTest」「Lighthouse」などがありますが、今回はLighthouseを使用した計測方法(Macの場合)について紹介します。

【Lighthouseとは】
Googleが無料で提供しているWebサイト診断ツールです。「パフォーマンス」「アクセシビリティ」「SEO」といった様々な指標でサイトを分析し、診断結果を100点満点で表示してくれます。以前はChromeの拡張機能として提供されていましたが、現在はデベロッパーツールに搭載されています。

【Lighthouseでの計測】
1. Chromeのシークレットウィンドウで計測したいサイトを開く。(インストールしている拡張機能が診断結果に影響する可能性があるため、シークレットウィンドウを使用します)

2. 「⌘ + option + i」でデベロッパーツールを開いて「Lighthouse」タブを開く。

3. 「Generate report」ボタンをクリックすると診断が始まり、ページを開くのにかかった時間が表示されます。

表示速度の診断結果は「Performance」と「Metrics」の6つの項目に分けて表示されます。「First Contentful Paint(最初の要素が描画されるまでの時間)」や「Speed Index(ページの内容が描画される速度)」などありますが、ページの表示速度を測る指標としては「Largest Contentful Paint(ページのメインコンテンツが表示されるまでの時間)」に注目しておけば良いでしょう。

ここからはLCP(Largest Contentful Paint)を3秒以内にするための、Webデザインの最適化ポイントについて紹介します。

1. 画像の最適化

ほとんどのサイトにおいて、ページ容量が大きくなる一番の原因は画像です。画像を最適化することが表示速度を改善するための基本対策となります。まずは画像の基本的な扱い方を押さえましょう。

1-1. 画像を減らす

そもそも使用する画像の枚数を減らすことができれば、サーバーへのリクエスト回数も減り、ページ容量は軽くなります。画像を作成する際は、CSSで再現できないか?一枚画像として書き出せないか?など、使用する枚数を減らすことを考慮してみましょう。

1-2. 画像形式の選択

画像のファイル形式はJPG、PNG、SVGなどの種類があります。画像を作成する際はラスター画像かベクター画像か、必要な色数、透明処理の有無などを考慮して、適切な画像形式を選択しましょう。

各ファイル形式の説明については、下記の記事もご参照ください。
JPG、GIF、PNG、SVG、WebPのメリット・デメリット

1-3. ファイルサイズの最適化

クライアントから提供される画像は、未圧縮で原寸サイズのままのことがあります。サイトで表示する最大幅と高さを確認した上で、必要十分なピクセルサイズに縮小しましょう。

また、Web用に画像を書き出した後は、画像圧縮ツールを使用してファイルサイズを圧縮しましょう。画質を劣化させることなくファイルサイズを大幅に縮小することができます。

下記のサービスは無料で使用することができるのでオススメです。
TinyPng(JPG、PNGの圧縮が可能)

1-4. 画像のレスポンシブ対応

デスクトップ用の画像をただ小さく表示するだけでは、モバイルサイトに最適化したとは言えません。HTMLで画像を読み込む時は、pictureタグのsrcset属性を使用して、不必要に大きな画像を読み込まないようにしましょう。(IEにはpicturefill.jsを読み込むことで使用可能になります)


  
  
  株式会社DOL

2. Webフォントの最適化

Webフォントを使用すると、すべてのデバイスでフォントの見た目を統一できるので、デザイン性を重視するサイトでは非常に有効です。しかし、Webフォントはサイトのリクエスト数やページ容量を増加させる要因になります。Google FontsやAdobe Fontsなど、魅力的な日本語Webフォントも増えてきましたが、使用する際は見た目と表示速度のバランスに注意しましょう。

2-1. 日本語Webフォントは1つに絞る

日本語Webフォントはひらがな・カタカナ・漢字と扱うデータが多いため、容量が大きくなってしまいます。複数読み込むとパフォーマンスが大幅に低下してしまうので、見出しと本文で別の日本語Webフォントを使用したい場合は、見出しのみに使用するなどして、1つに収めるようにしましょう。

必要最低限の文字だけを抜き出して、容量を小さくする「サブセット化」などの方法もあります。

2-2. 使用するウェイトだけを読み込む

Google Fontsを使用する際は、すべてのウェイトを読み込むのはやめましょう。ウェイトの数が多いとリクエスト数が増加して、パフォーマンスが大幅に低下します。

Google Fontsの読み込み方法は「link」と「@import」の2種類ありますが、どちらの方法でも記述コードから使用するウェイトを修正することができます。コピペして使用する際は、不要なウェイトまで読み込んでいないか確認しましょう。

【すべてのウェイトを読み込み】

【RegularとBoldのみ】

2-3. 複数フォントは連結して読み込む

Google Fontsから日本語と英語の2種類を読み込む場合、別々にコードをコピペすると2つ記述することになってしまいリクエスト回数が増えてしまいます。連結させることで一度のリクエストで読み込むことが可能になります。

【分けて記述】


【連結して記述】

2-4. Google FontsはHTMLで読み込む

Google Fontsの読み込み方法は「HTMLからのlink」と「CSSからの@import」の2種類あります。CSSから@importをする方がHTMLに触れずに修正ができて便利ですが、CSSを読み込んでいる間はレンダリングブロックが発生してしまい、パフォーマンスが低下してしまいます。

HTMLからのlinkでは、rel属性にpreloadを指定することでレンダリングブロックを発生させずに非同期で読み込むことができます。(as属性で読み込むリソースの種類を指定しています)

【非同期で読み込む】

おわりに

今回はWebサイトの表示速度を改善するポイントについて紹介しました。

Webサイトのパフォーマンスについては、デザイナーが携わる分野ではないと思っている方も多かったのではないでしょうか?しかし実際は、デザイナーが日々の業務で使用している画像やフォントが、パフォーマンスに大きな影響を与えていました。

デザインといえば表面的な部分にとらわれがちですが、サイトを快適に閲覧できるパフォーマンスも重要なUXデザイン(ユーザー体験)です。Webデザイナーとしては見た目とパフォーマンスの両立を図ったデザインを心掛けていきましょう。


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

参考文献:
『パフォーマンス向上のためのデザイン設計』Lara Callender Hogan・著

 

最初にインストールしておきたい!WordPressプラグイン紹介

 

多くのサイトで使用されているWordPressですが、ブログ機能としての人気だけでなく、プラグインの豊富さから様々な機能を簡単に実装できるのも魅力のひとつですね。

 

その豊富さゆえに、どれをインストールして使えばいいか迷う人も多いのではないでしょうか。

 

そこで今回は、これからWordPressを始める初心者の方向けに、インストールしておくと便利なおすすめWordPressプラグインを紹介していきます。

1. はじめに

1-1. プラグインを導入する上での注意事項

プラグインは便利だからといって、何でもインストールすればいいというわけではありません。追加しすぎることでサイトが重くなったり、プラグイン同士が競合して不具合を起こしたりする可能性が高まってしまいます。

そうならないよう、下記4点を踏まえて導入を検討していきましょう。

 

① 不要なプラグインを入れない

② 最終更新やインストール数、評価をチェックする

③ 使用中のWordPressバージョンや使用しているテーマとの相性を確認する

④ プラグインは古いバージョンのまま使用しない(アップデートを忘れない)

1-2. プラグインのインストール方法

(1)ダッシュボードのメニューからプラグインを選択

 

(2)タイトル横の新規追加ボタンを押下

 

(3)追加したいプラグインを探す

 

(4)プラグインをインストールする

 

(5)プラグインを有効化する

 

 

2. おすすめプラグイン

2-1. BackWPup

ブログ記事など、WordPressのサイトを丸ごとバックアップしてくれるプラグインです。
何らかの不具合、作業ミスなどによりデータが消えてしまった場合、今までに作成したもの全てを初めから作り直すのは大変酷です。静的ページであれば、サーバーにアップしたファイルや画像データをコピーしておけば済みますが、WordPressは動的ページで構成されているため、サーバー上のデータだけでなく、データベース上のデータ(カテゴリ、コメント、管理画面の設定情報など)の両方についてバックアップを取る必要があります。

 

2-2. All in One SEO pack

SEOの設定を簡単に行ってくれるプラグインです。タイトルやメタディスクリプション、Googleアナリティクス・サーチコンソールとの連携などSEOに関する様々な設定ができます。
とても有用なプラグインですが、ブログ向けや有料テーマではすでにSEO機能を内蔵していることも多く、他のSEOプラグインを入れることで競合する場合があります。導入の際はご注意ください。

 

2-3. WP Multibyte Patch

もともと英語圏で作られたWordPressは、日本語などの英語以外での使用は不具合を起こしやすい傾向があります。このWP Multibyte patchは、日本語独自の不具合・バクを修正してくれます。日本語でサイト制作する場合はインストール&有効化しておくのがおすすめです。

 

2-4. Contact Form 7

Contact Form 7は便利で有名なお問い合わせフォームプラグインです。自分でお問い合わせ機能を実装しようとすると難しい作業が必要となってきますが、こちらのプラグインを使用することで直感的にフォームを作成・設定することができます。

 

3. おわりに

今回はWordPress初心者の方向けのおすすめプラグインを紹介しました。

不要なプラグインをアンインストールしたり、使ってみてベストな組み合わせを探っていくのもいいですね。

 

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

VS Code おすすめプラグイン紹介

 

エディタで人気の高いVisual Studio Code(以下、VS Code)。
プラグインを利用するとコーディングをより効率良く、快適に行うことができます。

今回は私も利用しているVS Codeのおすすめプラグインを紹介します。

1. プラグインのインストール方法

まず、VS Codeを開きます。
左のサイドバーに下記画像のような四角が4つ組み合わさったアイコンを押します。

 

次に、インストールしたいプラグインの名前を検索から探します。
各プラグインごとに下記画像のような画面がでるので、インストールボタンを押せば完了です。
インストール完了すると、「アンインストール」の表示に変わります。

2. おすすめプラグイン

2-1. Japanese Language Pack for VS Code

メニューやサイドバーなどの表記を日本語にしてくれます。
英語のままでも使えますが、日本語の方が使いやすいという方は多いと思いますので、一番に入れた方がいいプラグインです。

2-2. Auto Close Tag

開始タグを書くと、自動で終了タグを書いてくれるプラグインです。
終了タグの書き忘れはエラーの原因となるので、自動で書いてくれるのはとても便利です。
これも必須で入れた方がいいプラグインです。

2-3. Auto Rename Tag

Auto Close Tagと同じくタグのプラグインです。
開始タグを<div>から<p>に変更した際、終了タグも自動で</div>から</p>に書き換えてくれます。

勝手に書き換わるのは嫌という方もいると思いますが、私は自動の方が書き換え忘れがないので使用しています。

2-4. Color Highlight

カラーコードを書いた時に色を付けてくれます。
何色にしたかが一目でわかるので、とてもおすすめです。

2-5. vscode-icons

ファイルの種類ごとにアイコンを表示してくれます。
拡張子.htmlや.cssなどでアイコンがなくともファイルの種類は判断できますが、アイコンで表示されるのでとても見やすくなります。

2-6. indent-rainbow

インデントごとに色を付けてくれます。

3. SCSSのコンパイルをする際に便利なプラグイン

3-1. Live Sass Compiler

SCSSからCSSにコンパイルしてくれます。
このプラグインを使わない場合だとgulpの設定が必要ですが、このプラグインを使うと簡単にコンパイルができます。少し設定が必要なので「Live Sass Compiler 設定方法」等で検索して調べてみてください。

3-2. Live Server

html、cssで修正した内容を自動でブラウザに反映してくれるプラグインです。
htmlを開いて手動で確認する手間が省けるので、とても時短で作業ができます。

Live Sass Compilerとセットで導入したほうがいいプラグインです。

おわりに

今回はおすすめのVS Codeプラグインを紹介しました。
今回紹介したものは、いずれも手放せないプラグインばかりです。
この記事を参考に、少しでもコーディング環境の改善に役立てていただけたら幸いです。

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

新しい画像フォーマット『WebP(ウェッピー)』とは

 

みなさんは”WebP”画像使っていますか?

以前の記事でWebPについて少し紹介しましたが、今回はその特徴や使い方について詳しく紹介してみようと思います。

 

https://dol.co.jp/column/jpg%e3%80%81gif%e3%80%81png%e3%80%81svg%e3%80%81webp%e3%81%ae%e3%83%a1%e3%83%aa%e3%83%83%e3%83%88%e3%83%bb%e3%83%87%e3%83%a1%e3%83%aa%e3%83%83%e3%83%88/

 

1.WebPとは

WebPとは、Googleが開発した新しい画像フォーマットです。拡張子はそのまま”.webp”

WebPはPNGやJPEG画像の画質を保ったままファイルサイズを軽量化することが出来ます。

 

2.WebPのメリット

ファイルの軽量化

まず一つ目はファイルの軽量化です。

ファイルを軽量化することで画像の読み込み時間を短縮し、PNGやJPEGを使った場合と比べWebサイトを高速化することが出来ます。

その圧縮率はPNG画像の場合26%、JPEG画像の場合25~34%も小さくすることが出来ます。

 

画像フォーマットの統一

今までは背景が透過されたものはPNG、写真など色が多い画像はJPEG、アニメーションの場合はGIF、と場面に応じてフォーマットを使い分けてきました。ですがWebPは透過やアニメーションにも対応しているため画像フォーマットを統一することが出来ます。

コーディングの際にフォーマットを気にしないで済むのは非常にありがたいですね。

 

3.WebPのデメリット

そんな便利なWebPにもデメリットはあります。

 

全てのブラウザに対応している訳ではない

WebPは全てのブラウザが対応している訳ではありません。

ですが、今まで対応していなかったsafariが、2020年9月16日にiOS版safari 14.0~で対応され、

2020年11月12日にはMacOS Big Surのリリースにより、主要なブラウザ全てでWebPが表示されるようになりました。

なので、今ではデメリットというほどではありません。

その他ブラウザのWebP対応はこちらをご覧ください。

 

“webp” | Can I use… Support tables for HTML5, CSS3, etc

 

WebPへの変換が面倒

WebPを利用するには元となるPNG、JPEG画像を変換する必要があります。

変換する方法は、Webアプリケーションを利用する、コマンドラインで変換する(黒い画面)、フォトショップを利用するなど方法はありますが、特にコマンドラインから変換する方法は慣れていないと難しいかもしれません。

ここでは一番簡単なWebアプリケーションを使った変換方法をご紹介します。

 

squoosh

squooshは2018年にGoogleが開発した画像変換ツールです。

変換したい画像をドロップし、右側のメニューで変換する際の詳細を設定することが出来ます。

WebPに変換するには、フォーマット形式をWebPと選択するだけです。

 

参照:squoosh

 

おわりに

今回はWebPについて紹介しました。

Webサイトを制作する上で表示速度の向上は常に意識しないといけません。今サイトを作っている方やこれからサイトを作ろうと思っている方はぜひ、新時代のフォーマット形式”WebP”を使用してみてください。

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

ショートハンドを活用!CSS記述をスッキリさせる方法

 

CSSプロパティーが多すぎてファイル行がやたら長く、管理し難くなってしまった、という状況にオススメしたいのがCSSのショートハンド記法です。

 

ショートハンドを使用して行数を減らすことが出来れば、スッキリと見やすさも向上し、修正や管理のしやすいファイルを作成することができます。

 

さらには記述する文字数が減ることでコーディングスピードが上がり、より効率的に作業を進めることができます。

ショートハンドの基本

・ショートハンドとは

ショートハンドとは、CSSにおいて値を簡略化できる記法のこと。

値を半角開けて記入することにより設定する。

paddingなど空間指定の4方向の記入は上から右回りで指定される。

web用語辞典

 

例えば、上下左右方向のマージンを指定したい時、通常だとtop, right, botttom, leftとプロパティーを指定して各値を記述しますが(画像左)、ショートハンドを使用すれば、それぞれのプロパティー記述を省略することができます(画像右)。

 

 

この場合、ショートハンドで記載する値の数によって指定する箇所が決まります。paddingも同様に指定することができます。

値1つ:上下左右全て    例)margin: 20px;

値2つ:上下、左右     例)margin: 20px 20px;

値3つ:上、左右、下    例)margin: 20px 20px 20px;

値4つ:上、右、下、左   例)margin: 20px 20px 20px 20px;

 

・よく使う便利なショートハンド

サイト制作をする上でよく使用される、便利なショートハンドをいくつかご紹介します。

border

ボーダーの幅、スタイル、色の異なるプロパティーを一括指定することができます。
それぞれのプロパティの順序は自由ですが、チームの中で順序を決めておくと管理しやすいです。

background

背景画像や色、ポジション、サイズなどを一括指定することができます。
こちらも各プロパティの記載順序は自由です。

animation

アニメーションでも異なるプロパティーを一括指定することができます。

記載順序として、animation-durationanimation-delayより先に書く必要があります。それ以外は順序に決まりはありません。

 

天地中央配置の新しい書き方

天地中央配置がショートハンドを利用して、さらに短く記述できるようになったのでご紹介します。

・positionのショートハンド

insetというプロパティーを使用して以下のような書き方をすることもできます。

inset は CSS のプロパティで、 top, right, bottom, left に対応する一括指定です。これは margin の一括指定における複数値の場合と同じ構文です。

CSS 論理的プロパティの仕様書で定義されているものですが、論理的なオフセットを定義するものではありません。これは物理的なオフセットであり、要素の書字方向やテキストの向きには関係がありません。

CSS inset

・positionを使用した天地中央配置

上記のinsetを使用すれば、従来では最低3行以上記述しなければならなかった天地中央配置の指定が以下の記述で済んでしまいます。

CSSで上下左右の中央に配置する時の「position: fixed;」での新しい記述方法 | コリス

おわりに

新しくスマートな書き方はどんどん登場しますが、常に情報をキャッチアップするのは大変なことです。また、制作にあたっては各ブラウザが対応している書き方であるかどうかなど考慮しながら取り入れる必要もあります。

上手く情報の波に乗ることでキャッチアップしていきましょう。

 

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

Webデザイナーが覚えておくべき文字の扱い方

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

特に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. 文字組み

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

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

2-1. 文字サイズ

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

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

2-2. 行間

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

2-3. 字間

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

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

letter-spacing: 0 の場合
デザイナーとしては字間の調整も忘れずに行いましょう。
letter-spacing: 0.1em の場合
デザイナーとしては字間の調整も忘れずに行いましょう。

おわりに

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

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

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


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

ホッとひといき。青山・表参道骨董通り周辺 おすすめカフェ7選

 

仕事の合間にほっと一息つけるコーヒーを求めて。

美味しいコーヒーをお供に作業すると捗りませんか?

弊社が位置する骨董通り周辺で、お気に入りのカフェをいくつかピックアップしました。

青山骨董通り周辺でコーヒーを飲みたい!テイクアウトもおすすめ

COBI COFFEE AOYAMA

セレクトショップの一角にあるコーヒー。落ち着いた雰囲気で癒されます。純喫茶を象徴するネルドリップ式。気になる店名の由来は、“真鍮が古めいていく様も美しいと捉える日本人独自の色彩「古美(こび)色」から引用し、COBI COFFEEと名付けられた(ホームページ引用)”そう。

 

コビ コーヒー アオヤマ(COBI Coffee Aoyama)
〒107-0062 東京都港区南青山5-10-5第1九曜ビル101

サイト 食べログ

 

Scrop COFFEE ROASTERS

こちらの青山店では、世界で注目を集める「ゲイシャ」をはじめ、希少性の高いコーヒーに特化。店頭で無料試飲も可能。バリスタがハンドドリップで淹れてくれるコーヒーは格別です。相談しながらその日の気分に合わせて選ぶことができます。

 

スクロップ コーヒー ロースターズ 青山店(Scrop Coffee Roasters)
〒150-0002 東京都渋谷区渋谷4-4-25

サイト 食べログ

 

CBC

挽きたてのドリップコーヒーと素敵なラテアート。
お肉で有名なレストランKINTANをご存知でしょうか。外からは隠れた店舗「KINTAN IN HOUSE」が併設されている少し特異なお店(テイクアウト中心)。KINTANの拘りが詰まったハンバーガーもおすすめ。

 

CBC CoffeeとBeefとバーガーのお店
〒 東京都港区南青山5-11-24 グレイセスビル B1F

食べログ

 

ケーキを食べたい時におすすめ

GRANNY SMITH APPLE PIE & COFFEE 青山店

行列のできるアップルパイの専門店として有名なグラニースミスの青山店も骨董通りにあります。グラニー(おばあちゃん)のかわいらしさと温かみを感じる店内で青山店限定のアップルパイを食してみては。季節ごとに変わるかもしれませんが現在はティラミスアップルパイでした!

 

グラニースミス アップルパイ アンド コーヒー(Granny Smith Apple Pie & Coffee)
〒107-0062 東京都港区南青山5-8-9

サイト 食べログ

 

lohasbeans coffee

自社で焙煎したコロンビア産のスペシャルティコーヒーを提供。スタイリッシュで海外風のおしゃれな店内。開店後すぐ売り切れてしまうという「ナポレオンパイ」をはじめ、見た目も魅力的な”映え”スイーツを一度お試しあれ。

 

ロハスビーンズコーヒー(lohasbeans coffee)
東京都港区南青山5-8-10 萬楽庵ビルⅡ 1F

サイト 食べログ

 

APOC

セットメニューを提供するパンケーキ専門店。クリームをのせたスイーツ系パンケーキだけでなく、ベーコン付き等のお食事系パンケーキが食べたい方にもおすすめ。パンケーキミックスの購入も可能です。

 

アポック(APOC)
〒107-0062 東京都港区南青山5丁目16−3

サイト 食べログ

 

CLINTON ST. BAKING COMPANY & RESTAURANT 東京店

ニューヨークスタイルの朝食、スイーツ、パンケーキを楽しむことのできる、カジュアルなベーカリー。エッグベネディクトやNYチーズケーキなどNY発の味を楽しみたいカフェです。

 

クリントン・ストリート・ベイキング・カンパニー 東京店
〒 東京都港区南青山5-17-1 YHT南青山ビル

サイト 食べログ

 

 

今回は会社の周辺にあるおすすめのカフェをご紹介しました。 近くにお立ち寄りの際は、ぜひ足を運んでみてください。

 

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

CSSアニメーション「@keyframes」の使い方

 

 

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という名前にします。

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

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

2-4. 完成

結果

 

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);
 }
}

3-4. 完成

結果

❤︎

 

おわりに

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

 

 

 

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

 

 

Macユーザー必見!便利なショートカットキーまとめ

 

みなさんはPCで作業する時にショートカットキーは利用していますか?

 

もちろんほとんどの方が利用していると思いますが、全てのショートカットキーを把握している人は多くないでしょう。

今回は私が普段からよく使うショートカットキーや、意外と便利なショートカットキーをピックアップしてまとめてみようと思います。

1.ショートカットキーとは

特定のキーを組み合わせて押すだけで、通常ならマウスやトラックパッドなどの入力デバイスが必要な操作を実行できます。

キーボードショートカットを使うには、1 つまたは複数の修飾キーを押しながら、ショートカットの最後のキーを押します。たとえば、「command + C」(コピー) を使う場合は、「command」キーを押しながら「C」キーを押した後、両方のキーを同時に離します。Mac のメニューやキーボードでは、特定のキーが記号で表記されることがあります。以下の修飾キーは、その一例です。

 

・command (または cmd) ⌘

・option (または alt) ⌥

・caps lock ⇪

・shift ⇧

・control (または ctrl) ⌃

・fn

 

2.よく使うショートカットキー

⌘ + C 選択した項目をクリップボードにコピーします。
⌘ + V クリップボードの内容を現在の書類または App にペーストします。
⌘ + X 選択した項目を切り取り、クリップボードにコピーします。
⌘ + Z 直前のコマンドを取り消します。
⇧ + ⌘ + Z 直前のコマンドを取り消したり、やり直したりすることが可能です。
⌘ + A 項目をすべて選択します。
⌘ + F 書類内の項目を検索します。または、「検索」ウインドウを開きます。
⌘ + P 現在の書類をプリントします。
⌘ + S 現在の書類を保存します。
⌃ + ⌘ + F App をフルスクリーンで使います。
⇧ + ⌘ + 3 画面全体のスクリーンショットを作成します。
⇧ + ⌘ + 4 範囲を選択しスクリーンショットを作成します。
⇧ + ⌘ + 5 スクリーンショットを撮るか、もしくは画面収録を実行するか選択することができます。
⇧ + ⌘ + N Finder で新しいフォルダを作成します。

 

3.意外と便利なショートカットキー

⌘ + W 最前面のウインドウを閉じます。
⌘ + H 最前面のウインドウを非表示にします。
⌘ + M 最前面のウインドウをDockにしまう。
⌥ + ⌘ + H 最前面のウインドウをすべてDockにしまう。
⌘ + tab 開いているアプリのうち、最近使った順番で次にあたるアプリに切り替えます。
⌘ + ↑ ページの先頭にスクロールします。
⌘ + ↓ ページの末尾にスクロールします。
⌘ + ⇧ + -(マイナス) 縮小します。
⌘ + ⇧ + +(プラス) 拡大します。
⌃ + ↓ 最前面のアプリのウインドウをすべて表示します。
⌃ + ← 左の画面に移動します。
⌃ + → 右の画面に移動します。

 

4.ショートカットキーの追加

Macではショートカットキーの変更や追加が可能です。
さらに、自分の好みのアプリをショートカットに登録し呼び出すことも可能です。

 

アプリの登録はAutomatorとシステム環境設定[キーボード]から設定することができます。

まずはFinder > アプリケーションの中からAutomatorを探しましょう。

 

Automatorを開いたらクイックアクションを選択します。

クイックアクションを選択したら

①検索窓でアプリケーションと検索

②アプリケーションを起動を選択

③好きなアプリを選択

ここまで進んだら⌘ + Sで保存してください。ここでは「マップを起動」という名前で保存しました。

 

保存が完了したら「システム環境設定」→「キーボード」→「ショートカット」→「サービス」の順で進みます。

サービス内に先ほど保存したアクションが追加されているので、好きなキーの組み合わせを登録すれば完了です。

おわりに

今回はMacのショートカットキーについてまとめてみました。

最後のアプリ登録は使ってみるとすごく便利なのでぜひ試してみてください。

 

<参考にしたサイト>

Mac のキーボードショートカット

侍エンジニアブログ

らくたのぶろぐ

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