【 jpegの容量を小さく / png gif JPEGの違い / ディザ処理とは? 】PNG GIF画像をディザリングで極限まで軽くする方法

Jpeg画像の容量を小さくするには?

jpegの容量を小さくするには「Adobe CC」を契約している場合は『Photoshop』で「Web用に保存」を使い60~80%の品質が無難です。

アップデートが停止している『Adobe Fireworks』はPNG8形式とGIFの減色に強いツールですが、Jpegの場合は『Photoshop』での「Web用に保存」の方が軽くなる場合が多いです。

『Photoshop』でJpegを書き出す場合は、
スマートフォン向け写真画質の画像(w750p× x 程度)であれば100~200k以内に収めますが、さらに最適化をするのであればPNG8の「ディザ処理あり」の画像と比較して綺麗と思える方を運用に使います。

人物風景写真の場合はJpegが好ましいですが、60%以下に品質を下げて圧縮していくと「ブロックノイズ」が顕著に目立ってきて使用に耐えられない画像になります。

【png gif JPEGの違い】について一言でいうと、

  • 最大256色しか使えないPNG8とGIFでは、PNG8の方が容量が軽くなる
  • PNG24、PNG32の形式では256色以上を使えるが、容量が桁違いで大きくなる ※ブロックノイズが無くJpegよりも綺麗
  • PNGとGIFは再保存や圧縮を繰り返しても画像が劣化しないがJPEGは劣化していく
  • 過去の携帯電話端末ではGIFは使えたがPNGが使えない機種が大半であった ※docomo/auはpngが使えない機種が存在したSoftBankは両方使える

それでは、
実際に画像を使用した際、WEBページを表示するまで「8秒以上」待たされた時代がありました。

書き込み速度(ライト)、読み込み速度(リード)、が機器/回線ともに高速になった今では、WEBページ画像の重さを気に掛ける習慣が減っておりましたが、今回の世界的規模のコロナ被害により、同時刻に部屋でネットを利用する人々が増え、稀にページの表示に時間がかかる状況があります。

「いつ発生するかわからない緊急時」においても、広く公平に、WEBを問題なく閲覧できる環境を構築するために必要な「ネット回線にやさしい」軽量化/最適化された画像の作り方をアーカイブとして残します。


目次


画像容量の傾向

GIF/PNG8のインデックスカラー画像データは、原則ピクセル(ドット)配置が複雑化した分、データ容量は増えます。


よって、可能な限りベタな1色アニメ塗りを意識すれば、まず容量は軽くなります。


模様の違いによる画像容量比較

それでは様々な画像配置で比較してみましょう。


注意が必要なのは、一見、容量が同じになりそうな「縦じま」「横じま」の違いだけでも容量が変わるデータ構造です。

詳しく説明するとバイナリデータやパレット構造などのプログラム的な話になるので割愛します。


ちなみにこの赤青のタイル模様の画像は縮小してドットバイドットで表示されると赤色と青色が混ざり紫色に見えます。

それであれば、最初から紫色1色で表示したほうが画像容量は軽くなるのですが、昭和な時代のコンピュータでは、白黒、光の三原色、色の三原色である、
「青」「赤」「マゼンタ」「緑」「シアン」「イエロー」「白」の7色に無色の「黒」を加えた8色表示しかできない制限ある製品があり、疑似的に7色以外を再現する「タイルペイント」技法に需要がありました。


使用色数を減らす

使用する色が1色増えるだけで容量が増えます。

GIF/PNG8の形式で書き出されると、インデックスカラー(パレットカラー)は全256色で構成されていますので、そこから64色→32色→16色、と大まかに色数を減らしていき、
元画像の再現度が7~8割ぐらい留めている段階で止めます。

その段階から微調整の仕上げにはいり、1色ずつ徐々に色を減らして最終調整をします。

うまくディザ処理をすれば「半分の色数」で、「容量も4割」ほど減らせます。


ディザ(ディザリング)処理をしない

ディザ処理(ディザリング)はこれまでの説明のように、異なる2色を隣り合わせに並べることで足りない色を疑似的に再現する効果ですが、
タイル模様にドットが配置されることから「タイルペイント」とも呼ばれます。

この処理をすることで、仕様上の色数以上の表現ができます。

しかし、写真や段階のあるグラデーションを使っている画像の容量削減に有効ですが、ペタッとしたアニメ調の平らな表現には向きませんので使い分ける必要があります。


※厳密には、平たんな部分の無い写真画質の画像はJPEG形式が容量削減に適しています。


画像再現→色数を増やす?ディザ処理をする?

色数を減らすか、多少容量が増えてもディザ処理で元画像の再現度を保つかを判断します。

目安は、仕様設計で定めた画像容量の上限です。
色を増減させながらディザ処理具合も都度確認して、
目安の画像容量を超えないギリギリまで画像再現度を調整し書き出します。

書き出した画像はそのものに見えるかどうか、第三者に確認してもらいましょう。

問題なければ、仕様に沿った最適化された画像の出来上がりです!


リクエストを減らす→CSSスプライトで一枚画像にする

WEBページを表示する際に読み込み速度に影響を与えるのがWebサーバーへの「リクエスト」回数です。

このHTTPリクエスト回数を如何に減らすかが、WEB設計をする上で重要であり、またやりがいある作業です。

GIF画像を1枚読み込むと  1リクエスト。
GIF画像を10枚読み込むと 10リクエスト。

原則、リクエスト数が増えた分だけ処理が増え読み込み時間(待ち時間)が増えます。

現代のネット回線は太く、一度の読み込みで受け取れる情報量が増えておりますので、

1KBの画像でも、
100KBの画像でも、
読み込む速さに違いはありません。注)回線状況に影響を受ける

ページ読み込み時間に影響するのは「×リクエスト数」です。

100KBの画像を1枚読み込むより、
1KBの画像を100枚読み込む方が、総容量は同じなのに時間がかかる訳です。

