すべてのカテゴリ

Web制作において、必ずと言っていいほど使用される画像素材はデータで保存されます。その際に、データのファイル形式はどれを使っていいのか、使い分けに迷ってしまう事があります。今回は代表的なファイル形式の使い分け方についてご紹介します。２つのデータ形式の違いラスタデータとは、ビットマップ画像と呼ばれていて、画素（ピクセル）と呼ばれる色の付いた升目をタイル状にならべて構成されています。画素（ピクセル）数が多いほど高画質になります。デジタルカメラで撮影された写真などの画像データはラスタデータ（ビットマップ画像）です。 きめ細かな画像表現ができる特徴がありますが、反面ピクセルが増える（高画質になる）分だけデータが大きくなってしまいます。又、拡大・縮小などサイズ変更した場合、点の配置に歪みが生じる為ジャギー（ギザギザ）が出て画像の品質が落ちてしまいます。 主なフォーマット⇒JPG,PNG,GIF,BMPなどベクターデータとは、点、線などの情報を使い計算式によって曲線などを表現したデータ形式になります。特徴は、拡大・縮小を繰り返しても画像が劣化しないこと。また、線の表情が非常に滑らかなのも特徴です。但し、主な拡張子に対応していないことがデメリットになります。写真などの細かい色の表現しにくい為、ロゴやアイコンなどの単純な図形に適しています。主なフォーマット⇒SVG,AI今回のまとめWeb制作において画像形式の使い分け①WebPが使用可能な環境の場合（WordPressなどのCMS）⇒WebP ②写真やグラデーションがある場合⇒JPG ③背景透過の写真、又は写真以外の画像の場合⇒PNG ④アイコ

こんばんは。プラスミーデザインのゆめです。医療・介護・福祉の現場からWebデザイナーへ。「やさしく伝える設計」を軸に活動しています。前回の記事では、ヘッダー画像はページの第一印象を決める重要な要素というお話をしました。今回は実際の制作例をもとに、ヘッダー画像をどのような考え方で設計しているのかを紹介します。今回のヘッダー制作テーマ今回制作したヘッダー画像はこちらです。このサービスは行政書士による介護タクシー開業サポートです。対象となるのは・これから介護タクシー事業を始めたい方・営業許可や手続きが分からない方・開業準備に不安がある方です。そのため今回の設計では「不安を解消すること」を最も重要なポイントにしました。ベネフィット設計「許可が取れない不安をゼロに」ヘッダー上部には「許可が取れない不安をゼロに！」というコピーを配置しています。これはサービスのベネフィットです。開業支援サービスを検討している方は多くの場合、・営業許可が取れるのか分からない・申請手続きが難しそう・何から始めればいいか分からないといった不安を抱えています。そのため最初に「不安が解消されるサービスである」ことを伝えることで、ユーザーの心理的ハードルを下げています。ヘッダー構成の考え方今回のヘッダーは3つの要素で構成しています。① 左：相談シーン（安心感）左側には相談対応している写真を配置しました。これは・専門家に相談できる・サポートがある・安心して話せるという印象を与えるためです。開業支援では「相談できる安心感」が重要になります。そのため、実際の相談シーンをイメージできる写真を使っています。② 中央：サービス内容

こんばんは。プラスミーデザインのゆめです。医療・介護・福祉の現場からWebデザイナーへ。「やさしく伝える設計」を軸に、WEB画像制作をしています。WEBでは、どれだけ良い内容を作ってもクリックされなければ見てもらえません。そのため重要になるのがサムネイル画像です。サムネイルは・ブログ記事・YouTube・note・Webメディア・広告バナーなど、さまざまな場面で使われています。ユーザーは一覧ページで複数のコンテンツを一瞬で比較しているため、サムネイル画像がクリック率を大きく左右します。今回は、クリックされやすいサムネイル画像を作るポイントを解説します。タイトルは短く分かりやすくサムネイルで最も重要なのはタイトルの伝わりやすさです。よくある失敗は・文章が長い・内容が分かりにくい・何の記事か分からないといったケースです。例えば＜NG例＞「ECサイトの商品画像を作るときに知っておきたいデザインのポイント」＜OK例＞「EC画像の作り方」「売れる商品画像のコツ」サムネイルでは一瞬で理解できるタイトルを意識することが大切です。文字は大きくシンプルにするサムネイル画像はスマートフォンで見られることが多いため、・文字が小さい・情報が多すぎると、読まれにくくなります。そのため・重要な言葉だけを入れる・文字を大きくする・情報を絞るといった工夫が必要です。サムネイルは「一目で内容が分かること」が大切です。視線が止まるデザインにするサムネイルは一覧の中で表示されるため、他の画像との差別化が重要になります。例えば・強いコントラストの配色・目立つタイトル・印象的な写真などを使うことで、ユーザーの視線を止め

