css 絶対位置 relative absolute 違い 相対配置 positionプロパティとは/Webレイアウトの作り方/読み方

HTMLで記述(マークアップ)した要素をスタイルシート(CSS)でレイアウトしていく際、まず躓くのがpositionプロパティによる要素配置ではないでしょうか。

positionプロパティによる配置方法は大きく分けて2つのレイアウト違いがあり、
absolute(絶対配置)relative(相対配置)を適切に使い分けます。

読み方↓
絶対配置:absolute⇒アブソリュート
相対配置:relative⇒リラティブもしくはレラティブ

それではそれぞれの配置特性の違いを説明していきます。


目次


absolute(絶対配置)とは

absolute(絶対配置)はroot階層である画面ブラウザウインドウの四辺を基点にした距離を指定します。

  • top(上からの値)
  • right(右からの値)
  • bottom(下からの値)
  • reft(左からの値)

左上からの値を設定することが多いので下記のスタイルのようになります。

	position: absolute;
	top: 125px; left: 125px;

absolute(絶対配置)とは

<div class="parent_01"></div>

.parent_01 {
	position: absolute;
	top: 125px; left: 125px;


relative(相対配置)とは

relative(相対配置)について、
画面やブラウザウインドウの四辺を基点にした距離を指定することはabsolute(絶対配置)と違いはありませんが、兄弟要素など別要素が一緒に構成された状態で違いがでます。
relative(相対配置)とは

<div class="parent_01"></div>

.parent_01 {
	position: relative;
	top: 125px; left: 125px;

複数の要素の状態では影響を受け、相対配置ならではの表示がされます。
relative(相対配置)とは

<div class="parent_01"></div>
<div class="parent_02"></div>

.parent_01 {
	position: relative;
	top: 0px; left: 0px;
	width: 125px;
	height: 125px;
	background: #33b7ba;
	}

.parent_02 {
	position: relative;
	top: 125px; left: 125px;
	width: 125px;
	height: 125px;
	background: #33b7ba;
	}

図のように「要素A」と「要素B」は、同じ親要素内にある縦に並んだ兄弟要素であるため、「要素A」の直下である元々表示されるはずだった位置を基点として移動します。
それでは、absolute(絶対配置)の複数要素の状況を見てみましょう。


absolute(絶対配置)複数要素

absolute(絶対配置)複数要素

<div class="parent_01"></div>
<div class="parent_02"></div>
<div class="parent_01"></div>

.parent_01 {
	position: relative;
	top: 0px; left: 0px;
	width: 125px;
	height: 125px;
	background: #33b7ba;
	}

.parent_02 {
	position: absolute;
	top: 125px; left: 125px;
	width: 125px;
	height: 125px;
	background: #33b7ba;
	}

absolute(絶対配置)の複数要素の状況では、同じ親要素内にある縦に並んだ兄弟子要素であっても、
absolute(絶対配置)のスタイル指定を「要素B」に設定することで、「親要素」を基点とした絶対配置になります。
つまり、
「要素B」の直下に兄弟要素「要素C」がある場合、「要素B」は、absolute(絶対配置)により兄弟要素の影響を受けない座標を持つので、
「要素C」は上に詰まり「要素A」の直下に移動します。

それでは、この3つの要素の状態をrelative(相対配置)に変更するとどう変化するのでしょうか。


relative(相対配置)複数要素

relative(相対配置)複数要素

<div class="parent_01"></div>
<div class="parent_02"></div>
<div class="parent_01"></div>

.parent_01 {
	position: relative;
	top: 0px; left: 0px;
	width: 125px;
	height: 125px;
	background: #33b7ba;
	}

.parent_02 {
	position: relative;
	top: 125px; left: 125px;
	width: 125px;
	height: 125px;
	background: #33b7ba;
	}

「要素B」をabsolute(絶対配置)からrelative(相対配置)に変更すると、3つの要素の兄弟関係が発生します。

「要素B」は移動しますが、
相対配置のため、元々表示されるはずであった位置情報はそのままとなるので空白領域が確保されます。

したがって「要素C」は、「要素B」が元々表示されていた空白領域の下に表示されます。

それでは次に、実用度の高い「親要素」にrelative(相対配置)を指定するレイアウトを説明します。


親要素にrelative(相対配置)を指定

親要素にrelative(相対配置)を指定することは、複数要素で構成される実際のページに必要不可欠です。

まず、表示崩れの例として、親要素にabsolute(絶対配置)を指定してみます。
親要素にabsolute(絶対配置)を指定してしまうと、同じスタイルを参照する連続した兄弟要素すべてが重なってしまいます。

親要素にrelative(相対配置)を指定01

  <div class="parent_01">
    <div class="child_01"></div>
  </div>

  <div class="parent_01">
    <div class="child_01"></div>
  </div>

  <div class="parent_01">
    <div class="child_01"></div>
  </div>

.parent_01 {
	position: absolute;
	top: 37.5px; left: 37.5px;
	width: 300px;
	height: 125px;
	margin: 0 0 32.5px 0;
	background: #33b7ba;
	}

.child_01 {
	position: absolute;
	top: 25px; left: 25px;
	width: 75px;
	height: 75px;
	background: #f9bf1e;
	}

HTMLにスタイルを適応させるクラス設定については、相対配置を活用して適切に共通スタイルを適応させていきます。

したがって、先ほどの表示崩れ例の親要素にrelative(相対配置)を指定すれば、重なりが解消され正しく表示されます。

親要素にrelative(相対配置)を指定02

  <div class="parent_01">
    <div class="child_01"></div>
  </div>

  <div class="parent_01">
    <div class="child_01"></div>
  </div>

  <div class="parent_01">
    <div class="child_01"></div>
  </div>

.parent_01 {
	position: relative;
	top: 37.5px; left: 37.5px;
	width: 300px;
	height: 125px;
	margin: 0 0 32.5px 0;
	background: #33b7ba;
	}

.child_01 {
	position: absolute;
	top: 25px; left: 25px;
	width: 75px;
	height: 75px;
	background: #f9bf1e;
	}


さいごに

要素単体表示では問題がでなくても、複数要素が組み込まれるページに組み込むと問題生じ、解決に時間を要します。

しかしながら、原因はいつも初歩的なので、基礎のおさらいを自身も心がけています。

次回も情報設計に関係した話題をお届け致します。
デジマースのネモトでした。

バナーとフォントサイズの最小値|バナーデザインのコツ

こんにちは!
今回のテーマは「バナーとフォントサイズの最小値|バナーデザインのコツ」です。
バナーのフォントサイズについて、最小値や読みやすいサイズ感、構成のコツなどをご紹介したいと思います。

PCやスマホ向けにバナーを作る際、フォントサイズはバナーの構成の中で最も重要なポイントの1つです。
完成したバナーをいざ実機で見たら文字が小さすぎて読めない…とならないために、気を付けたいポイントをまとめてみました。


バナーのフォントサイズの最小値

バナーをデザインする上で適切なフォントサイズの最小値は、目的別に2種類あります。
読みやすさを確保したい場合の最小値は20px、最低限書いてさえあれば良い場合の最小値は10pxを目安にしてください。

ただし、バナーのフォントサイズの最小値が10pxだからと言って、どんな文字でもそこまで小さくして良い訳ではありません。
「最低限書いてさえあれば良い場合」については後述のカテゴリで説明したいと思います。

まずは実際の視認性を確認してみてください。
上から20px、18px、16px、14px、12px、10px、8pxサイズのテキストを画像内に並べています。

10pxまでなら、PCでもスマホでも一応は読めるかと思います。ただし読みやすいとは言えず、人によってはこのサイズでも読みづらいと感じます。
1番下の行は8pxですが、ここまで小さくしてしまうと文字が潰れて読むのが困難になります。


フォントサイズの最小値と最低限書いてさえあれば良い文字の関係

最低限書いてさえあれば良い文字とは、注釈やコピーライトのことです。
「バナーで訴求したいこととは直接関係ないが、ルールとして記載しなければならない文字」且つ、「バナー自体のサイズが小さくスペースに限りがある」場合のやむを得ずの対処方法になります。


バナーの表示サイズとフォントサイズ

注意したいポイントの1つとして、バナーの表示サイズとフォントサイズの関係があります。

バナーの表示サイズが90%~100%の場合(PCやスマホの画面の横幅、または原寸サイズに対して)は、10px以上のフォントサイズであれば視認性が保てます。
上記に対し、バナーの表示サイズが半分以下の場合はその分フォントサイズも小さく見えます。

実際の視認性はこんな感じです。

バナーの表示サイズが100%の時は読めた18px、16pxのフォントサイズが、50%にしたところ潰れて読めなくなってしまいました。今回の例で言うと、20pxの文字だけが視認性を維持できています。

こうならないためにも、読みやすさを確保したい場合はフォントサイズは20pxを確保してバナーを作ると良いです。


おわりに

いかがでしたでしょうか?
バナー制作に慣れていないと、フォントサイズをどこまで小さくしていいか分からず困ることもあるかと思います。

総合的に見て間違いないフォントサイズは20pxですが、状況によってはもっと小さく表示することも可能です。
バナーが何処にどんな風に表示されるのか確認して、フォントの種類と実機確認に注意してバナーをデザインしてみてください!

それではまた!デジマースのコンでした。


バナーの文字組についてもっと知りたい方はこちら!

優先順位の表現方法 CSSによる見出しデザイン Webサンプル2021/hタグ

目次


見出しデザイン(見出しバー)とは

「見出しバー」は名称が示すように、バー(棒状)の形状をした、主に「h2タグ」を表現するWebページのパーツで、
古くからケータイサイトページの各コーナーを仕切る「コーナー名」を表示してきました。

過去、ケータイサイトで使用されてきた際は、

・HTMLで塗りつぶされた面に文字を乗せる
・画像でリッチ表現してサービス世界観を演出

など、過剰表現が必要な対象でした。
※一部では「メニューバー」と呼ばれることもありました

過去と現在の表現の違い

そんな「見出しデザイン(見出しバー)」は現在では過剰表現する必要がなくなりました。

優先順位の表現方法 見出しデザインのサンプル

携帯電話(ガラケー)時代は端末ディスプレイの解像度が,

 横240px
 高さ320px

程度しかなく、
画数の多い漢字を表現すると、1行は全角10文字程度になってしまい、一画面の文字表示は字間/行間ともに密する必要がありました。

※携帯電話(ガラケー)は、1画面分をスクロールさせるには、画面中の要素分「↓ボタン」を押すアクションが必要

携帯電話(ガラケー)の画面

下の図のように、現在のスマートフォン向けサービスで見られる見出しバーの表現(下線だけなど)では、コーナーの区切りが分かりづらくなります。

優先順位の表現方法 見出しデザインのサンプル

理由は、低解像度による表現力の弱さとディスプレイの大きさ自体が2.2インチ程度と、現在の普及スマートフォン画面サイズと比べて半分以下しかないためです。

優先順位の表現方法 見出しデザインのサンプル

それでは、サンプルページ情報をスマートフォンに最適化させていくとどう変化するか確認していきましょう。

スマートフォンの画面

文字の大きさはそのままに置き換えてみます。

優先順位の表現方法 見出しデザインのサンプル

端末ディスプレイサイズと解像度が飛躍的に上がっているので、十分な余白もとることができます。

十分な余白追加/文字サイズ最適化

文字サイズも、表示用途/優先度によって小さく表示できるようになったので適応させます。

※ページスクロールは指先一つのワンアクションで可能

優先順位の表現方法 見出しデザインのサンプル

見出しバーの上下に十分な余白が確保できたので、情報量が凝縮したなかでの視認性の確保表現が必要なくなりました。

見出しバーの優先度(表現)を下げる

見出しバーの背面塗りつぶし表現は過剰表現になったので、塗りの面積が狭く主張が弱くなる下線表現に変更します。

優先順位の表現方法 見出しデザインのサンプル

いまどきの表現になってきました。

色の強さを最適化

さらに、
小さい画面では必要だった色の強さとコントラストの高さも過剰表現になるので、中間色に変更してバランスを取ります。

優先順位の表現方法 見出しデザインのサンプル

これまで見てきた強い色の説明イメージから極端に薄くなったので、弱くなった印象を受けますが、十分な余白と画面の大きさもあり見れる画面を維持しています。

さらに、いまどきの表現になってきました。

規則性を崩して自由な空間表現に

最後に、レスポンシブでPC表示などの大画面に表示した際の表現について、余白を活かし、不規則性をレイアウトしてみます。

シンプルな画面構成にゆとりと安心感が付加されました。

優先順位の表現方法 見出しデザインのサンプル

今回、説明上やり過ぎてる表現もありますが、過去の小さい携帯端末と現在の大画面スマートフォンでは、表現の基準線がそもそも違います。


さいごに

今回は「見出しバー」をピックアップ題材として現在使用できるようになった表現の変遷を紹介しました。

注意が必要なのは、

・十分な画面の大きさ
・十分な画面解像度

の恩恵による必然的な変化なので、決して流行表現ではないことです。

適切な余白の確保なくして今回の表現は成り立ちません。

次回も情報設計に関係した話題をお届け致します。
デジマースのネモトでした。

【サブカラーとは?】メインカラー サブカラー アクセントカラーの配色ルールと効果/レイアウト

サックリ読めるWebページのカラーレイアウト配色比率を紹介します。

基本的な配色比率の値

Webページのカラーレイアウトの効果_分布面積(配色比率)のサンプル

「配色比率の基準」があり、

「メインカラーは70%」
「サブカラー(メインカラー/テーマカラー/ブランドカラー)は25%」
「アクセントカラーは5%」

言葉の違いだけですが、

「ベースカラーは70%」
「サブカラー(メインカラー/テーマカラー/ブランドカラー)は25%」
「アクセントカラーは5%」

とも呼ばれ、比率はそのようになっています。

配色に自信が無くてもこの数値を時々意識すれば、テーマカラーがぶれなくなります。

ちなみにこの数値は厳密に守らなければいけない訳ではありませんので、面積の広い順に「ベース」「サブ(メイン)」「アクセント」の順番が入れ替わらなければ問題ありません。

それでは、「Webページ」とはカテゴリが異なりますが、「ファッション」にこの比率を充ててみるとどうなるでしょうか↓

Webページのカラーレイアウトの効果_分布面積(配色比率)のサンプル

ストレートで大雑把などれも奇抜なサンプルではありますが;真ん中と右の二つは左の服装よりも少々覚悟がいるのではないでしょうか。

本題の、Webページの配色比率の説明を始めます。


無彩色のサブカラー(メインカラー)レイアウト

Webページのカラーレイアウトの効果_分布面積(配色比率)のサンプル

無彩色だけですと、優先度の低い雑誌のモノクロ巻末ページようで何とも主張がなく落ち着いた寂しいイメージです。

なかなかWebページとして運用するには現実的ではありません。


有彩色のサブカラー(メインカラー)レイアウト

Webページのカラーレイアウトの効果_分布面積(配色比率)のサンプル

サブカラー(メインカラー)に有彩色のオレンジを充てました。

サブカラーはメインカラー/テーマカラー/ブランドカラーを表すので、活動感がでて、ページ内構成のプライオリティ/優先度も上がりました。

それでも決め手に欠けます。


アクセントカラーを追加した配色レイアウト

Webページのカラーレイアウトの効果_分布面積(配色比率)のサンプル

アクセントカラーのブルーを構成に加えると、「NEW」「新着」「おススメ」など利用者に対してポジティブなピックアップしたい、インフォメーションをさりげなくしたい部分が引き立ちます。

使用する色は原則、サブカラーで使用している色と「補色関係」にある暖色/寒色の色を充てていきます。


アラートカラー/注意喚起文言色を追加

Webページのカラーレイアウトの効果_分布面積(配色比率)のサンプル

ページ下部に書かれている「注意文言」については、今回の話題とは別になりますが、「アラートカラー」である「赤」は、利用者へ潜在的に注意を促す色であるため、配色比率が少ない小さな文字でも非常に目に入ってきます。

Webページでは、主に、注意を促したい場合やエラー画面での文字色として使用することで、利用者に正常遷移からの離脱を伝えられます。


ベースカラーの配色について

Webページのカラーレイアウトの効果_分布面積(配色比率)のサンプル

ベースカラーはページの大部分を占めるため、白以外の色に変更することでページの表情を大きく変えてしまいます。

最近では「ダークモード」を選べるOSと連動もするアプリケーションが増えてます。

ベースカラーの扱いとしては「白」か「黒」、「25%以下の薄い有彩色」になり、サンプル画像のような強い有彩色は「強いメッセージ」を伝えるランディングページ/特設ページでの運用に向いています。


重要)基本の配色比率が崩れるカラーレイアウト

Webページのカラーレイアウトの効果_分布面積(配色比率)のサンプル

「サンプル例」の真ん中は、「サブカラー(メインカラー)」をテキスト本文にも使用しているため、まとまり過ぎてしまっています。

原因は、配色比率が問題無くても、ページ構成として構成要素の多い「本文テキスト」に有彩色を使っているためです。

「サンプル例」の右は、どの項目もプライオリティ/優先度を上げて伝えたいためにアクセントカラーの割り当てを増やしたことが原因です。

アクセントカラーは5%程度におさめて必要最低限の訴求に充てていきましょう。


さいごに

以上のようにカラーレイアウトと配色比率例を紹介してきましたが、「基本だけにとらわれてもいけません」、強く主張したいここぞの部分では大胆に攻めて利用者と対話していきましょう。

※画像の配色比率については「配色 比率 調べる」等で検索すると、測定サイトがいくつか表示されます

次回も情報設計に関係した話題をお届け致します。
デジマースのネモトでした。

animation-delay 効かない場合/CSS 遅延表示/遅れて表示アニメーションの作り方

スタイルシート(CSS)だけで実装できる、オブジェクト表示を遅らせる(表示遅延)『animation:delay』を使ったアニメーションの作り方と、効かない場合の間違いポイントを紹介します。

アニメーションのサンプル

とりあえずサンプルの『カラポン抽選』を回してみましょう→こちら


目次


ブラウザでアニメーションは品質が良い

ブラウザで表示させるWebページのアニメーションは、アニメGIF画像と比較して色数の制約も少なく、部品単位で画像を組み込む場合は、アニメGIFファイルとは違い、ファイル全体の色数制限(256色以内)もないため高品質です。

また三角形や星型、四角形などシンプルな図形であれば、わざわざ部品画像を組み込む必要もなくスタイルで描画したベクトル図形が使用できます。

ベクトル図形については座標データと色番号/グラデーションの設定がスタイルで設定できるので、容量も少なくデバイス解像度にも最適化されて出力された高品質な表示が可能となります。


高フレームレートが可能

アニメーションフレームを増やしていくとヌルヌルとした滑らかな表現に近づいていきますが、アニメGIF画像でその状態を再現すると数百KBの容量が必要になります。

CSSによるアニメーションでは静止画状態の一枚画像部品やベクトル画像を用意すれば、フレーム数による容量の肥大化もなく(50~100KB程度)スクリプトで動きが付けられます。


追加プラグインがいらない

動きの制御についてはJavaScriptは長けておりますが、CSSでもブラウザでの実装対応が進み遜色ない表現が出来るようになってきました。

なにより、JavaScriptは利用者がブラウザでの使用を「オフ」にできるため、ページ表示が機能しない状況が発生します。

CSSはHTMLと同じく標準実装されており、ブラウザ依存の差異はまだまだありますが、機能がオフなる状況はなく問題なく使用できます。


【ソース】HTML

今回のHTMLのマークアップについては、ヘッダーとフッターをテンプレートに含めています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no">
  <link rel="stylesheet" href="style.css">
  <title>リッチアニメーション_HTML</title>
</head>
<body>

<div class="wrapper">

<header class="test_header">
	<img class="pic_test_header" src="img/pic_test_header.png">
</header>

<h1 class="top_h1_txt">当たるキャンペーン!</h1>

<h2 class="top_h2_txt">『赤玉』が出たらアタリ!</h2>


<div class="garapon">

<p class="center4">
	<img class="pic_atari_bg" src="img/atari_bg.png"></img>
</p>

<p class="center3">
	<img class="pic_tama_02" src="img/tama_02.png"></img>
</p>

<p class="center2">
	<img class="pic_test02" src="img/gara_02.png"></img>
</p>

<p class="center1">
	<img class="pic_test01" src="img/gara_01.png"></img>
</p>

<a href="css_anime_test.html" class="btn_01" ontouchstart="">賞品を受けとる</a>

</div>

<div class="footer_space"></div>
<footer class="test_footer">
	<img class="pic_test_footer" src="img/pic_test_footer.png">
</footer>

</div>

</body>
</html>


【ソース】CSS

CSSについて、今回のサンプルはスマートフォン向けにつくっています。

※PCでの表示はスマートフォン風になります

@charset "utf-8";
/* CSS Document */

html {
	font-size:62.5%;/*10pt基準*/
	}

body {
	margin: 0px;/*ページ全体周りの余白がなくなる*/
	font-family: 'Meiryo',"ヒラギノ角ゴ Pro W3","MS Pゴシック","Osaka", sans-serif;
	font-size: 15px; font-size: 1.5rem;
	color:#666666;
	-webkit-tap-highlight-color: rgba(0,0,0,0);/*フォーカスを消す*/
	background: #ffffff;
	/*line-height: 1.2;/*文字行間設定*/
	height: 100%;
	-webkit-touch-callout:none; // リンク長押しのポップアップを無効化
	-webkit-user-select:none; // テキスト長押しの選択ボックスを無効化
	}

.clear { clear:both; }/*レイアウト崩れを防ぐために適切にクリアーしておく。「both」は左右両側の回り込み(float : left ; float : right ;)を解除する*/

.wrapper{
	width: 100%;
	min-height: 100vh;
	margin: 0 auto;
	}

.garapon{
	position: relative;
	width: 375px;
	height: 375px;
	margin: 0 auto 0 auto;
	}

.test_header { /*固定ヘッダー*/
	width: 100%;
	border-bottom: 0.0px solid #efefef;
	position: -webkit-sticky; /* safari対応 */
	position: sticky; top: 0px; /* 上端から0pxのところで固定 */
	overflow: hidden; /*子ボックスを親ボックスに内包。hidden:範囲外は隠す*/
	background: linear-gradient(to top, rgba(255,255,255,1),  #fff 100%);
	margin: 0 auto 0  0;
	filter:alpha(opacity=100);
	filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05));
	-moz-opacity: 1;
	opacity: 1;
	}