前置きが長くなりましたが、
そこで有効なのが「CSSスプライト」の処理です。※「CSSスプライト」使用方法の説明は割愛します

100枚画像がどうしても必要な仕様であれば、その100枚を一枚の画像にまとめて張り付けてしまうやり方です。

1リクエストで済み、おおげさに言えば100分の1、時間を短縮できます。

WEBページで使用する場合はスタイルシートでx軸y軸の始点座標を指定することにより、マスク処理のように、画像のなかの見せたい「一部分」だけを都度表示させて運用します。


さいごに

なんでも可能な贅沢な環境よりも、制約ある作業に「やりがい」と「達成感」を感じるのも不思議なものです。

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

リモートワークを快適に過ごすために

こんにちは!
今回のテーマは「リモートワークを快適に過ごすために」です。

新型コロナウイルスの影響で、弊社では一時的にリモートワークを行っています。
テレワーク、在宅勤務などとも言われています。

弊社初めての試み&私自身も初めての経験であるリモートワーク、実際に働いてみて3週間ほど経ちました。
自宅で仕事をするメリットはたくさんありますが、ストレスを感じる場面もいくつかありました。
そんな時、こうするとより集中して快適に仕事に取り組めたなと感じたポイントをまとめてみました。


ストレスのポイントと解消方法

作業環境が整っていないと辛い

そもそも自宅に仕事で使えるPCやインターネット環境がない、長時間の利用に適した机や椅子がない、となると辛いです。
環境を1から整える場合、吟味しているとお金と時間が掛かってしまいます。

弊社の場合、自宅に適切な作業環境がないと言う社員に対してはPCやスマホ、wi-fiルーターの貸し出しで対応しています。

自宅の環境で「やりづらいな…」と思った物に関しては、個人の予算内で解決するのであれば、自分に合った物を買った方が生産性が上がって良いと感じました。

例えば、テンキーの有無や押しやすい高さのキーボード、ノートパソコンのみの作業で画面が小さいと思えばモニターなど。
腰を痛めないように、オフィスチェアや座椅子など座る環境は整えた方が良いかもしれません。

仕事に個人の出費か…と気になる方もいるかもしれませんが、仕事だけでなくプライベートも快適になり両方の投資になるので私は良いと思いました。

私の主観にはなりますが、このくらいあれば自宅でのデザイン制作は不自由しないかなと言うPCの作業環境を記載してみます。
個人の好みもあるかと思いますので、参考までに見てみて下さい。

【作業環境】
PC:iMac(21.5inch, Mid 2011)
OS:macOS Catalina

■モニターサイズ:20inch〜30inchくらい
PC上で何か作るのならモニターはほどよく大きい方がやりやすいです。
画面が小さいと拡大縮小やスクロールが頻発しますし、作った物の表示範囲が狭いと非常に見辛いです。
細かいことではありますが、長時間作業していると塵積もでどんどん効率が悪くなってしまいます。

ノートPCだと11〜15inchくらいが多いかと思いますので、デザインをするならモニターを買った方が作業しやすいかもしれません。

大きすぎるのも見づらいので、20inch〜30inchくらいのモニターがあると良いと思います。
私は自宅で21.5inchのiMacを使用していますが、特に困ることはないです。
現状の不満を強いて言えば、動画制作など作業によっては時々、27inchあっても良いな…と思うことがあるくらいです。

■ディスプレイ数:2個〜
出来ればデュアルディスプレイにした方が作業効率は良いです。
制作をしていると、Adobeソフトやメールソフト、ブラウザ、資料などを何度も切り替えながら見る場面が多いと思います。
いちいち切り替えていると見辛く、見辛いが故に確認が重複したりして時間が掛かります。

そうならないように、メインは完全に制作作業に当て、サブで足りない部分を補ったり制作作業以外のこと(メールやチャットの確認、検索や資料の表示など)をする、と役割を分けると使いやすいです。

PC用のディスプレイでなくとも、iPadやタブレットなどでもある程度代用できます。
私はiMacとiPad Pro(12.9inch 第3世代)を使い、iPadでメールや資料を確認しながら在宅勤務をしています。

■メモリ:最低8GB、出来れば16GB
Adobeソフトを使用する場合の最低推奨値は8GBですので、PhotoshopやIllustratorをメインに使うのであればそれで大丈夫です。
ですが、Premia Proなど動画ソフトを使用したい場合は16GB必要です。
最新のCCのバージョンですと、メモリに16GBないと動画ソフトを使うことが出来ません。
※古いバージョンならダウンロード出来ますが、恐らく今後更新されることはありません…

■+α
会社はWindowsだけど自宅にあるのはmac…同じソフトウェアなのにショートカットや機能などの差異があってやりづらい…と思う方も多いと思います。
そのような場合は、macのアプリケーション内にあるBootCampアシスタントを使用すると便利です。
macにWindowsがダウンロードできるアプリで、ダウンロードしてしまえばショートカットなども会社のWindowsと統一して使用することが出来ます。
Windows自体は購入する必要がありますが、Windows10のライセンス認証期間を利用するなどまずは試してみてから考えるのも良いかもしれません。
2,000円ほどでWindows用キーボードも買えますので、これらの環境を整えてしまえば会社環境と齟齬が少なく出来ます。

仕事とプライベートの境界がなくなる

会社で仕事をしていれば始業や終業時間、昼食の時間がハッキリ決まっています。
なので、昼食の時間と退勤後は基本的に仕事はしませんし、意識しなくても気持ちの切り替えは自然と出来ます。

ですが自宅だと、時間も気持ちも全て自己管理になり、個々の性格やモラルに依存します。
気持ちの切り替えが出来ず、個人的にお昼休憩や終業連絡後にも仕事を続けてしまう事が多かったです。
(会社からは終業後に仕事をしないようにちゃんと言って頂いています…!)

実質的には勤務時間が増えてしまうことにストレスを感じると言う意見もあり、気持ちの切り替え方を工夫する必要があると感じました。