こんばんは。プラスミーデザインのゆめです。医療・介護・福祉の現場からWebデザイナーへ。「やさしく伝える設計」を軸に活動しています。これまでの記事では、WEB画像の基本的な考え方や、成果につながる画像設計のポイントをお伝えしてきました。今回は、WEBページの第一印象を決める「ヘッダー画像」についてお話します。実は、ユーザーはページを開いてわずか数秒以内に「読むか」「離れるか」を判断しています。その瞬間に大きく影響するのが、ページの最上部にあるヘッダー画像です。ヘッダー画像は「ページの看板」WEBサイトやランディングページのヘッダー画像は、言い換えるとお店の看板のような存在です。例えば実店舗でも、・何のお店か分からない・雰囲気がよく分からない・入りづらい印象こう感じると、入店しないことが多いですよね。WEBページでも同じです。何のページなのか一瞬で理解できるかどうかが重要になります。ヘッダー画像に必要な3つの要素成果につながるヘッダー画像には、共通点があります。それは次の3つです。① 何のページかが一瞬で分かるユーザーはスクロールする前に判断します。そのため、・サービス内容・商品ジャンル・提供価値がすぐ理解できるコピーやビジュアルが必要です。「おしゃれ」よりも「理解できるかどうか」が最優先です。② 誰に向けたものかが伝わるヘッダー画像でターゲットが明確になると、ユーザーは「自分向けだ」と感じます。例えば、・初心者向け・経営者向け・女性向け・専門職向けなど、対象を具体的に示すことで共感が生まれます。ターゲットが見えないと、誰にも刺さらないページになります。③ 読み進める理由を作るヘ

今日は新しく買った冬用の暖かい靴下を履き、寒いけどちょっと足元を見るのが嬉しい朝でした。というどうでもいい私の今日の気持ちですが。もう一つ嬉しいこと。納品が完了しました！喜んで頂けたのでとても嬉しいです😊アウトドア向けのバナーで素敵な風景素材を使いながらの制作で楽しくお仕事ができました。ありがとうございました！制作しているとつい夢中になっていることがよくあります。やっぱりWeb画像を作るのが好きだなあと思いました。バナーやヘッダー、各種Web用の画像。喜んで制作致しますので是非お気軽にお声かけください😊読んでくださりありがとうございました。toma実design

ご覧いただきありがとうございます❕ ピンクという色は女性のイメージを代表する色のひとつだとみなさん思っている方が多いと思います。ですが、最近はジェンダーレス化の方向にあるので、男性でもナチュラルにピンクを使う人が増えてますよね。  サムネイルの話で言うと、ピンクは色々と便利な色ですよね。明るい、薄くすれば高級がある、ショッキングピンクみたいなビビッドな色にすれば目立つ。あと黒と相性が良く便利です。アウトラインなしで文字が読めるっていうのはでかいです。  これが反対色の黄緑とかだったりすると可読性が微妙になってしまいます。 あとピンクは「ジェンダーバイアスを感じる色」の第一位です。女性らしさを強要されていると感じる人もいるようで。長らくピンクが「そうゆう使われ方」をされてきたって事で、それは今でも大体そういう使い方をされてますが、その辺の反動なのではないかと思っています。 ピンクの使われ方は、時代とともにこれから少しずつ変わってくるのではないかと思います。 

初めまして！WebデザイナーのKEIKOです。５月くらいからココナラを始めました。現在はWeb画像制作サービスを出品していますが、今後は少しずつWebデザインやHTML＆CSSコーディングなども出品していけたらなと思っています。バナー広告・ヘッダー・SNS画像などのWeb画像などは下記にて受付中ですので、ぜひチェックしてみてください！ご相談だけでも大丈夫です(^^)お待ちしております！※塾・習い事・スクールなどの教育関係は別途出品サービスがございます。

せんだい演劇工房10-BOXさん発子育てをテーマとしたトライアルシアターの取り組みの一環で、「子育ていろいろシェアリング　育児あれこれ座談会」が開催されます。そのチラシを制作させていただきました。コロナ禍で、当初の開催予定が大きくずれこんだ形となりましたが、少しずつ世間が落ち着いてきた今、また再始動となります。仙台の皆様、ぜひぜひご参加くださいね。▼こちらは動画！私の作ったチラシが、動画背景に使われています。ぜひぜひのぞいてみてくださいね＾＾デザインの仕事をしていると、様々なお仕事の皆様とコラボすることが多いです。デザインに関連する、皆さんの「こんなふうにしたいんだ！」「こういうことがしたい！」を、実現できるデザイナーでありたいと思っています。