投稿者: 小松

こんにちは、今週のブログは小松がお届けします。

最近Adobe Fontsに新しく追加された、百千鳥（ももちどり）フォントをご存知ですか？

百千鳥フォントは、シンプルながら和の雰囲気を持つサンセリフ系フォントです。
ゴシックっぽいけど中には独特な手書き感があったりと、独特なバランスを感じます。

また百千鳥フォントは、太さと字幅を自由に調整できるバリアブルフォントで、シーンに応じて「細く上品に」「太く力強く」と自在にデザインを変えられることも特徴です。

たとえば…
太さ【細め】×字幅【細め】 → 和モダンなデザインやエレガントな雰囲気に
太さ【太め】×字幅【太め】 → 看板風のインパクトあるレトロデザインに
など様々デザインに合わせられるのはとても便利ですね。

バリアブルフォントのメリットは、フォントを切り替えることなく、一つのフォントファイルで多様な表現ができることです。
これにより、デザインの自由度が大きく広がります！

喫茶店の看板や昔のお菓子のパッケージなどのレトロ調が大好きな私にとっては、大変刺さるフォントでございました。

Adobe Fontsで使えるので、ぜひ試してみてくださいね！

それではまた次回のブログでお会いしましょうー！

みなさま、新年明けましておめでとうございます。
本年もどうぞよろしくお願いいたします。

今週のブログは小松がお届けします。

2025年も早くも2週間が経過し、ようやく私の体内時計も仕事モードにシフトしてきました。
今回の年末年始は9連休という大型連休でしたが、皆様はいかがお過ごしでしたでしょうか？
ゆっくりと実家で過ごされた方も多かったのではないでしょうか。

そんな私はクリスマスに体調を崩し、新年の幕開けとなる1月1日に39度の高熱を出すという年末年始を過ごしてしまいました。
幸い感染症ではなかったものの、「今年は波乱の年になるかも？」と少し不安になりつつも、むしろこれで厄落としができたと前向きに捉えています。

さて、小松はDACに入社してからもうすぐ1年が経とうとしています。
この1年間、たくさんの学びと発見がありましたが、まだまだ知識や経験を深めたい分野がたくさんあります。
そこで、2025年の目標は「研鑽」にしました。

特に最近は、年末から動画制作の基礎を少しずつ学び始めており、動画制作にも挑戦していきたいと考えています。
WEB制作と組み合わせることで、より魅力的なコンテンツを生み出せるよう、楽しく着実に学んでいきたいなーと思っています。

というわけで、2025年もどうぞよろしくおねがいします！
また次回のブログでお会いしましょうー！

こんにちは、今週のブログは小松がお届けします。
 

ウェブページを開くと必ず目にする「青いリンク」
みなさんはなぜリンクの色が青いのか気になったことはありますか？

今回は「なぜリンクが青いのか？」をお話していこうと思います。

歴史の始まり

青いリンクの起源は1993年まで遡ります。
世界初のグラフィカルウェブブラウザである「Mosaic」で採用された仕様が、その後のウェブブラウザの標準として定着しました。
 

青色が採用された理由

1.視認性の高さ

白い背景に黒字が基本のウェブページにおいて、青色は適度なコントラストを生み出し、リンクの存在を自然な形で見せることができます。

2.信頼感

青色は心理学的に信頼感や安定感を与える色とされています。
銀行や保険会社のロゴに青が多く使われているのも、その理由が多いです。
リンクに青を使うことで、クリックに対する安心感や信頼感を潜在的に与える効果が期待できます。

3.アクセシビリティへの配慮

色覚の多様性を考慮した場合も、青色は比較的認識しやすい色になっています。
 

ビジネスにおける影響

2012年にGoogleが行った実験でリンクの青色を41種類用意して検証したところ、最適な色を選ぶことでクリック率が向上し、年間で約2億ドルもの追加収益を生み出しました。
この実験は、色彩がビジネスに与える影響の大きさを示す代表的な例となっています。
 

まとめ：青いリンクは合理的な選択だった

