投稿者: 小松

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

初めまして
4月中旬に入社した小松です

この場をお借りして簡単な自己紹介をさせていただきます

【前職】
アプリゲームのプレイヤーサポート

チャットサポートでひたすら文字を打っていた影響か、
キーボードや画面を見なくてもある程度の文章をミスなく打てるのが特技になりました

【好きなこと】
マンガ、アニメ

特に○○令嬢系や皇帝皇后系、後宮系のマンガはほとんど読み漁ってます
最近はマンガアプリである程度無料で読めるので、作品が更新される度に最新話を追っています
良い時代になりました

【好きな場所】
板橋区

・魅力的な商店街が多い
・ターミナル駅である池袋から近いためどこを行くにも便利
・区を挙げたイベントが多い
板橋区民なら言わずもがなですね

ちなみに画像は
先々週に撮った石神井川の桜です

仲宿商店街の近くの橋で撮ったのですが、板橋区は桜も楽しめるんです
板橋区の魅力が少しでも伝われば幸いです

WEB制作は職業訓練でのお勉強のみで業務は未経験になりますが、先輩方のスキルをたくさん吸収して成長していきたいです

これからよろしくお願いします！