こう言う時は時計をすぐ目に入る位置に置いておくのが良いと思いました。
出来ればスマホではなく、時刻がハッキリわかる置時計の方が良いかもしれません。

室内の換気をする

窓もドアも閉めきって仕事をしていると部屋の空気が淀み、新鮮な酸素が足りなくなって集中力が低下してしまいます。

最近は暖かく天気の良い日も多いので、定期的に窓を開けてみてください。
私は雨の日以外は基本的に窓を開け、日が落ちたり寒くなってきたら閉めるように気をつけていました。

日光に当たる・体を動かす

基本的に今は自宅に籠もりきりになっている方が多いと思います。
1週間一切外出しなかった…と言う時もありましたが、かなりストレスが溜まり、精神的にも仕事の効率的にもよくなかったです。

仕事のある平日でも、5分10分でも良いので日光に当たるようにしてみて下さい。
体を動かすと言ってもランニングのようなガッツリしたものではなく、ちょっとしたストレッチや軽い散歩だけでも気分が変わってくると思います。

朝仕事が始まる前に洗濯物を外に干したり、お昼休憩の時間を利用して15分ほど犬の散歩に行ったりしましたが、気分がスッキリしてより仕事に集中することが出来ました。

水分補給をする

意外と忘れがちなのが水分補給です。
会社で仕事をしていた時は出社時にコンビニやカフェで飲み物を買ったり、ウォーターサーバーの水を小まめに飲んだり出来ていました。

自宅だと飲み物に対する気付きが少なく、ちゃんと「水分を取ろう」と意識しないと朝から晩までほとんど水分を取らずに過ごしてしまうことがありました。
そのせいで、ふと気づいた時には頭がクラクラしてしまっていた日も…

夏場ではない室内でも脱水症状を起こしてしまうので、手元にコップや水筒で飲み物を準備して時々飲むことを意識する必要があります。


より良いリモートワークのために

より良いリモートワークを行うためには、コミュニケーションが大切です。
当たり前のことではありますが、チャットなどのテキストを主体としてコミュニケーションを取る場合、対面で話す時より一層注意が必要です。

相手の様子が全く見えないため、ネガティブな気持ちでいるのか、ポジティブな気持ちでいるのか、どんな感情でこのテキストを打ったのかと疑心暗鬼になることもあります。
反応がないと、自分が言ったことを相手が理解しているのか、そもそもちゃんと読んで対応出来ているのかと心配になります。

ちょっとしたすれ違いでストレスが増えることも考えられるため、対面時以上に丁寧で細やかなコミュニケーションが必要かと思います。


おわりに

今はリモートワークのおかげでコロナの感染リスクも大きく下がっているため、安心して仕事に取り組むことが出来ています。
通勤のストレスもなくメリットも多いように思いますが、自宅で仕事をするストレスもあります。

良い面も悪い面も沢山あるリモートワークですが、会社だけでなく個人が工夫してそれぞれ環境を整える必要があると思いました。
新型コロナの流行が落ち着けば弊社のリモートワークは終わりますが、仕事に対する意識を見直す事が出来た他、ツールへの知識が深まりとても勉強になっています。

皆さんも新型コロナや体調不良に気をつけてお過ごしください。
それではまた!デジマースのコンでした。

ユーザビリティ|セルフ式ガソリンスタンドの使い方

こんにちは!
今回のテーマは「ユーザビリティ|セルフ式ガソリンスタンドの使い方」です。
セルフ式ガソリンスタンドの使い方を確認しつつ、初心者でも迷わないユーザビリティについて考えてみました。

みなさんは初めてセルフ式ガソリンスタンドを利用した時、1人でスムーズに使うことが出来ましたか?
私は出来ませんでした…。初めての時は1人で給油するのが怖かったので、母に付き添ってもらい逐一操作の説明と介護を受けると言うイージーモードでプレイしてしまいました。

セルフ式は慣れれば問題ないのですが、初見の人にとっては少し分かりづらいユーザビリティになっていると感じます。
初回利用時は家族や友人に教えてもらった、あるいはガソリンスタンドの従業員の方に教えてもらったと言う方も多いのではないでしょうか。

そんなセルフ式ガソリンスタンドを、誰に聞かなくても迷わず使えるようにするにはどうしたら良いか考えていきたいと思います。


目次

01.セルフ式ガソリンスタンドとは
02.セルフ式ガソリンスタンドのユーザビリティ【現状】
03.良いユーザビリティとは
04.セルフ式ガソリンスタンドのユーザビリティ【問題点と改善案】
05.おわりに


セルフ式ガソリンスタンドとは


ユーザビリティを考える前に、簡単にガソリンスタンドについて整理したいと思います。

ガソリンスタンドには大きく分けて2つのサービス形態があります。
フルサービス式とセルフ式です。

フルサービス式とは、ガソリンスタンドの従業員の方が給油作業を行う昔からお馴染みの形態です。
給油中に窓を拭いてくれたり、喫煙者の乗る車の場合は灰皿を交換してくれるなどのサービスもあります。
従業員の方が案内から給油まで全てやってくれるので、のんびり車内で待っていられるメリットがあります。

一方セルフ式とは、顧客が自分で給油作業を行う方式です。
消防法が改正された1998年に登場し、毎年ガソリンスタンド全体の総数が減少する中でセルフ式だけは数を増やし続けています。
令和元年9月末の段階でセルフ化率は33%程で、町のガソリンスタンドの3件に1件はセルフ式ガソリンスタンドです。
(参照:石油情報センター)

セルフ式の1番のメリットは値段の安さです。
顧客自ら給油を行うことで、ガソリンスタンド側は人件費を抑えられるためフルサービス式よりガソリン代が安くなります。

また、車検や不要不急のメンテナンスの営業をされることもないので、給油だけが目的の人にとってはストレスフリーとなります。
他にも、フルサービス式より営業時間が長い場所も多く、早朝や深夜に急にガソリンを入れたくなった時に助かります。