.pic_test_header {
	width: 100%;
	}

.pic_test_footer {
	width: 100%;
	}

.test_footer { /*固定フッター*/
	width: 100%;
	border-bottom: 0.0px solid #efefef;
	position: -webkit-sticky; /* safari対応 */
	position: sticky; top: 100vh;
	overflow: hidden; /*子ボックスを親ボックスに内包。hidden:範囲外は隠す*/
	background: linear-gradient(to top, rgba(255,255,255,1),  #fff 100%);
	margin: 0 auto 0  0;
	filter:alpha(opacity=100);
	filter: drop-shadow(0px -5px 5px rgba(0,0,0,0.05));
	-moz-opacity: 1;
	opacity: 1;
	}

.footer_space { /*フッター空間*/
	width:100%;
	position: sticky; top: 100vh;
	height:30.17px;
	}

.top_h1_txt{
	padding: 2.2rem 0 0 0;
	text-align:center;
	width: 90%;
	margin: 0 auto;
	}

.top_h2_txt{
	padding: 0.5rem 0 0.0rem 0;
	text-align:center;
	width: 90%;
	margin: 0 auto;
	}

.center1{
	position: absolute;
	width: 375px;
	height: 375px;
	margin: 0 auto 0 auto;
	}

.center2{
	position: absolute;
	width: 375px;
	height: 375px;
	margin: 0 auto 0 auto;
	}

.center3{
	position: absolute;
	width: 375px;
	height: 375px;
	margin: 0 auto 0 auto;
	}

.center4{
	position: absolute;
	overflow: hidden;
	width: 375px;
	height: 375px;
	margin: 0 auto 0 auto;
	}


.pic_tama_02 {
	position: relative;
	z-index: -19;
	top:162px;
	left:245px;
	width: 24px;
	height: auto;
	opacity: 0;
	animation: translate 1.5s ;
	animation-delay: 1.8s;
	animation-fill-mode: forwards;
	}

@keyframes translate {

	0% {
	opacity: 1;
	transform: translateX(0px) translateY(0px);
	animation-timing-function: ease-out;
	}

	3% {
	opacity: 1;
	transform: translateX(13px) translateY(12px);
	animation-timing-function: ease-in;
	}

	17% {
	opacity: 1;
	transform: translateX(40px) translateY(90px);
	animation-timing-function: ease-out;
	}

	27% {
	opacity: 1;
	transform: translateX(42px) translateY(65px);
	animation-timing-function: ease-in;
	}

	47% {
	opacity: 1;
	transform: translateX(44px) translateY(90px);
	animation-timing-function: ease-out;
	}

	57% {
	opacity: 1;
	transform: translateX(42px) translateY(80px);
	animation-timing-function: ease-in;
	}

	65% {
	opacity: 1;
	transform: translateX(44px) translateY(90px);
	animation-timing-function: ease-out;
	}

	74% {
	opacity: 1;
	transform: translateX(39px) translateY(90px);

	}

	83% {
	opacity: 1;
	transform: translateX(42px) translateY(90px);
	animation-timing-function: ease-out;
	}

	99.9%,to {
	opacity: 1;
	transform: translateX(39px) translateY(90px);
	}


	}

.pic_atari_bg {
	width:200%;
	position: absolute;
	z-index: -21;
	top:-50%;
	left:-50%;
	opacity: 0;
	animation: rotation_bg 20s linear ;
	animation-delay: 0s;
	animation-fill-mode: forwards;
	/*animation-iteration-count: infinite;*/
	}

@keyframes rotation_bg {
	0% {
	opacity: 0;
	transform: scale(1) rotate(0deg);
	}

	15% {
	opacity: 0;
	transform: scale(1) rotate(0deg);
	}

	16% {
	opacity: 1;
	transform: scale(1) rotate(0deg);
	}


	99.9%,to {
	opacity: 1;
	transform: scale(1) rotate(2160deg);
	}

	}

.pic_test01 {
	position: relative;
	z-index: -10;
	left:41.5px;
	width: 252px;
	height: auto;
	animation-delay: 0s;
	animation: rotation 2s ease 0s 1 alternate none running;
	animation-fill-mode: forwards;
	}

@keyframes rotation {
	0% {
	transform: scale(1) rotate(0deg);
	}

	99.9%,to {
	transform: scale(1) rotate(1080deg);
	}

	}

.pic_test02 {
	position: relative;
	z-index: -11;
	left:17.5px;
	width: 300px;
	margin: 0 0 0 24px;
	height: auto;
	}

.btn_01{
	visibility:hidden;
	opacity: 0;
	text-decoration: none;
	position: absolute;
	z-index: 5;
	width: 50%;
	top: 314px;
	left: 25%;
	font-size: 20px; font-size: 2.0rem;
	color: #fff;
	text-align:center;
	padding: 12px 0 0px 0;
	height: 44px;
	border-radius: 4px;
	margin: 0 auto;
	background: #ff9900;
	animation: delay 3.5s;
	animation-delay: 3.5s;
	animation-fill-mode: forwards;
	}

@keyframes delay {

	0% {
	visibility:hidden;
	opacity: 0;
	}

	99.9%,to {
	visibility:visible;
	opacity: 1;
	}

	}

.btn_01:hover{
	background: #ffcc00;
	}

@media screen and (min-width:800px){/*PC用レスポンシブ設定*/

.wrapper{
	width: 375px;
	margin: 0px auto 0px auto;
	border-radius: 0px;
	border:solid 2px #666666; 
	}


実装につかった主なスタイル

▼position: relative;/absolute;▼

	position: relative;

	position: absolute;

『兄弟要素』を、『親要素』を基準に重ねていくために必須です。
「relative」(相対)「absolute」(絶対)座標の活用と、
「relative」(親)「absolute」(子)の設定としても利用できます。

▼z-index▼

	z-index: 数値;

「position:」と併用して使うことで要素の重ね合わせを調整できます。

「-数値」でより奥に。

「数値」でより手前に。

注意点として、同じ親子関係上の要素でしか適応できません。

▼overflow: hidden;▼

	overflow: hidden;

親要素に設定することで、子要素の”はみ出した”画像などの部分を非表示に出来ます。

今回のサンプルでは、最背面で回転する集中線画像のトリミング表示に使用してます。

▼visibility:hidden;/visible;▼

	visibility:visible;

要素を 表示/非表示 出来ます。

「display:none;」も要素を非表示に出来ますが、
こちらは要素自体が「無いモノ」として扱われるためレイアウトが上に詰まります。
対して
「visibility:hidden;」の場合は、見えなくなるだけで設置した空間は維持するのでレイアウトが変わりません。

▼animation:▼

.●●●{
	animation: delay 3.5s;/*設定秒数遅れて表示*/
	animation-delay: 3.5s;/*設定秒数遅れて表示*/
	animation: rotation 2s ease;/*要素の回転時間*/
	animation-fill-mode: forwards;/*最終フレームのコマで停止*/
	}

@keyframes delay {

	0% {
	opacity: 0;/*透明0*/
	}

	99.9%,to {
	opacity: 1;/*透明100*/
	}

	}

</form>

今回のサンプルでメインとなるアニメーション設定をおこなうスタイルです。

「@keyframes」以下で0~100%(※ブラウザ依存回避目的で99.9%に設定してます)の間を自由にフレームを増やすことが出来ます。

100%が全体量です。

似た機能として「transition」がありますが、こちらはブラウザ依存によりアニメーションが自動開始できない為、今回の使用していません。

擬似クラス「:hover」による「カーソルON」状態をトリガーに、アニメーションをスタートさせることは出来ます。

要素の回転は複数手段があります。

transform: rotate(360deg);


※「deg」は角度

animation: rotation 2s;


※「●s」は秒数(小数点設定可能)


【間違えポイント】スタイルが効かない組み合わせ

便利なCSSは、Web検索するだけでも組み込みたい機能のスタイルが見つけられ、都度調べるだけで実装できますが、なかなか問題なく組み込める状況も多くありません。

主にHTMLタグ要素の理解不足(インライン/ブロック等)と、タグの入れ子状態の認識不足からくるマークアップ構造の適切化が影響します。

自身が作業進める場合は、狙った効果がでていないときはマークアップ構造を図で書き出し、親子兄弟構造(position: absolute;/relative;)と並べて問題点を見つけています。

そういったルールを理解していくには、コーディングを数こなしていくことで備わりますが、さすがに全てのスクリプトを覚えていられないので、いつでも引き出せる『コンポーネント別CSSの事例集』をためていくことが有効です。


今回のサンプルについて

今回の「ガラポン抽選アニメ」に使用した画像は「部品単位」であるため、フォルダ内の画像を差し替えることで、ビジュアルを簡単に変更できます。

そういった点からも、アニメGIF画像での運用よりもCSSアニメーションの方がカスタマイズ性に優れております。

カスタマイズしたサンプル

画像を差し替えたカスタマイズサンプルの確認→こちら


さいごに

iOSでは動作が違ったりブラウザ側のバグも存在しており、まだまだWebデザイナー泣かせではありますが、CSSによるWebアニメーションについてはブラウザスピードもあがりデザイナーにとっては表現力が広がり挑戦し甲斐があるのではないでしょうか。

次回も情報設計に関係した話題をお届け致します。
デジマースのネモトでした。

スマホ HTML入力フォーム デザインサンプルの作り方と設置で気を付けること

スマートフォン向けのWEBページをデザイン/コーディングするうえで、今回はスマホのHTML入力フォームのデザインサンプル説明と、やってしまいがちな間違いなどをまとめました。


目次


フォームのサンプル

▶サンプル確認はこちら


formタグの記述(HTML)

フォーム自体のソースは下記となり、シンプルな項目を複数並べて使われることが多いです。

※今回は「input」タグを中心に使った紹介をしてます

<form action="#" method="post">
	<p>文言<br>
	<input type="text" name="フォームの名前"></p>
	<p>文言<br>
	<input type="text" name="フォームの名前"></p>
	<input type="submit" value="送信する" >
</form>

【formタグ内に設置する部品】

▼「テキスト入力」スペース▼

名前:

<p>名前:<input type="text" name="NAME"></p>

▼「セレクトボックス」スペース▼

<p>商品名<br>
<select name="item">
<option value="n01">1個</option>
<option value="n02">2個</option>
<option value="n03">3個</option>
</select></p>

▼「複数行入力」スペース▼


<textarea name="yobo" rows="4" cols="40">ご意見を記入ください</textarea>

▼「ラジオボタン」▼

男性 女性

<input type="radio" name="gender" value="male">男性
<input type="radio" name="gender" value="female">女性

▼「チェックボタン」▼

Webページ SNS TVCM 雑誌

<input type="checkbox" name="course" value="webpage">Webページ
<input type="checkbox" name="course" value="sns">SNS
<input type="checkbox" name="course" value="TVCM">TVCM
<input type="checkbox" name="course" value="BOOK">雑誌

▼「送信する」ボタン▼

<input type="submit" value="送信する">

▼「取り消しする」ボタン▼

<input type="reset" value="取消する">

これらのパーツを目的応じて使い分けることで、利用者は様々な「入力」が出来ます。


入力ページの記述(HTML)

OS付属のテキストエディター(『メモ帳』)等でファイルを開きページの記述をしていきます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no">
  <link rel="stylesheet" href="css/style.css">
  <title>情報入力ページ_HTML</title>
</head>
<body>

<div class="wrapper">

<h1 class="top_h1_txt">マイページ編集</h1>

<h2 class="top_h2_txt" style="text-align:center;">利用者情報入力</h2>

<p class="center"><img class="pic_test" src="img/pic_test_01.png"></img></p>

<form  class="center" action="form_test.php" method="post">
	<p>姓<br>
	<input class="input_form" type="text" name="middle_name"></p>
	<p>名<br>
	<input class="input_form" type="text" name="first_name"></p>	
	<input class="input_form" type="submit" value="送信する" >
</form>

</div>

</body>
</html>


入力確認ページの記述(PHP)

PHP拡張子のファイルですが、PHP命令文は一部のみで基本構成はHTMLです。

「.php」拡張子にすることで、PHP命令文が含まれるHTMLファイルであることを宣言しています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<link rel="stylesheet" href="css/style.css">
<title>情報入力ページ_PHP</title>
</head>
<body>

<table  class="center" border="1">
<tr>
<td>姓</td>
<td><?php echo htmlspecialchars($_POST["middle_name"], ENT_QUOTES) ?></td>
</tr>
<tr>
<td>名</td>
<td><?php echo htmlspecialchars($_POST["first_name"], ENT_QUOTES) ?></td>
</tr>
</table>

</body>
</html>

「HTMLエンティティ化」することでセキュリティーを強くすることが出来ます。

?php echo htmlspecialchars


記述をしないとセキュリティーに問題がある記述を入力された場合にURLが有効となってしまい危険ですので、施しておきましょう。


スタイルシートの記述(CSS)

スタイルシートにはスマホ表示向けに最適化させたベース設定をしてます。
ブラウザの『デフォルトCSS』をリセットしている記述もありますが、ファーストビュー内の表示を厳密に弄らない場合は必要ありません。

@charset "utf-8";
/* CSS Document */

html {
	font-size:62.5%;/*10pt基準*/
	}

body {
	margin: 0px;/*ページ全体周りの余白がなくなる*/
	font-family: 'Meiryo',"ヒラギノ角ゴ Pro W3","MS Pゴシック","Osaka", sans-serif;
	font-size: 15px; font-size: 1.5rem;
	color:#666666;
	-webkit-tap-highlight-color: rgba(0,0,0,0);/*フォーカスを消す*/
	background: #ffffff;
	/*line-height: 1.2;/*文字行間設定*/
	height: 100%;
	}

.clear { clear:both; }/*レイアウト崩れを防ぐために適切にクリアーしておく。「both」は左右両側の回り込み(float : left ; float : right ;)を解除する*/

.wrapper{
    min-height: 100vh;
    position: relative;
}

.top_h1_txt{
	padding: 2.2rem 0 0 0;
	text-align:center;
	width: 90%;
	margin: 0 auto;
	}

.top_h2_txt{
	padding: 0.5rem 0 0.0rem 0;
	text-align:center;
	width: 90%;
	margin: 0 auto;
	}

.center{
	text-align:center;
	width: 90%;
	margin: 0 auto;
	}

.input_form{
	font-size: 20px; font-size: 2.0rem;
	}


.pic_test{
	width: 100%;
	margin: 0 auto;
	}


【間違えポイント】
『submit』送信ボタンのタグ設置場所

情報入力後に押す『送信ボタン』のタグの記述もうっかりポイントです。

<input type="submit" value="送信する" >


formタグの中に入れてあげないと動作せず情報を送れません。

<form action="test.php" method="post">
	<p>姓<br>
	<input type="text" name="middle_name"></p>
	<p>名<br>
	<input type="text" name="first_name"></p>
	<input type="submit" value="送信する" >
</form>


【間違えポイント】
『日本語の文字化け』について

保存する際は必ず文字コードを『UTF-8』で保存をしないとブラウザ表示時に文字化けします

理解していてもソースのファイルを「新規」に作成するタイミングで「文字コードの設定」を忘れてしまい、表示検証時に文字化けに遭遇します。

適切なテキストエディターを使用して作業すれば防げますが、ついついOS標準の『メモ帳』など使用してしまう方はこの点にご注意ください。


【間違えポイント】
何故か効かないスタイルがある場合

記述や指定に間違いがないはずなのにスタイルが効かない場合は、記述したソースに不備があります。

まず疑うのは
「/*」などコメントアウトが適切につかわれてなく重要なソースまでコメントアウトされている
または、
「全角スペース」が入ってしまっている
状況があります。

テキストエディタには全角スペースを表示機能もあるものがありますので(『サクラエディタ』など)、上手に使ってチェックしていきましょう。


さいごに

今回紹介したフォームページ自体は静的ページですが、実際の運用に使われる場合は『静的な情報』と『動的な要素』を組み込み構築後表示されたページになります。

引き続きそういったデザイナーに求められる「組み込み」の記事を書いてみます。

次回も情報設計に関係した話題をお届け致します。
デジマースのネモトでした。

ターゲットとサイトデザイン | UI/UXデザイン

こんにちは!
今回のテーマは「ターゲットとサイトデザイン | UI/UXデザイン」です。

ターゲットに向けてデザインするとはどういうことなのか、考え方のポイントをまとめてみました。

また、参考になるサイトとして、それらのポイントをしっかり押さえたデザインを展開する“歯医者さん”のサイトデザインをいくつかご紹介したいと思います。


なぜターゲットを決めるのか

WEBサイトをデザインするために大切なのは、まずはターゲットを決めることです。

そもそも、なぜターゲットを決める必要があるのでしょうか?
簡単にいうと、ターゲット(ユーザー)のニーズに合わせたUI/UX設計やプロモーションなどがしやすくなるからです。

ターゲットとは「この商品を買ってもらう人」を意味します。
企業によっては「このサービスを使ってもらう人」「このアンケートに答えてもらう人」などがターゲットとなります。

どのような人に買ってもらいたいのか、どのように使ってもらいたいのかを明確にすることで、デザインやプロモーションを行う際の優先度の決めや取捨選択をすることが出来ます。
製作段階で何か問題にぶつかった時も、利用者のニーズを指針に解決策を考えることが出来ます。


もし、ターゲットを決めなかった場合はどうなるでしょう?
ターゲットを決めて選択肢を絞るより、全ての人のニーズに答えた方が良いのでは?と思う方もいるかもしれません。

しかしそうすると、「ありきたりで特徴のないサイト」や「何がしたいのか、何が出来るのか分かりづらいサイト」となり、最終的にユーザーに使ってもらえないサイトになってしまいます。

全ての人のニーズに答えられれば良いのですが、様々な価値観を持った人たち全員に好まれる状態を作るのは難しい課題です。
何とか誰にでも受け入れてもらえるようにと思うと、とにかく無難、あるいはニーズの数だけ機能や要素を増やしていくことになります。

無難とは、ネガティブな言い方をすると特徴がないということです。
そうすると、類似サイトや溢れる情報の中で容易に埋もれてしまい、そもそも気づいてもらえない状況が発生しやすくなります。
また、機能は多ければ良いという訳でもありません。
機能が多すぎると、ユーザーにとって本当に必要な機能まで埋もれてしまい、見つけ辛い、操作し辛いなどのデメリットが出てきてしまいます。

このようなデメリットを解消するためにも、ターゲットを決めることはとても大切です。

こんな目的を持った人(ターゲット)に使ってもらいたい。では、この人に使ってもらうためにどのようなデザインにするべきか、を考えることがポイントです。


ターゲットと歯医者さんのホームページ

参考になるサイトデザインの例として、歯医者さんのホームページを挙げてみます。
こちらは前述のターゲットとサイトデザインのポイントをしっかりと分かりやすく対策しています。

歯医者さんのターゲットとはどのような人でしょうか?
歯科治療を受けたい人、だと当たり前すぎてものすごく多くの人が当てはまってしまいます。
もう少し絞って考えてみると、歯は痛いけど治療も痛いんだろうな…、何回か通わないといけないのかな…と、「少し不安な気持ちを抱いているターゲット」が挙げられます。

歯医者さんに行く際、このようなことを考える方も少なくないのではないでしょうか。

このようなターゲットに対して、必要最低限の内容で訴求してもなかなか来院してくれないのではないかと思います。

歯医者さんのサイトデザインで多く共通しているのが、そういった不安な気持ちを抱いているターゲットのために、サイトデザインで出来ることはどんなことなのか追及している点です。

具体的にどのような物なのか、とても勉強になるいくつか実例を紹介させて頂きながらお話したいと思います。


参考になるサイト:歯医者さんのホームページ

基本ターゲット:治療の痛みや治療期間などに対し、少し不安な気持ちを抱いている人


あいはら歯科医院:https://aihara-dental.jp/

こちらはビジュアル要素、特にファーストビューを効果的に使用したサイトデザインをおこなっています。

サイトに飛んでまず目に入ってくるのがメインビジュアルです。明るく清潔感のある院内や治療の様子がすぐに分かるようになっています。
大きく表示された「Be a smile」と言うキャッチコピーが印象的で、歯の治療を直接伝えるのではなく「笑顔をつくるお手伝い」という言葉に置き換えることで、患者ファーストな治療方針を端的に表しています。

ファーストビューで院内の雰囲気や治療方針がイメージ出来るため、患者に寄り添った治療をしてくれるかも?と不安を軽減させるデザインとなっているかと思います。

また、明度の高いビジュアルと簡潔な説明文の組み合わせでまとまっている他、じわりと浮かび上がるアニメーションが要所に使われているので、統一感と清涼感のあるデザインになっています。
PC版の場合、スクロールするとヘッダーメニューが付いてくる仕様もユーザーにとって利用しやすいポイントになっています。


星の歯科:https://hosino-dc.com/

こちらはターゲットをさらにセグメントし、子供やその家族のためのデザインをおこなっています。

全体のデザインとしては絵本のようなイラストとタッチ、アニメーションがとても可愛く印象的で、病院的なイメージをかなり減らしています。
歯医者さんに行くのを不安がる子供の気持ちに配慮し、出来るだけ怖がらせないように、楽しくなるようなデザインが施されています。

こんなに可愛いサイトを見たら、歯医者さんに苦手意識のある子でもむしろちょっと行きたくなるのではないでしょうか。

また、こちらの歯医者さんで治療を受ける際のメリットを7つのポイントとして分かりやすくまとめています。
営業時間やキッズスペースの有無、土足OKなど細やかな情報が載っている点がお子様連れの大人でも安心して利用することができます。

ファーストビューにカテゴリメニューや予約への遷移が揃っているため、情報の多さから分かりづらくなる懸念がある点も払拭しています。


きふね歯科:http://kifune-d.com/

こちらは院長先生が2人いると言うメリットをサイトデザインに反映しています。

サイトに飛んでまず目に入ってくるメインビジュアルには、院長先生2人が治療を行っている姿が表示されています。
ビジュアルやテキストから多角的な視野で治療をおこなっていることが分かるため、セカンドオピニオンなどの不安があるターゲットにも安心して利用してもらえるような工夫がされています。

治療方針や診察内容もTOPページに明示されているため、インフォームドコンセントに重きを置くユーザーにとっても信頼感のあるデザインになっています。


新田歯科:http://2tta.com/

こちらはTOPページからスクロールを排除したサイトデザインをおこなっています。

TOPページはスクロールが一切なく、必要な基本情報が簡潔にまとめてあるため、どこに何があるのかとユーザーが迷う心配がなくなっています。
第二階層からはスクロールが発生しますが、ページ内リンクを使用するなど遷移を最低限に抑える工夫がされています。

WEB予約が一般的になってきた歯医者さんに対し、WEBに不慣れな患者さんが出来るだけ迷わず、億劫にならずに利用できるようなデザインになっています。

またシンプルでWEBサイトとしては一見単調になりそうなところ、バックグラウンド全体をアニメーションをさせることによって動きのあるデザインになっています。


おわりに

いかがでしたでしょうか?
各サイト、ターゲットに対して様々な工夫を凝らしたデザインになっていたかと思います。

ターゲットを定めてサイトデザインをおこなうことで、歯医者さんは世の中に沢山ある競合他社の中から選んでもらうことが出来ます。
患者さんも、自分の状況に合った歯医者さんを見つけ選択することが出来ます。

サイトデザインを行う際は、こんな目的を持った人(ターゲット)に使ってもらいたい、この人に使ってもらうためにどのようなデザインにするべきか、を考えて進めてみてください!

それではまた!デジマースのコンでした。

【PNG32 PNG24 PNG8 違い】WEB向け画像拡張子の種類と特徴

拡張子というのは、画像や音楽などあらゆるファイルの名前の末尾につけられている文字列のことです。「ファイル名.●●」の「.●●」の部分ですね!
この記事では「主にWEB上で使われる画像」の代表的な拡張子の種類やそれぞれどんな時に適しているのかなどを簡単に紹介していければと思います。


GIF(.gif)

読み方:ジフ

最大256色で表現されるファイル形式です。色数が少ない画像を書き出すのに適しています。透過処理も出来て、容量も軽いため、ロゴやアイコンやボタンなどに最適な形式です。色数が少ないほどファイルサイズは小さくなります。
またGIFは可逆性圧縮形式の画像です。可逆圧縮とは、簡単に説明すると可逆圧縮は劣化が生じない圧縮方式の事です。一度保存した画像を再度加工したりリサイズをしても、画像が劣化しません。


【GIF 色数64 18KB】

上の絵は塗りが単色で色数が少ないので、綺麗に書き出す事が出来ました。
ただ、色数が多いもの、グラデーションを多用した絵や写真などを書き出す時には向いていません。


【GIF 色数64 25KB】

こちらは先ほどと同じ線画にグラデーションを多用して色を塗ったものです。先ほど載せた絵と同じく書き出しの際の色数は64ですが、画像のあちこちにノイズが発生してしまっています。
色数を多くして書き出せばもう少し綺麗に処理出来ますが、色数が増えるほどファイルサイズは大きくなってしまいます。

またGIFはアニメーションを作る事が出来ます。「アニGIF」と呼ばれるものです。

アニGIFについてはぜひこちらの記事も参照してみてください↓
簡単!なめらかなアニメGIFの作り方

PNG(.png)

読み方:ピング

約1677万色を表現出来る画像形式で、文字や図形などが含まれフチがはっきりしている画像、グラデーションや色数の多い画像に適しています。透過処理も出来ます。(※種類による 後述します)
またPNGもGIFと同じく可逆性圧縮なので画像の劣化が起きません。
ただGIFや後述のJPGと比べると、ファイルサイズが大きくなってしまう事が特徴です。


【PNG24 63KB】

GIFで全く同じ画像を色数256色(最大)で書き出すと22KBでしたが、PNGにすると一気に63KB…およそ3倍になりました。
高画質にはなりますが、大きな画像を多用するページでPNGをたくさん使うと少し重くなってしまうかもしれません。

またPNGには種類が3つあり、「PNG32」「PNG24」と「PNG8」というのがあります。
フルカラーで表現出来るPNGは「PNG32」と「PNG24」の事を指します。

PNG32とPNG24の違い

PNG32はPNG24を更に高画質に、そして透過情報を持たせたものです。PNG24の透明な部分はあくまで「透明な部分を表現している」のであり、厳密には透過ではないのです。
PNG32にもなるととてつもなくファイルサイズが大きくなるのであまりWEBには適していません。WEBでよく使われるのは「PNG24」、もしくはこれからご紹介する「PNG8」が主流になっています。

PNG8とは

GIFと同じように256色で表現される形式です。透過も出来て容量も軽いので、PNG8もGIFように色数の少ないデータを書き出す際に向いています。
ほぼGIFと同じなのですが、違いをあげるとするとグラデーションなどを含んだ画像において、PNG8の方がGIFよりファイルサイズが小さくなります。

同じ写真をそれぞれGIF、PNG8で保存して比較してみましたが…見た目に差異はありませんが、PNG8の方が少しファイルサイズが小さいですね。
まあ最終的にGIFを選ぶかPNG8を選ぶかは、個人の好みかな~と思います!

私は「画像PNGで欲しいです!容量200KB以下で!」と言われたら大体PNG8で書き出すようにしています。あとPNG8の事はピンパチと呼んでいます。多分日本でこう呼んでいる方は多い。はず。

JPG(.jpg)

読み方:ジェイペグ JPEGと表記されることもある

約1677万色を表現出来る画像形式です。写真などの色数の多い画像に向いています。そこまで聞くとPNGと同じじゃん?と思いますが、JPGは他の形式に比べ容量を軽くする事が出来るのが特徴です。GIF、PNGと違って透過処理は出来ません。
またJPGは、「非可逆圧縮」です。非可逆圧縮は、可逆圧縮と逆で保存を重ねるほど画像が劣化していってしまいます。一度そうなってしまったら元のオリジナルデータには戻せません。

一般的にJPGは写真向きの形式と言われています。スマホで撮った写真は基本的にJPGで保存されています。
単色のものやフチがはっきりしているものはぼやけてしまったり劣化が激しいのでJPGにはあまり向きません。


【JPG 最高画質】

画質も細かく調整して書き出しが行えるので、ファイルサイズと相談しながら圧縮が行えます。ただあまりにも圧縮すると劣化がわかりやすく表れてしまいます。


【JPG 低画質】

ガサガサになってしまいますがファイルサイズはこれでなんと10KB。

まとめ

・ロゴ、アイコンなどの色数が少ない~単色でフチがはっきりしているもの、アニメーションはGIF
・GIFのアニメーション以外の要素はPNG8でも代用出来るので用途によって使い分ける
・色数が多く、高画質に書き出したいイラストや画像はPNG24かPNG32(透過と容量に注意)
・写真はJPGが一般的(圧縮率に注意)

長々と書いてしまいましたが、まとめるとWEBで画像を扱う際はこのポイントを抑えておけば問題ないと思います。
今回はWEBで中心に使われている拡張子に特化して書きましたが、他にも色々な拡張子があるのでそれもまたいずれ紹介出来たらなあと思います。


いかがでしたでしょうか~ぜひ参考になれば幸いです。
それでは!寒さにお気をつけて!ユイPでした。

ツイッター↓
ユイP@デジマースブログ

リセットCSS(reset css)を使わない_見出しの作り方/HTMLタグの使い方

  1. そもそも正しいHTML5マークアップとは?
  2. タグの用途
  3. デフォルトCSSを活かした基本タグの組込み
  4. その他の基礎的HTML5構成タグについて

  5. WEBページをイメージしたレイアウトにするためには、閲覧ブラウザに組み込まれている邪魔なデフォルトスタイルシート(デフォルトCSS)をリセットすることになります(リセットCSS)。

    この本末転倒な無駄(誤った?)な作業はなんでしょうか。
    デフォルトCSSも良かれで組み込まれているものです。

    間違ったタグ選び/HTMLマークアップ、間違ったHTMLの書き方では丁寧に用意されたデフォルトCSSが活かせません。
    今回はデフォルトCSSが適切にあたるように誤りのないHTML5タグの使い方、正しいタグ選びと書き方(正しいHTMLマークアップ)に挑戦してみます。


    WEBページに文言を表示させるだけならテキストエディタで文字を打ち、ファイルの拡張子を「html」に書き換えれば良いです。

    ページ閲覧者は適切なタグで文字が表示されているか知る由もありません。
    そして、「章」「節」「段落」「画像」「キャプション」「注釈/細目」などが適切なタグでマークアップされていなければ、見出しを大きく表示したり、詳細説明文を小さくするスタイル調整の作業が都度発生します。

    正しい記述(マークアップ)がされているとブラウザのデフォルトスタイルが自動であたり、スタイルシートを用意しなくても、見出しはHタグのそれぞれによって章節項と大中小項目別に表示され、注意書きはキャプションにより小さく表示されます。

    また、こちらの恩恵のほうが大きいですが、記述が適切であれば検索結果へ正しく情報が反映され、利用者の検索ワードに対して適切なページが表示されることになりページビュー(PV)が増えます。


    例えばある読み物の構成する場合、印刷物では下記のような文章体になり、WEBページでそれを再現する場合は適応したタグに当てはめる(マークアップ)ことになりますが、その判断には個人差が生じる問題があります。

    WEBページと印刷物

    注意として、全てがこのようになるわけではなく、構成を考えた方の意思によって別のタグ構成も考えられます。

    重要なのは、章立てて考えた構成がブラウザや検索プログラムに伝えられなければデフォルトCSSは適切にあたらず、結果読みにくい表示が成されたページを調整するCSS作業が増えてしまうことなのです。


    それでは下記の原稿の文章をHTMLファイルに組み込んでいきます。

    ■ページタイトル
    190924記事内_デフォルトCSSサンプル01
    
    ■本文
    PCでも!スマホでも!記事数豊富なデザインブログ!
    DIGIMERCE BLOG
    DTPからモバイルWEBデザインまで!!幅広いデザイン情報をGET
    
    DIGIMERCE BLOGとは?
    多彩なカテゴリの100以上の記事から必要な情報を取得でき、サンプル画像やソース情報も紹介
    しています。
    
    【掲載カテゴリ例】
    
    WEBデザイン
    CSSレスポンシブの説明やCanvasタグを使った動きのある広告制作、デザイナー向けCSSレイア
    ウトを紹介
    
    UI/UX
    タブとセグメンテッドコントロールの違いやボタンユーザビリティーと配色の関係を説明
    
    サイズ/仕様
    スマホ向け画像を製作する上で必須な端末ディスプレイ解像度など仕様に関する情報を詳しく
    細部まで掲載
    
    ★画像の図1
    
    ※その他情報設計に関係した記事を幅広く網羅していますので欲しい情報がみつかります
    
    こんな方におすすめ!
    ・Webページの設計を進めているが何から始めたらよいかわからない
    ・スマホ用画像を作りたいが主要端末の画面サイズを知りたい
    ・マスコットキャラクターってどうやって作ればいいが調べたい
    

    最初に、章立てした構成ごとに分けてまとめる「section」タグの設定します。

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta name=”robots” content=”noindex”>
    <meta charset="UTF-8">
    <meta name="viewport"
    content="width=device-width,initial-scale=1.0,user-scalable=no" />
    <title>190924記事内_デフォルトCSSサンプル01</title>
    </head>
    <body>
    <section>
    PCでも!スマホでも!記事数豊富なデザインブログ!
    DIGIMERCE BLOG
    DTPからモバイルWEBデザインまで!!幅広いデザイン情報をGET
    </section>
    <hr>
    <section>
    DIGIMERCE BLOGとは?
    多彩なカテゴリの100以上の記事から必要な情報を取得でき、サンプル画像やソース情報も紹介しています。
    【掲載カテゴリ例】
    WEBデザイン
    CSSレスポンシブの説明やCanvasタグを使った動きのある広告制作、デザイナー向けCSSレイアウトを紹介
    UI/UX
    タブとセグメンテッドコントロールの違いやボタンユーザビリティーと配色の関係を説明
    
    サイズ/仕様
    スマホ向け画像を製作する上で必須な端末ディスプレイ解像度など仕様に関する情報を詳しく細部まで掲載
    <img src="img/190924_web01.png"  alt="図1">
    ※その他情報設計に関係した記事を幅広く網羅していますので欲しい情報がみつかります
    </section>
    <section>
    こんな方におすすめ!
    Webページの設計を進めているが何から始めたらよいかわからない
    スマホ用画像を作りたいが主要端末の画面サイズを知りたい
    マスコットキャラクターってどうやって作ればいいが調べたい
    </section>
    </body>
    </html>
    

    メインの構成を分けて適切に伝えるため、構成の固まり毎に「section」タグで囲いました。実際の見え方がこちら↓

    テキストをhtmlファイルに直書き、sectionタグで章ごとに囲み、imgタグで画像直置きした状態※罫線タグ(hr)を入れてます

    文言同士がくっつき読めた状態ではありません。

    「section」タグにデフォルトCSSの設定がされていないようですので、タグを入れたことでの見え方の変化はありません。

    次は、
    テキストを考えナシに「段落タグ」の「P」タグ付で表示させてみます。

    pタグでテキストを囲った状態

    …こうなります。

    やっと文字が改行、段落付けがされたので読めるようになりましたが、文字が置いてあるだけです。

    では、「h」タグで「見出し」付けを定義していきます。

    「h」タグを追加定義

    …見出しが認識できるようになったので見やすくなりました。

    「h」タグは優先度と構成順で「h1」~「h6」まであります。
    「h1」は大きい見出しで、数字が大きくなるにつれ文字の大きさは優先度が下がり小さくなります。

    「h」タグは、伝えたい重要なワードに適応することで、ユーザーの利便性に大きく影響をあたえますので活用していきましょう。

    さらに見やすくするため原稿内の「項目の説明部分」と「箇条書き」の部分に適切な、

    • 「dl」「dt」「dd」タグ(説明リスト)
    • 「ul」「li」タグ(箇条書きリスト)

    以上を定義していきます。

    「dl」「dt」「dd」/「ul」「li」タグを追加定義

    全体が適切な見え方に変化しました。

    最後に「p」タグの通常段落本文より優先度が下がる「注釈」「細目」に定義するテキスト部分に「small」タグを設定していきます。

    「small」タグを追加定義

    小さい文字が入ることで、さらに文字サイズのバリエーションが増え、訴求優先度の大中小表現が完成しました。

    以上のように、文章を読む目的では適切なタグでマークアップすることによりデフォルトCSSだけで表現出来ました。

    正直なところは…飾り気がなく寂しいですが、章立てて構成された見出しと説明の優先度は伝わっているのではないでしょうか。

    華やかな構成は付加価値としては必要ですが、文章構成を理解させる場合には重要ではないのかもしれません。


    ページで取り扱う内容によっては、文章に関連付けられた図表や、又は独立した欄外構成があり、それに応じたカテゴリを示すタグが存在します。

    • 「header」タグ⇒ ヘッダー部分の要素を括る
    • 「nav」タグ⇒ ナビゲーション
    • 「article」タグ⇒ 内容が単体で完結しているセクション
    • 「footer」タグ⇒ フッター部分の要素を括る

    それらのタグをつかい機械に伝え、適切なページ評価と検索表示をしてもらいます。


    さいごに

    今回、CSSを意識せず正しいHTML5マークアップに挑戦して、基礎のおざなりを痛感しましたが勉強になりました。
    タグの最適化を今後も進めていきます。

    十分な時間が確保出来ない案件はどうしても発生致します。
    可能な限りコーディング時間を減らし、考える時間を増やすためにも、正しいHTMLマークアップを固める行動を意識してみてはいかがでしょうか。

    次回も情報設計に関係した話題をお届け致します。
    デジマースのネモトでした。

レスポンシブメニューとハンバーガーメニューのサンプル/CSSコピペ /ドロワーメニューの作り方


目次


【2019-2020年版】
JavaScriptやjQueryを使わずCSSだけでスマホとPCのレイアウトを切り替える『ハンバーガーメニュー』『ドロワーメニュー』のレスポンシブ ナビゲーション の紹介です。
ソースをコピペして使ってみて下さい。


モバイルファーストは利用者UCD/UXを考慮した現代的な設計概念の意味を持ちます

ドロワーメニュー/ハンバーガーメニューとは?

スマートフォンの画面では、PCでは表示できる大項目のグローバルメニューがサイズの問題でそのまま表示できないため、ハンバーガーメニューアイコンを押すことで展開させるUIが必要となっています。

展開されるメニュー画面は、メイン画面外の「引き出し(ドロワー)」に格納されて隠されているためドロワーメニューと呼ばれています。

今回はテンプレート使用を想定したシンプルなサンプルページを作成してます。HTMLとCSSのソースも展開してますので参考になれば幸いです。
※ お見苦しい箇所が多々ありますのでご了承ください


サンプルページ

▶サンプルページはこちら

「HTMLソース」「CSSソース」


HTML要素の文書構造化はやるべき!

レイアウト崩れの問題に直面したとき、文書構造をビジュアルで確認することで解決できました。また第三者が作業を引き継ぐ状況においても有効と思われます。


初心者故に?詰まるポイント

基本部分の理解が足りていないためミスに時間をとられました。備忘録として今回の作業のポイントを残してますので
気になる部分があれば確認ください。

▶ブラウザに既に定義されているデフォルトスタイルシートを確認

各ブラウザにはあらかじめuser agent stylesheetというデフォルトスタイルシート(デフォルトCSS)が読み込まれています。

それらはレイアウトを細かく弄りたい状況で邪魔になるときがあるので、代表的なCSSリセットで効果を消したり、独自のCSSリセットをつくる人もいます。
今回はレイアウトする上で影響があるuser agent stylesheetを、把握する意味も兼ねて都度消しています。

さらに「全称セレクタ」などCSS効果反映の優先度もあり注意したいところですが、設定しているのに効かないスタイルがある場合は、
htmlが見難くなるので推奨しませんが、その対象タグに近い場所に直接「インラインスタイル」で記述すれば適応優先度が上がります。

また「物理プロパティ」で値を記述しているのに表示が効かない場合は「倫理プロパティ」により別角度で設定がされている状況が考えられますので十分確認します。
※編集の手間を少なくする目的で、適切なセレクタをつかう

検証画面はブラウザ上で右クリックするなどして「検証」を選べば確認できます↓

リストに戻る↑


▶「物理プロパティ」と「倫理プロパティ」の違い

下記CSSソースのはulとh1にタグに対してデフォルトのスタイルをリセットするスタイルです。

「margin-top: 0px;」が、見慣れた「物理プロパティ」での記述
「margin-block-start: 0px;」が、「倫理プロパティ」での記述です。

ul,h1 {/*レイアウト崩れを防ぐためにデフォルトスタイルシートをクリアー_物理プロパティと倫理プロパティ記述*/
	margin-block-start: 0px;
	margin-top: 0px;/*EDGE対応*/
	margin-block-end: 0px;
	margin-bottom: 0px;/*EDGE対応*/
	margin-inline-start: 0px;
	margin-left: 0px;/*EDGE対応*/
	margin-inline-end: 0px;
	margin-right: 0px;/*EDGE対応*/
	padding-inline-start: 0px;
	padding-left: 0px;/*EDGE対応*/
}


表示結果はどちらも同じですが概念が違っています↓

今回、作業を進めていく中、デフォルトスタイルシートに特定ブラウザで効果がでる倫理プロパティの設定が存在し、リセット対応しました。

リストに戻る↑


▶HTML5タグの引き出し不足

文言を訴求するだけの特集ページを作る機会が多く(極端な場合全てが画像でも問題ない)、「inputタグ」「formタグ」などユーザーアクションが必要なページを作成する機会がありませんでした。

inputタグは本来はラジオボタンやチェックボックス機能として入力部分に使用するタグですが、今回のドロワーメニューの出し入れの「判別」に使用する知識がありませんでした。

リストに戻る↑


▶参考(コピペ)にしたCSSの理解不足

今回参考にさせていた「ドロワーメニューのソース」をコピペしただけでは、カスタマイズして組み込む段階で詰まりました。

ソースと向き合って「動き」と「意味」を理解してはじめて最適化させることができたので、レイアウトデザインをおこなう状況では機能理解は必要でした。

リストに戻る↑


▶CSS「疑似要素」をつかう目的

HTMLソースは可能な限り見やすく編集しやすく、かつSEOのために可能な限りシンプルにしますが、そこで必要になるのがHTMLの記述に関与しないスタイルシート上だけに存在する「疑似要素」です。

「レイアウト」と「機能の組み込み」の為に重宝するようです。

クラスセレクタ等の後ろに「:before」「:after」をつけることで、「意味を持たない、HTMLに記述する必要がない疑似的なタグ要素」を追加できます。※CSS2を考慮した場合は「:before」(コロン1つ)。完全にCSS3向けで記述する場合は「::before」(コロン2つ)

「レイアウトの装飾」に使う場合は、ボタンの「押せる感」「遷移する感」を後押しする「矢印マーク」などの装飾部品を「画像」ではなく「システムで表示」が出来ます。

HTMLのソースに影響がないので検索エンジンの巡回ロボットに無駄に寄り道させる必要させることがなく、ソースが複雑化してページ評価も下げる心配もありません。

つまりはデザイナーがUX向上のためにページビジュアルに組み込める付加価値になります!

今回の用途ではキービジュアルに画面スクロール時の動きのインパクトを与える「固定表示」にする際、一部のブラウザで固定されない事象(ブラウザ依存)が発生したので、その不具合対応に使っています。
※SafariのiOS発生する、「background-attachment:fixed」が効かない不具合(画像固定が効かない)

※バナー画像については、そもそも一枚画像で全て作ってしまうことも可能ですが、画像更新の手間とSEOを考慮する必要はあります。
さらに、動きをつけたり動的要素の組み込みの制限や、表示する端末によって解像度不足や読み込み時間増など品質の影響を受けるデメリットが考えられますので、可能な限りCSSでの作成を進めています。

リストに戻る↑


▶「inline-block」使用による予期せぬ隙間対応

「h1」のタイトルスペースと「#nav-open」の隙間がどうしても空いてしまう事象への対応

CSS
#nav-open
内の

display: inline-block;


が影響しておりました。

inline-blockである必要性がなかったので

display: block;


に変更して対応しました。

#nav-open {
	display: block;
	height:0px;
	}


