カラーユニバーサルデザイン

カラーユニバーサルデザインとは、色の見え方が一般と異なる人にも情報がきちんと伝わるよう、色使いに配慮したユニバーサルデザインを指します。

人間の色覚の多様性に配慮し、より多くの人に利用しやすい配色を行った製品や施設・建築物、環境、サービス、情報を提供するという考え方を「カラーユニバーサルデザイン(略称CUD)」と呼びます。

カラーユニバーサルデザインのポイント
1.出来るだけ多くの人に見分けやすい配色を選ぶ。
2.色を見分けにくい人にも情報が伝わるようにする。
3.色の名前を用いたコミュニケーションを可能にする。

フォトショップでデザインしながらシミュレートできます。
シミュレートしたい画像やデータを開いた状態で、ヘッダーメニューにある[表示]⇒[校正設定]にマウスを合わせます。その後、 表示されるリストの中にある「P型(1型)色覚」または「D型(2型)色覚」をクリックするとシミュレートできます。

元に戻したい場合には、[表示]⇒[色の校正]をクリックしてチェックを外します。

データの置換


[新しいファイルをアップロード]をクリックすると画像を差し替える画面に移行します。
新しい画像をアップロードした上で、メディアの置換形式を選んで実行すれば画像の置換が簡単にできます。

illustratorでパターン作成

斜めラインのパターンの作成方法についてです。

スウォッチりライブラリのベーシックラインを活用して作成します。
ベーシックラインを四角のパスで作成、[編集]、[カラーを編集]、[オブジェクトを再配置]を開きます。

[配色オプション]を開き、プリセットの横の配色オプションを開いてデフォルトでは色にロックが掛かっているので、ブラックのチェックを外します。

新規と書いている下の部分をダブルクリックして、好きな色を選びます。
そうするとラインの色が変わります。

できたパターンの角度を好きな角度に調整をします、その上に四角にパスを乗せクリッピングマスクします。

これで斜めラインのパターンの作成ができます。

ページのリンク修正


ページのリンク先がうまく設定されていないと[404 Not Found]の表示が出てしまうので、ページ
が表示されるリンクを貼る。

その際、稀にPCとスマホのURLを分けてコードを書いていることがあるので、書き換えることを忘れず2つとも変える。

これで、リンク先がきちんと表示されるようになります。

これからも頑張ってWebを作成していきたいと思います。

サイトに貼る画像

サイトに貼る画像をAiかPsで作成・加工し保存する際、[書き出し形式]保存したものを貼ると画像の大きさが違ったり画質が荒かったりすることがあります。

[書き出し]⇒[Web用に保存]から保存すると画像の大きさ・画質が荒れずサイトに適した画像を貼ることができます。

また、[Web用に保存]のページでは%単位で画像サイズが簡単に変更できます。

これを知るまでは画像の大きさ・画質に苦戦してました...

もっとWebページ作成頑張ります!

2カラムレイアウト、3カラムレイアウト

2カラムレイアウト、3カラムレイアウトですが、カラム=段組み のことです。
レイアウトには2カラム、3カラム、があります。

4カラム、5カラムもあると「文字ちっちゃ、狭!」となるのであまりありません。
いろんなサイト見ても、今はレスポンシブデザインなので、2カラムレイアウト、3カラムレイアウトがほぼです。

1カラムなんてのもありますが、今はスマホメインなので、1カラムか2カラムが多いのではないでしょうか。
パソコン2カラムで、画像が下に回りこんで直列に並ぶようなイメージです。

しっかりマスターしたいと思います。

東日本大震災10年の話

10年ひと昔といいますが、個人的にはもう10年かという印象です。

10年前は勤務していた新卒から勤務していたコーヒーメーカーで営業をしていて、震災時は大阪で勤務していたので、直接の影響はないだろうと感じていましたが、ペットボトルのキャップを生産している工場が東北だった事で一時ボトルコーヒーが生産出来ないといった事態に陥りました。