デメリットは、どんなに過酷な天候でも外に出て自ら作業を行う必要があることと、一切点検をしてもらえないことです。
点検をしてもらえないと、ランプ系が切れているなどの運転手からは見えづらい危険な部分に気が付くのが遅くなってしまうこともあります。

そして、最大のデメリットと言っても過言ではないのが初見時の使い方の分からなさです。
使い方が分からないからセルフ式には行かないと言う方も少なくないのではないでしょうか。

素晴らしいメリットが沢山あるセルフ式ですが、使い方と言う最初のハードルが少し高く感じてしまうのはもったいないです。
次の項目からはいよいよ、セルフ式のユーザビリティに触れていきます。


セルフ式ガソリンスタンドのユーザビリティ【現状】


まずはセルフ式で給油を行う際の導線が現状どのようなユーザビリティになっているか整理してみます。

ユーザビリティのポイントとしては、「支払方法の選択」「油種の選択」「給油方法の選択」「給油」の4つが挙げられます。
企業によって細かい違いはありますが、概ねこのような流れになっているのが一般的です。


良いユーザビリティとは


ここで一旦、そもそも良いユーザビリティとはどのようなものなのか思い出してみます。
簡単に言ってしまうと、「分かりやすい」「簡単」「ストレスがない」と言った条件が満たされていると良いユーザビリティと言えます。

セルフ式ガソリンスタンドの良いユーザビリティとは、「初心者でも迷わず、安心して使えること」だと思います。

このような良いユーザビリティの観点を元に、4つのポイントそれぞれの問題点を洗い出し改善案を考えていきたいと思います。


セルフ式ガソリンスタンドのユーザビリティ【問題点と改善案】


※前提として、「セルフ式ガソリンスタンドに初めて来た人」を想定してユーザビリティを考察しています。

支払方法の選択の問題点

■そもそもどこで支払えば良いのか、どこを操作するのか分からない時がある。
支払いやパネルを操作する機械と給油機が2つに分かれている場合があります。
心理的にまず給油機に向かってしまうことが多く、そうすると操作パネルがないため「はて?」となります。
給油機はカラフルなのに操作パネルの機械は白などの目立たない色になっていることも多く、優先度に差があることで認識しづらくなっている面もあります。
 
この問題の別パターンとして、レシートとおつりが出てくる機械が別々な上におつりが出てくる機械だけ離れた場所にある、などもあります。

支払方法の選択の改善案

■全て1つの機械に集約する。
機械が1つだけなら迷いようがありませんよね。支払いもパネル操作も給油機能も1つの機械に集めてしまいましょう。
調べたところ実運用されている機械がすでにあるようなので、全国のセルフ式がこうなってくれると嬉しいです。

また、支払方法が多様化している昨今、ガソリンスタンドの機械にも様々な機能が付いています。
現金やクレジットカード払いだけでなく、アプリのQRコード決済や各種ポイントカードや割引カードに対応した機能など。
1つの機械に全ての機能を盛り込むのは大変かもしれませんが、セルフ式でも誰もが使いやすいユーザビリティにしていくのが今後の課題かと思います。

油種の選択の問題点

■自分の車にどの油種を入れたら良いか分からない。
たまに聞くのが「軽自動車に軽油を入れてしまった」「ハイオク車なのに値段が安いレギュラーを入れてしまった」などの失敗談です。
油種を間違えると車へダメージが掛かる上に、修理代でお財布へのダメージも…

油種の選択の改善案

■選択画面に検索窓やQ&Aを設置。自分の乗っている車がどの油種を入れたら良いか調べられるようにする。
「軽自動車ならレギュラー」「車種を入力して検索すると選択すべき油種を提示してくれる」などが出来るようにします。

給油方法の選択の問題点

■どれを選択したら良いか分からない。また、ガソリンが溢れるのではないかと不安を感じる。
慣れない内は車のガソリンの減り具合や容量を把握できていないので、金額や定量を指定したくてもどれを選択したら良いか分からない方も多いと思います。
また、2000円分入れる金額指定をしたいけど、上限金額に達する前に満タンになるとガソリンが溢れてしまうのでは…?などと不安を感じる場合もあるのではないでしょうか。

給油方法の選択の改善案

■選択画面に大まかなオススメや補足を書いておく。
自分の車のガソリン容量が把握できていない人に対しては「満タン」をオススメしたり、ガソリンメーターの例を出して「メーターが半分を切っていれば、満タンか1000円分給油がオススメ」など状況から判断できる選択肢を表示します。

また補足として、「ガソリンは満タンになると自動で給油が止まり、お釣りが出ます」と表示すると利用者の不安は軽減されます。
ただその場合、状況や機械によっては満タンになっても止まらず溢れる危険があるため、「よそ見厳禁」などの注意も書く必要があります。

給油の問題点

■給油ノズルの扱い方が分からない。
いざ給油しようとした時、給油ノズルの使い方が分かりません。
レバーを引けばガソリンが出るのは分かるけれど、どのくらい給油口に差し込めば良いのか、ノズルを入れると給油口の中身がまったく見えないけどちゃんと止まるのか?など色々考えてしまいますよね。

給油の改善案

■操作パネルで説明の図や動画を流す。
操作パネルと給油機が一体となっていること前提ではありますが、給油のフェーズに入ると、手順がハッキリ分かるような図や動画が操作パネルで流れるようにします。
「ノズルは奥までしっかり差し込んでください。差し込みが緩いとセンサーが反応せずガソリンが溢れる場合があります。」などの説明があると、事前に気を付けることが出来るので安心できるかと思います。


おわりに


いかがでしたでしょうか?
ユーザビリティを少し変えるだけでも、セルフ式ガソリンスタンドに対する苦手意識が軽減するのではないでしょうか。

ぜひこれからも、注意を怠らずに安心安全で楽しい運転ライフをお過ごしください!
それではまた!デジマースのコンでした。

簡単!Premiere Proの使い方【BGM・効果音編】