inline-blockに設定されていたことで予期せぬ空白が出来ておりました。

inline-blockの特性を理解して適切に使う必要があります。

リストに戻る↑


▶特定ブラウザ固有バグの存在による使えない表現

nav id="nav-drawer"


にドロップシャドウをCSSで設定すると、
heightが100%で表示されているはずのドロワーメニューの表示に不具合が出てheightが小さくなってしまいました。

こちらも特定ブラウザに発生する不具合の可能性があるようなので、
ドロップシャドウをかける対象を変更するなど代替要素を追加して、今後対応進めていきます。

リストに戻る↑


▶「inputタグ」の機能を利用してレイアウトを切り換える

<input id="nav-input" type="checkbox" class="nav-unshown">


inputタグのtypeをチェックボックスにすることで、
特定要素へのアクションにより表示を切り替えることができます。

#nav-input:checked ~ #nav-close {


チェックが入った状態でスタイルを切り換えることで、
ドロワーメニューの開閉を再現しているそうです。

CSSはいろいろ出来ますね。


html

<nav id="nav-drawer">
	<input id="nav-input" type="checkbox" class="nav-unshown">
	<label id="nav-open" for="nav-input"><span></span></label>
	<label class="nav-unshown" id="nav-close" for="nav-input"></label>
	<div id="nav-content">
		<ul class ="nav_box">
			<li class ="nav_text"><a href="リンク先のURL">TOP</a></li>
			<li class ="nav_text"><a href="リンク先のURL">Contents01</a></li>
			<li class ="nav_text"><a href="リンク先のURL">Contents02</a></li>
			<li class ="nav_text"><a href="リンク先のURL">Contents03</a></li>
			<li class ="nav_text"><a href="リンク先のURL">other</a></li>
		</ul>
	</div>
</nav>


CSS

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
	display: block;/*カバーを表示*/
	opacity: .5;/*透過具合*/
	}

#nav-input:checked ~ #nav-content {
	left: 0;
	box-shadow: 6px 0 25px rgba(0,0,0,.15);
	}

リストに戻る↑


▶Firefoxで「max width」が効かない事象

参照したドロワーメニュー/ハンバーガーメニューのソースコードに、SP表示時、ドロワーメニューの開き具合を端末幅で最適化する目的で「max width」が組み込んであったのですが、
Firefox で特定条件でmax widthの設定が効かないため、色々回避策あるなかで対応するのではなく、今回は単純に「width」設定に戻しました。

レイアウト具合にこだわりがある場合は対応策を設定する必要があります。

参照元⇒「Firefox で max-width が効かないときの解決法 – SeijiNIshiwakiの日記」

リストに戻る↑


さいごに

PCを触らない人が増えているなか、それでも一定需要と確かな利用シーンがありますので、
今後もSP⇒PCそしてタブレットも含めたレスポンシブの最適化を進めていきます。

次回も情報設計に関係した話題をお届け致します。
デジマースのネモトでした。