青いリンクは、視認性、人間心理、アクセシビリティといったさまざまな要素を満たす、とても合理的な選択だったと言えます。

現在のウェブデザインでは、リンクにアンダーラインを付けたり、クリック済みリンクを紫色にするなど、リンクを視覚的に区別するための工夫が進化していますが、基本となる青色が30年以上を経た現在でも使われているなんてびっくりですよね。
 

いかがだったでしょうか？

次にウェブページを見たとき、何気なくクリックしている青いリンクを改めて観察してみてください。
インターネット初期から続く深い歴史を感じられるかもしれませんね。

11月も後半に差し掛かり、暖かくなったり寒くなったり気温の変化に体調が全く追いついていない小松でございます。

さて今回は「黒」についてお話していきたいと思います。

WEBデザインにおいて黒色は欠かせない存在と言っても過言ではないでしょう。
時にはかっこよく、時には上品にオールマイティでとっても重宝されるカラーです。

WEBデザインに「真っ黒」が避けられている理由

そんな黒色ですが、実はWEBデザインで「真っ黒(#000)」は使わない方が良いと言われているのをご存知でしょうか?

代表的な理由は…
目が疲れるからです。

真っ黒は強いコントラストを生み、画面を見ている人にとっては目に負担がかかります。
特にデジタル画面ではバックライトの影響で、真っ黒が「目を痛める」色として感じられることがあります。
これが長時間の閲覧になると、ユーザーにとって「疲れやすい」画面になりやすいのです。

そのほかにも
WEB画面に置くと少し「不自然な黒」に見えてしまうことや、ディスプレイによって見え方が変わってしまうことから真っ黒が避けられています。

見やすさとスタイリッシュさを両立！おすすめの「黒に近い」カラー

真っ黒を避けたいときに使えるおすすめの色には、#111111（オフブラック）や#333333（チャコールグレー）があります。
どちらも黒に近い色ですが、画面上で目に優しく、かつ高級感のある印象を与えてくれます。
これらの色は、白やその他の色ともなじみやすく、コントラストが強すぎないため、ユーザーに優しいデザインになります。

まとめ

WEBデザインで「真っ黒」を避けるべき理由は、ユーザーの目に優しく自然な見た目を実現するためです。

強すぎる黒よりも、やわらかく洗練された黒に近いグレーを選ぶことで、どんな環境でも見やすく、スタイリッシュな印象のデザインを作れます。
少しの違いのように見えてユーザビリティに関わる大切な部分なので意識にしていきたいですね。

もちろん「真っ黒」を使ってはいけない訳ではありません。
見出しや重要なパーツを際立たせる効果もあり、あえて使うことで他の要素とのコントラストが引き立ち、視線を誘導することができます。

黒を使う際は、「デザイン全体の見やすさ」と「メリハリをつけたい部分」のバランスを意識することで、より洗練されたWEBデザインに仕上がります。

黒を効果的に生かしたデザイン…研究のしがいがありそうです。

 

みなさま、こんにちは。

ここ数日でぐっと冷えてきましたね。
今年は秋が短いと聞きましたが、秋がいちばん好きな私にとっては少し寂しい気持ちです。
 
今週のブログは小松がお届けします。
 

みなさまは「ハンバーガーメニュー」をご存知でしょうか？
 
ハンバーガーメニューとは、
スマートフォン版のWEBサイトの上の方にあるアイコンのことで、3本線のシンプルなデザインでメニューを表示するためのボタンとして広く使われており、形がハンバーガーのように見えることが名前の由来となっています。
 
そんなハンバーガーメニューですが、実はハンバーガーメニューにもさまざまなデザインがあります。
 
というわけで今回は、ハンバーガーメニューの種類についてお話ししていこうと思います。
 

1. ドネルメニューアイコン

3本の横線が下に向かって短くなるデザインのアイコンです。
ドネルケバブの肉の層に見えることから名付けられたようです。
 

2. お弁当アイコン

四角「■」が3×3で構成されているデザインで、一般的なハンバーガーアイコンよりも目立つ形状です。
ボタンのように見えるため、押しやすさや視覚的なアピールが必要な場面で採用されることが多いです。
 

3. ミートボールメニューアイコン

3つの小さな丸が横に並んでいるデザインが特徴です。
特にSNSやWebブラウザで設定やオプションメニューを開くときに使われます。
小さく、デザインの邪魔をしないため、控えめな見た目が求められるシーンに向いていると言われています。
 

4. ケバブメニューアイコン

縦に並んだ3つのドットで構成されるアイコンです。
よくAndroidのアプリやGoogle関連のサービスで見かけることが多く、主に「追加オプション」や「詳細メニュー」を開くために使われます。
画面スペースを取らないコンパクトさが特徴です。
 

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

ハンバーガーメニューアイコンは、その形状によってユーザーに与える印象や使い勝手が変わります。
シンプルな「3本線」のハンバーガーアイコンは、特に初心者にも親しみやすいですが、特定の目的に合わせて「ケバブメニュー」や「ミートボールメニュー」を採用することで、より洗練されたデザインを作り出すことができます。
 

それでは、また次回のブログでお会いしましょうー！

みなさん、こんにちは。
今週のブログは小松がお届けします。

最近画像を扱うことが多くなってきたので、先日改めて勉強しました。
というわけで今回はデザインを経験している人なら一度は通ったことのある疑問、「JPEGとPNGの違い」についてご紹介していこうと思います。

JPEG（JPG）とは？

JPEG（Joint Photographic Experts Group）は、1992年に標準化されたこの形式は、デジタル写真の主流となっています。

メリット：
・圧縮率が高くファイルサイズを大幅に削減できるため、ウェブサイトの読み込み速度が向上する
・色数が豊富なため、鮮やかな自然の写真などの複雑な画像の色彩を再現できる
・ほとんどのデバイスやソフトウェアで広くサポートされている

デメリット：
・圧縮を繰り返すと画質が劣化する（非可逆圧縮方式）
・テキストや線画など、シャープな輪郭を持つ画像には適していない
・透過処理ができない

PNGとは？

PNG（Portable Network Graphics）は、1996年に開発された比較的新しい画像形式です。

メリット：
・透明度（アルファチャンネル）を設定することができるため、透過処理ができる
・画質を落とさずに圧縮するため、元画像の鮮明さを保つことができる（可逆圧縮方式）
・テキストや線画などのシャープな輪郭を美しく表現できる

デメリット：
・ファイルサイズが大きくなりがち
→とくに写真などの複雑な画像では、JPEGほど効率的にファイルサイズを小さくできない
・一部の古いソフトウェアでは完全にサポートされていない場合がある

まとめ
どの保存形式にするかの基準は、画像の種類と用途によって変わります。

JPEG→色数が多いもの、写真などのフルカラーの画像データなど
PNG→色数が少ないものや背景透過が必要なもの、イラストやロゴなど

結局のところ
JPEGは写真とかリアルな画像向き、PNGはロゴとかシンプルな画像向きという感じで私は覚えています。
これさえ覚えておけば、もうデザインのプロとまではいきませんが、「どっちの形式で保存しようかな〜」って悩むことは少なくなるはずです。

いかがでしたでしょうか？
少しでも参考になりましたら幸いです。

それでは、また次回のブログでお会いしましょうー！

こんにちは、今週のブログ担当は小松がお届けします。

私が入社してからずっと悩んでいたこと…
それはこのブログのアイコンです。

今までずっとデフォルトのアイコンだった私もこの度デフォルトを卒業となりました。

新しいアイコンはこちらです。

こちらはパーツを組み合わせて似顔絵を作成できるジェネレーターで作成しました。
直感的な操作ができて、絵が得意な方ではない私でも簡単にできました。

そんな素敵なジェネレーターを提供しているのは、

『顔アイコンジェネレーターZ』様

みなさまもぜひいろんな似顔絵を作ってみてくださいね！
それではまた次回お会いしましょう。

こんにちは、今週のブログ担当は小松がお届けします。

今回はChatGPTについてお話していこうと思います。
ここ数年でAIツールが急速に増えてきましたが、その中でも1番有名なのはChatGPTであり、人間と自然な会話ができると言われています。

そんなChatGPTですが、「方言」や「役」になりきって喋ってくれるみたいなので試してみました。

せっかくなのでWEBデザインに関する質問をしてみます。
お題は「フレックスボックスについて大阪のお母さん風に教えて」と聞いてみました。

 

 

いかがでしょうか？
なんだか親しみやすさがあって子供や遊び場に例えたりと内容がわかりやすく感じます。

難しい質問も方言や役を指定することによってわかりやすく教えてくれるかもしれませんね！

AIについて他にも魅力的な話題があれば、またご紹介したいと思います。

こんにちは、今週のブログ担当は小松がお届けします。

昨日、色彩検定の夏季試験が行われました。
ということで今回も「色」についてお話していこうと思います。

皆様はPhotoshopやIllustratorを使っていて、「RGB」や「CMYK」という言葉を目にしたことはありませんか？

今回はその「RGB」や「CMYK」についてのお話です。

●RGBとは？

「Red（赤）」「Green（緑）」「Blue（青）」の頭文字を取ったものです。
この3つは光の3原色と言われ、これらを組み合わせてさまざまな色を作り出します。
色フィルターを当てた光のように、すべての色を合わせると「白」になるという特徴があります。

RGBは光で色を表現する仕組みで、主にモニターやテレビで使われます。

●CMYKとは？

「Cyan（シアン）」「Magenta（マゼンタ）」「Yellow（イエロー）」「Key Plate（黒）」の頭文字を取ったものです。
この4色のうちのCMYは色材の3原色と言われています。
ポスター、パンフレット、雑誌など、紙に印刷する際に使われます。

RGBとは異なり、CMKすべての色を合わせると「黒」になるという特徴がありますが、こちらは理論上の話であり、実際にやってみると完全な黒にはならないため、K（キープレート）という色で補完します。

●まとめ
RGBの方がCMYKよりも色の領域が広く、より多くの色を表現することができます。
そのためCMYKは、RGBと同じ色を全て再現することはできません。

RGB→デジタルデバイスでの表示
CMYK→印刷物の制作物

上記のようにデザインを始める前に、最終的な出力先が「デジタルなのか」「印刷物なのか」を考えることがより繊細で美しい作品を作ることができます。

いかがだったでしょうか？
色の理解を深めることでデザインの幅もさらに広がると思います。
今週のブログがそのきっかけとなれば幸いです。

次回のブログもどうぞお楽しみに！

こんにちは、今週のブログは小松がお届けします。

来月は色彩検定の夏季試験が行われます。

去年のちょうど今頃、色彩検定に向けて勉強をしていたのを思い出し、今回は「色のユニバーサルデザイン」についてお話していこうと思います。

●色のユニバーサルデザインとは？

誰もが見やすい色の使い方を目指すデザインのことです。

全員が同じ色に見えているとは限らず、多様な色覚に配慮し、すべての人に正確な情報が伝わるような工夫をする必要があります。

区別しやすい色の組み合わせを使ったり、色だけでなく形やパターンを利用して情報を伝えたりします。

●色のユニバーサルデザインの実例

黒背景の案内板や電子掲示板の文字色を赤→オレンジまたは白に改善されてきているそうです。
→色覚特性の中で、「赤」が暗く見えてしまい「黒」と区別しづらいため、文字が読みやすくなります。

また、グラフやチャートには色に加えてパターンを使用することにより、色の情報だけではなく模様で区別できるようになります。

また、近年ではカレンダーの日曜日の表示も「オレンジ」寄りの色に変わっているそうです。

他にもピクトグラムの配色や天気予報の分布図など、多くの人に配慮できるような工夫が広がっています。

WEBデザインにおいても、すべてのユーザーにとって快適で使いやすいウェブサイト作りを意識していきたいです。