こんにちは!
今回のテーマは「簡単!Premiere Proの使い方【BGM・効果音編】」です。
Premiere Proで効果音やBGMを編集する方法や、動画に音を当てる際のちょっとしたポイントをご紹介したいと思います。

テロップの作り方について知りたいと言う方は、簡単!Premiere Proの使い方【テロップ編】もご覧ください!


使用するソフト

■Premiere Pro(プレミアプロ)
※バージョンは「CC 2019」を使用しています。


BGMを入れる

こちらのネコの動画にBGMを当てていきたいと思います。

まずは音源をPremiere Proに入れます。

プロジェクトパネルに使いたい音源をドラッグ&ドロップします。
「BGM.mp3」と言うクリップが出来たら、今度はそれをタイムラインパネルにドラッグします。

これでもう動画に音を当てることが出来ました。とても簡単ですね。
音源を入れること自体は簡単ですが、最も重要なのはこれから行う音の調整作業です。
動画の尺と効果音・BGMのタイミングを合わせたり、音の始まりと終わりにフェード処理などを掛ける作業です。

まずは動画と音源の尺を合わせます。
BGMが動画より少し長いため余分な部分を切り取ります。

音源の前後を切りたい時はタイムラインの「BGM.mp3」クリップの端にカーソルを合わせてください。
カーソルの表示が下記の図のようになりますので、それをドラッグしながら左右に伸縮させることで調整する事が出来ます。
動画の動きと音のタイミングを見ながらBGMの長さを調整します。

長さを揃えたら、次にBGMの始まりと終わりにフェードインとフェードアウトを掛けます。
「エフェクト」→「オーディオトラジション」→「クロスフェード」→「指数フェード」を選択します。
音源の前後に指数フェードをドラッグするとオーディオエフェクトが掛けられます。
オーディオエフェクト部分にカーソルを合わせると、尺を調整した時のように表示が変わるので、同じ要領で左右に伸縮させて調整を行ってください。

フェードイン・フェードアウトは必須事項ではありませんが、エフェクトを掛けることでより自然な流れで音を聞くことが出来ます。
音源の状態にもよりますが、エフェクトを掛けていないと音がブツッと途切れて聞こえ違和感を感じてしまうこともあるため、それを滑らかに調整してあげる役割があります。

これで動画にBGMを入れることが出来ました。
完成版はこちらです。


※再生ボタンを押すと音が出ますのでご注意ください。
※この動画はブログ掲載用に設定を調整しています。


効果音を入れる

こちらのカウントダウンの動画に効果音を当てていきたいと思います。

カウントダウンの数字が出現するタイミングに合わせて効果音を当てていきます。
まずは時間インジゲーターやプログラムパネルで数字が出現するタイミングを確認します。
今回は暗転から数字が表れるポイントが「5」の時は0:26秒、「4」の時は1:26秒、「3」の時は2:26秒部分だったので、そこから効果音が始まる、もしくは重なるように効果音クリップの位置を調整します。

音を合わせるポイントですが、このように動画でアクションが起きるタイミングと音が出るタイミングを合わせると噛み合う場合が多いです。
例えば暗転から映像が動き出すタイミング、あるいは映像内で何かがアクションを起こした瞬間など。
これらのタイミングで効果音を流したり、BGMの盛り上がるパートを合わせると良いです。

ただ、すべての状況でこれが当てはまる訳ではなく、動画によってはもっと柔軟に映像と音を合わせた方が良い場合もあります。
自分が作りたいものに合わせてタイミングを調整してみてください。

これで動画に効果音を入れることが出来ました。
完成版はこちらです。


※再生ボタンを押すと音が出ますのでご注意ください。
※この動画はブログ掲載用に設定を調整しています。


おわりに

いかがでしたでしょうか?

動画に音を合わせる時、なんとなく適当に付けるだけではもったいないです。
1秒ずらすだけで印象が変わることもあるので、ぜひタイミングをばっちり合わせてみて下さい!

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

ターゲットとサイトデザイン | 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サイトとしては一見単調になりそうなところ、バックグラウンド全体をアニメーションをさせることによって動きのあるデザインになっています。


おわりに

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

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

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

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

【Webマーケティング】ランディングページとは

こんにちは!
今回のテーマは「【Webマーケティング】ランディングページとは」です。
ランディングページ(LP)の意味や作る時のポイントについて、Webマーケティングとデザインの観点からわかりやすく簡単にお話したいと思います。


ランディングページとは

ランディングページとは、簡単に言うと「ネット広告をクリックして遷移したページ」のことです。
ランディングページには2つの意味(※1)がありますが、Webマーケティングで一般的に使われているのは上記の意味です。

普通のWebページと何が違うの?と疑問に思った方もいるかもしれません。
こちらも簡単に言うと、「コンバージョンさせる事により特化したページ」になります。

コンバージョン(CV)とは「Webサイト上での最終的な成果」のことです。
具体的な成果ですが、これは会社によって変わってきます。
ECサイトであれば商品の購入、SNSなどコミュニティ系のサイトであれば会員登録、アンケートサイトであればアンケートへの回答、などなど。このような成果(ユーザのアクション)がコンバージョンになります。

次の項目では、ランディングページとコンバージョンの関係についてもう少し詳しくお話したいと思います。

※1:別の意味として「検索結果や広告など、リンクをクリックして最初にアクセスしたページ全般」を指すこともあります。こちらはより広義な意味を含んでいます。


ランディングページとコンバージョンの関係

サイトを運営しているからには是非コンバージョンして貰いたい訳ですが、ホイホイと簡単にして貰えるものでもありません。
特に決済や個人情報を入力しなければいけないサイトだと、ユーザーはコンバージョンに慎重になります。

そんな時、ユーザーにわかりやすく安心してコンバージョンしてもらう為にランディングページが必要になります。
もう少し企業側の目線で言えば、訴求力のあるページで離脱を少なくするために必要になります。