対岸の火事かなと思っていましたが、どこかで必ず繋がっているもので、自分自身も災害時に対する備えは普段からしておこうと思ったものでした。

10年経ち、現在はコロナウイルスが世界中に蔓延して、大変な事になってますが、こんな状況下でも自分達が出来る事をしっかりやるって事が使命と実感しております。

災害時にこそ自分が出来る事を見つめなおして、助け合いをしていこうと思いました。

また明日です。

 

 

WEB広告の話(Google広告編②)

3月10日ですね。ゴロがいいので今日はなんの日か調べてみたところ、『砂糖の日』、『ミントの日』、『名古屋コーチンの日』らしいです。

 

あとは『見通しの日』らしいです。

個人的には見通しの日が好きです。また本日は晴れてるので、見通しが良いって思ってしまいます。

 

本日はWEB広告の話Google広告の仕組み編です。

昨日の続きでどんな仕組みで、どんな設定が出来るのかを投稿します。

まずは下記手順で進んでいきます。

 

1.目標を設定

メール、電話問い合わせ件数の目標設定します。

2.広告の掲載地域を指定

広告が表示されるエリアを設定します。

3.メッセージを作成

広告に表示されるテキストを記載します。

4.予算の上限を設定

広告にかけれる費用を設定します。

 

出典元:Google広告公式サイト

https://ads.google.com/intl/ja_jp/home/how-it-works/

 

見たところ、割と広告打つ目的、予算、地域が決まってたらここまでは簡単にすすみそうですよね。

明日以降はこの先に進んでいきます。

また明日です。

WEB広告の話(Google広告編①)

本日はGoogle広告についてです。

Google広告ってよく聞くけど、実際ってどんなものかという投稿と実際どんな仕組みになっているかを投稿して参ります。

 

 

第一回はGoogle広告の概要です。

まずはこちらでご紹介します。

出典元:Google広告公式サイト

https://ads.google.com/intl/ja_jp/home/

ザクっと読んでみて、Google広告は予算に応じて、YouTubeやGoogle関連のアプリに広告が打てるものです。

しかも地域、顧客等細かな設定がが可能です。

ではどんな仕組みでこの細かな設定が出来るのかを明日以降で投稿して参ります。

また明日です。

WEB広告の話(ディスプレイ広告深堀り編③)

本日はディスプレイ広告の2大ネットワーク編です。

昨日までディスプレイ広告のメリット、デメリットでしたが、本日はどのような広告があるかを投稿します。

 

大きく分けて下記の2つです。

①Googleディスプレイネットワーク

 

Googleディスプレイネットワークは、Google関連のWEBサイトに広告を配信できるディスプレイ広告のネットワークで、GDNと呼ばれます。YouTubeやニュースサイト、またはアメブロなどの広告枠に配信が可能です。

②Yahoo!ディスプレイアドネットワーク

 

Yahoo!関連のサイトに広告を掲載できるのが、Yahoo!ディスプレイアドネットワーク(YDN)です。Yahoo! JAPANのほか、Yahooニュース、YahooメールなどYahooの提携サイトに広告を配信できます。

 

出典元:ディスプレイ広告とは?リスティング広告と効果的に使い分けよう

https://drm.ricoh.jp/lab/glossary/g00050.html#:~:text=%E3%83%87%E3%82%A3%E3%82%B9%E3%83%97%E3%83%AC%E3%82%A4%E5%BA%83%E5%91%8A%E3%81%A8%E3%81%AF%E3%80%81WEB,%E5%BA%83%E5%91%8A%E3%81%A8%E3%82%82%E5%91%BC%E3%81%B0%E3%82%8C%E3%81%BE%E3%81%99%E3%80%82

 

よくYoutubeとかで見る広告はGoogle広告、Yahoo!等で見る広告はYahoo!広告打てば、出稿出来ます。

明日以降はその方法を投稿して行きます。

また明日です。