広告から来たユーザーは「この商品が欲しい」「この情報が知りたい」など、「何か1つの決まった目的」がある場合がほとんどです。
そんなユーザーに合わせ、必要な情報やメリットを分かりやすく伝えられるのがランディングページのメリットです。

例えば下記のような場合を見てください。

あるECサイトのキャンペーンで、ちょっと良いなと興味をそそられる物があったとします。
バナー広告をクリックした先のページが、ランディングページかTOPページだった場合、どちらの方がよりコンバージョンしたくなるでしょうか?

ちなみに、ここではコンバージョン=商品の購入とします。

このような場合、ランディングページの方が購入ボタンを押す人が多いと思います。
理由は、ランディングページの方が導線とユーザーメリットが単純明快だからです。

ランディングページはざっくり分けて3つの要素で構成されています。キャンペーン内容、コンバージョンボタン、商品詳細です。
また、余計なリンクがなく1ページで完結しています。
これはユーザーの知りたい情報やメリットを分かりやすくし、余計なリンクからの離脱を防ぐ効果があります。

一方TOPページは、バナー広告で訴求していた内容以外の要素が多く、知りたい情報がどこにあるのか分かりづらくなってしまっています。
また、商品を見つけてもすぐに購入が出来ない導線になっています。商品詳細ページへ行き、カートに入れて、購入ボタンを押す…など、コンバージョンに至るまでに何回も遷移が必要になります。
こういうページですと、回遊はされても最終的にコンバージョンに至らず離脱されてしまう可能性が高くなります。
サイトの顔であるTOPページとしては商品の豊富さが伝わって良いのですが、広告から来た「何か1つの決まった目的があって利用するユーザー」にとっては情報が多すぎて使いづらいことも…

補足として、TOPページがランディングページとして設定されている場合もあります。
最適化されていれば良いのですが、コンバージョンに直接関係しないリンクや情報が多いとその分離脱率も上がってしまいます。
ユーザーが離脱する要素を減らしたい!と言う場合は、ランディングページとして専用のページを作る方が良いと思います。


ランディングページを作る時のポイント

ランディングページを作る時のポイントを、ランディングページの3つの要素に分けてお話ししたいと思います。

ランディングページはざっくり分けて3つの要素で構成されています。キャンペーン内容、コンバージョンボタン、商品詳細です。

キャンペーン内容

キャッチコピー、メインビジュアル、メリット(簡潔に)など。
ユーザーの目的に合った、ユーザーが求めている情報を分かりやすく簡潔な文字とビジュアルで配置するとても大事な部分です。

キャンペーン内容と後述のコンバージョンボタンはファーストビューに全体が収まるようデザインして下さい。

何故かと言うと、ユーザーはファーストビューの内容でそのページを詳しく見るか見ないか決めるからです。
ファーストビューにユーザーが欲しかった情報が載っていないと、「なんだかちょっと違うな」「面倒くさいな」とすぐ離脱してしまいます。

また、ユーザーは基本的に流し読みします。
メリットなど重要なことがページの中間に書いてあっても、認識してくれない可能性が高いです。
下記はLPのヒートマップ事例です。

コンバージョンに繋がるような重要な情報は、ファーストビューにしっかり収めるのが適切です。

コンバージョンボタン

「購入する」「会員登録する」「申し込む」など、コンバージョンに直結するボタンです。
他の情報に埋もれないよう、色や形などボタンと一目で分かるようなデザインにします。

位置は基本的にファーストビューに収まるよう設置するのが望ましいです。
広告からモチベーションを高く持って来ているユーザーに出来るだけスムーズにコンバージョンしてもらえるようにするためです。
また、スクロールする手間を省くために、商品詳細で1項目終わった後やページの最下部など要所要所に設置するのも有効です。

商品詳細

言葉通りですが、商品の詳細を書きます。
1から10まで商品の詳細を書くのではなく、「この商品はユーザーにとってこんなにメリットがある!」と言うベネフィットが伝わるように書きます。
例えば「登録なしで使えます」「ダウンロードで通信料が掛からない」など、ユーザーにとってメリットに直結する情報や機能を簡潔に書くと良いです。
文章で長くなってしまう場合も2、3行に収まるように書くのが読みやすく適切です。


おわりに

いかがでしたでしょうか?
ランディングページを作りたいけどどういった物かわからなかった…と言う方は、ポイントを意識して作ってみてください!

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

【Photoshop】簡単!曇り空を青空にする方法

こんにちは!
今回のテーマは「【Photoshop】簡単!曇り空を青空にする方法」です。
Photoshopの編集・合成テクニックを使い、簡単且つ自然に写真の曇り空を綺麗な青空に変える方法をお話ししたいと思います。


構図は良いのに空の色が…

出先で撮った思い出の写真や、制作で使う為にネットで探した写真素材、構図は良いのに空が曇っていてイマイチ…と感じた事がある方も多いのではないでしょうか。

ありのままの写真の良さと言うのもありますが、仕事の制作物の場合、案件のコンセプト上どうしても青空が必要な時があります。
例えば「空と自然の写真を使って夏らしい広告を作って」と言われた時、使用する素材は曇ったような白っぽい空より青い空に白い雲の方が適切ですよね。

写真を自分で撮ったり、ネットの無料素材を探す場合、構図も色合いもイメージにピッタリ合う物を探すのは時間が掛かり大変です。

そんな時はPhotoshopを使って簡単に編集することが出来ます。


作業環境

今回使用した作業環境は下記の通りです。

■Photoshop CC 2019

※この記事ではPhotoshop CC 2019のプラグイン機能「Camera Rawフィルター」を使用しています。


Photoshopで曇り空を青空にする方法

曇り空を青空にする方法はいくつかありますが、今回お話しするのは下記の2種類です。

①Camera Rawフィルターで調整する。
②別の空の写真と合成する。

まず1つ目の「Camera Rawフィルター」についてですが、これは写真の明るさや色味を調整出来る機能です。
曇り空を青空にしたい時だけでなく、写真の細かい色味を変えたい時も簡単に編集する事が出来るのでとても便利です。

ただ、雲が分厚く空を覆っている写真など、場合によってはCamera Rawフィルターで調整しても不自然になってしまう時があります。
そんな時は2つ目の方法を試してみてください。

2つ目の「別の空の写真と合成」についてですが、そのままの意味です。写真の空の部分を、別の空と合成して差し替えてしまいます。
空の青さや雲のバランスなど好きな空が選べるので、より理想的な写真にする事が出来ます。


Camera Rawフィルターで調整する

Camera Rawフィルターを使って空の色を調整したいと思います。

まずはコチラの写真を見てみてください。

空全体に薄く雲が広がっていて、霞がかったようにモヤっとしていますね。
本当は青と白のコントラストがキレイな風景なんだろうなと言う事が分かるだけにとても勿体ないです。

写真をPhotoshopで開いたら、レイヤーを選択した状態で「フィルター」→「Camera Raw フィルター(Shift+Ctrl+A)」を開きます。
そうすると下記のような画面が出てきたかと思います。

デフォルトで「基本補正」のタブが開くので、こちらの機能を使って写真を調整します。

「基本補正」では色味や明るさなど様々な調整が出来ますが、特に便利なのが「かすみの除去」です。 
「かすみの除去」とは、その名の通り写真の中の霞や靄を減らしたり増やしたりする機能です。
霞に限らず、白くモヤっとした部分全体を補正してくれるので、色味を簡単に鮮やかに調整することが出来ます。

先ほどの写真を「かすみの除去」で調整するとこのようになりました。調整スライダーの値は+50です。

たったこれだけでかなり良い青空になったのではないでしょうか。
全体を覆っていた白いモヤがなくなり空の青さと白い雲の境界がハッキリしました。
他にも海の青さや緑の植物も色がくっきり見えるようになり、色鮮やかな写真になりましたね。

これで終わらせるのも良いかもしれませんが、影の濃さなどが気になるのでもう少し調整を行います。

基本補正の「ハイライト」や「シャドウ」で全体がもう少し明るくなるように調整し、「テクスチャ」と「彩度」でハッキリと鮮やかに見えるように調整しました。

これで完成です。
曇り空を青空に変える事が出来ました。

「基本補正」の各設定ですが、調整の加減は+50~-50の範囲が適切かと思います。
それ以上に数値を大きくすると、粒子感や白飛びなどが強く出てしまい却って不自然になってしまう事も多いです。
ただ「ハイライト」や「シャドウ」などその限りではない事もありますので、写真の状態に合わせて設定してみてください。


Camera Rawフィルターで調整する+α

空だけを調整したい、と言う場合は「選択範囲」を使ってみてください。

今からのこちらの写真の空の部分だけを調整したいと思います。

まずは空とそれ以外の部分(ビルや木)を分ける必要があります。
「選択範囲」→「色域指定」を開きます。

「選択:指定色域」で空の部分をスポイトすると、ざっくり選択することが出来ます。
「許容量」は100~200ほどの間で様子を見ながら設定し、だいたい空の部分が白、それ以外の部分が黒に分かれていれば「OK」を押してください。

ここまでの段階で、Photoshopの画面はこのようになっているかと思います。

雲が選択範囲外になっていたりビルの輪郭がザックリしているので、選択範囲の調整をします。
「選択範囲」→「選択とマスク」を開きます。「クイック選択ツール」で選択範囲の過不足分を調整します。
調整出来たら属性パネルの「出力先」を「新規レイヤー」に設定して「OK」を押します。

これでレイヤーパネルには、写真の元データと空だけのレイヤーが出来たかと思います。

後は空だけのレイヤーを選択し、Camera Rawフィルターで調整してみてください。
こうして出来た物が下の画像です。

青空が際立った事で、より爽やかで好印象な写真になったのではないでしょうか。


別の空の写真と合成する

次は、別の空の写真と合成して空の色を調整したいと思います。
Camera Rawフィルターの調整ではキレイな青空に出来なかった時や、雲のバランスに理想の形があった場合はこちらの方が簡単です。

例えばこちらの写真ですが、Camera Rawフィルターを使うとこのような感じになります。
雲が分厚く上手く調整が出来った為、違和感のある空になってしまいました…

工程としては、途中までは「Camera Rawフィルターで調整する+α」と同じです。
「選択範囲」を使って空とそれ以外の部分を分けます。

1つだけ違うのが、「選択とマスク」パネルで空を選択出来たら、属性パネルの「反転」を押して選択範囲を逆転させます。
こうすることで今度は空以外を選択した状態になりますので、「出力先」を「新規レイヤー」に設定して「OK」を押します。

これでレイヤーパネルには、写真の元データと空以外の画像レイヤーが出来たかと思います。

後は空以外の画像レイヤーの下に新規レイヤーを作り、そこに理想の空の画像を置いてください。

ただ置いただけだと明るさや彩度の違いから違和感を感じてしまう事もあるので、Camera Rawフィルターなどでトーンを合わせる調整を行ってください。
こうして出来た物が下の画像です。

夏らしい青い空と青い海の明るい写真になったのではないでしょうか。


おわりに

いかがでしたでしょうか?
今回お話しした2つの方法を使えば、自然に空の色を変えることが出来ます。
どちらの方法が正解と言うのはないので、自分の編集しやすい方法で試してみてください。

また、今回は使いませんでしたが、Camera Rawフィルターには他にも「トーンカーブ」や「プリセット」など様々な編集機能があります。
興味がある方はぜひそちらも試してみてください!

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

【コピペで使える 】ハンバーガーメニュー 2020! レスポンシブ ナビゲーション ドロワーメニューのサンプルソースと作り方


目次


【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そしてタブレットも含めたレスポンシブの最適化を進めていきます。

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

2019/2/12~15 PIショー出展のお知らせ(dgift)

開催期間中は、dgiftの魅力を体験していただくためのキャンペーンを実施いたしました。 この度は弊社ブースへお立ち寄りいただき誠にありがとうございました。

2019年2月12日(火)~15日(金)、デジマースが運営しているデジタルギフトサービス「dgift」は「第59回プレミアム・インセンティブショー春 2019」に出展します。

開催期間中は「dgift」の魅力を体験していただくためのキャンペーンの実施を予定しています。是非この機会にお立ち寄りください。

会期:2019年2月12日(火)~15日(金)

時間:2月12~14日 10:00~18:00 15日 10:00~16:00

会場:東京ビッグサイト 西3・4ホール

小間番号:西4-T15-03

<dgift(ディーギフト)とは>

全国のコンビニエンスストア商品や高級食材・家電などのプレゼントを、web上で即時付与(即時抽選)できるデジタルギフトサービスです。スマホアプリのインストールの特典や携帯ショップ・家電量販店での来店特典、資料請求のお礼、資料請求などの幅広い用途で利用いただけます。

今回ブースにお越しいただいた際には「販促・集客・マーケティング」という観点から、今話題のデジタルギフトとそれを活用した集客支援ツールをご案内させていただきます。

dgiftのサービス紹介はこちら
https://www.dgift.jp/

タイトルロゴ風 文字デザインをしてみよう vol.2

こんにちは!ユイPです。
今年は年女なので昨年以上に猪突猛進で突っ走っていきたいと思います。よろしくお願いします!

さて、今回のテーマは「文字デザインをしてみよう」です。Vol.2と書いてあるように第二弾です。
前回は白黒文字オンリーで文字作りの基本を紹介しましたが、今回は色をつけて「この2つが出来ればロゴっぽくなる」という効果を紹介していきます。


★使用ソフト:Adobe Illustrator CC 2019


Illustratorでの詳しい基本の文字の作り方はタイトルロゴ風 文字デザインをしてみようの記事で詳しく説明しているのでここでは簡潔に文字のみで説明します。
★更に文字の基礎編⇒文字デザインをしてみよう Vol.0 文字組みの基礎

「テキストツールで文字を打つ」→「選択してアウトラインを作成」→「グループ解除」を行って文字を一文字ずつ動かせる状態にしていればオッケーです。


その① グラデーションをかける

グラデーションはロゴのテッパンですね。ちょっとかけるだけでそれっぽくなると思います。

①まず上の通りにベースとなる文字を準備します。ベースの色は基本的になんでも大丈夫です。

オブジェクト選択ツールで文字を選択→文字の塗りを○のついている部分を押してグラデーションにします。

グラデーションの調整はこのグラデーションパネルで行います。パネルの説明はざっくりですがこんな感じです。

③文字の塗り部分をグラデーションにし、パネルで色などの設定を行ったら、○のついているグラデーションツールでグラデーションを調整していきます。オブジェクトを選択してグラデーションをかけたい方向にマウスをドラッグしていきます。パネルから角度指定でも出来ますが、ドラッグの方がさくっと出来る気がします。そこはお好みで。

文字全体に一気に下方向からグラデーションをかけてみました。こんな感じになります。いちごチョコレートって感じの色合いになりましたね~。

全体に一気にかけるだけでなく、一文字ずつかけるとまた雰囲気が変わってきます。グラデーションツールでグラデーションをかけたい文字を選択すると黄色の○のようにバーが出てくるのでここで色の幅や向きを調整してみてください。

これだと一文字ずつチョコがかかっているみたいになって可愛いですね~。

方向を変えたり色を増やす事でグラデーションの幅は広がってくるので色々と試してみてください!


縁・影をつける

文字に縁、影をつけていきます。単体で使う事もありますが、今回は両方盛りで私がよく使う効果を例に紹介します。

①通常通り文字を用意します。漢字で書くといかついけど平仮名にするとなんかかわいい。
今回は文字を変形および解体した後は、もう一度オブジェクトをグループ化してください。

レイヤーをもう一つ作成して、1のレイヤーの下に引きます。そうしたら文字をコピーして、下のレイヤーに「同じ位置にペースト」します。
上のレイヤーは動かないようにロックをかけておきます。

③アピアランスパネルを開き、右下の「新規線を追加」で線を追加します。これで文字に肌色っぽい縁がつきました。太さや線の形状(線パネルで調整出来ます)はお好みで!

②、③を同じ手順で繰り返して更に太めの枠をつけます。白枠の予定ですが見えやすいようにとりあえず赤にしておきます。

⑤オブジェクトを選択して「効果」>「スタイライズ」>「ドロップシャドウ」を選択します。プレビューを見ながら好きなように影をつけてみてください。

太枠を白に戻して、完成です!

ドロップシャドウを使わなくても、縁を重ねるだけで色んな表現が出来ますね。「スタイライズ」には他にも役立つ効果が色々あるので試してみてください。


「グラデーション」「縁・影」の簡単なやり方2つを紹介しました。
という事で、サンプルとしていくつかロゴを作ってみました。前回の記事で作った際に気に入っていたロゴにも色をつけてみました~。

使っている効果はグラデーション、縁、ドロップシャドウ、光彩、ワープ(アーチ)のみです。
簡単な表現だけでも結構ちゃんとロゴっぽくなっているんじゃないかな?と思います。

こんな感じでお手軽ロゴ、是非作ってみてくださいね!


「文字デザインをしてみよう vol.2」ユイPがお送りいたしました。ずっとやりたかった!ようやく書く事が出来ました~。
Vol.1のタイトルロゴ風 文字デザインをしてみよう、Vol.0の文字デザインをしてみよう Vol.0 文字組みの基礎の記事と合わせてよろしくお願いします!

それでは、みなさまよいバレンタインを!また次回!


<使用させて頂いたフリーフォント>
「チェックポイント★リベンジ」
よく飛ばない鳥 / マルセ / http://marusexijaxs.web.fc2.com/
「マキナス Scrap 5」
もじワク研究 / https://moji-waku.com/index.html

<それ以外のフォント>
モリサワフォント


★ゆるーくつぶやいています デジマースブログ公式Twitter