HTML

HTMLで画像の画質が荒くなる原因と対処法を現役デザイナーが解説【初心者向け】

初心者向けにHTMLで画像の画質が荒くなる原因と対処法について解説しています。各画像ファイル形式やサイズの基本、CSSによる画像の最適化の方法、HTMLによる指定の方法について説明します。不具合の際に参考にしてください。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　調査手法：インターネット調査

HTMLで画像の画質が荒くなる原因と対処法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。

今回は、HTMLに関する内容だね！

どういう内容でしょうか？

画像の画質が荒くなる原因と対処法について詳しく説明していくね！

お願いします！

画像が荒くなる原因は画像形質

画像が荒くなる原因の一つとして、正しいファイルフォーマットが使われていない、というのが大きな原因であることが考えられます。以下に現在画像で使える主なファイルフォーマットとメリット・デメリットを示します。

JPEG、PNG-24

メリット：1670万色の色が使い分けられるので、風景写真などに最適
デメリット：色があまり使われていないものや、イラストなどはにじんだように見えてしまう。また、画像の拡大・縮小によって画像が荒くなる。透過性のある画像は作成できない

GIF、PNG-8

メリット：イラストなどの色をあまり使用しないもの向き。ファイルサイズが軽い　GIFは簡単なアニメーション動画が作れる
デメリット：色が最大で256色しか使えないので、画像の保存には向いていない

PNG-32

メリット：透明や半透明を扱うことができるので、いろんなデザインに向いている
デメリット：画像が重くなりがちなので、大きなサイズの画像には向いていない

画像サイズも原因の1つ

そして、次に考えらえる原因が画像サイズです。実際に表示しているブラウザの幅や高さ指定より、実際の画像サイズのほうが小さいと、画像は荒くなってしまいます。また、スマホの場合、Retinaディスプレイでは表示サイズ通りの画像を配置すると画像が荒くなってしまいます。

とはいえ、大きすぎる画像を載せてしまうのはサイトを重くする原因となりますので厳禁です。

サイトに載せる画像の大きさの目安として

pc：幅1980pxを超えない程度
スマホ：幅750px～1000px程度（ブラウザ幅の2倍くらい）

に作成するのがいいでしょう。

[PR] Webデザインで副業する方法とは

画像の最適化

cssで画像のサイズを最適化する方法があります。

img {
  max-width: 100%;
  height: auto;
}

と書いておくことで、少し大きめの画像を使用しても親要素の100%は超えないようになります。これで、少しだけ大きめの画像を用意しても画像が要素からはみ出ることはありません。

HTMLで指定できること

また、HTMLに幅と高さを指定しておくことで、画像が変に引き延ばされて荒くなってしまうことを防ぐこともできます。

<img src="/img/hoge.jpg" alt="" width="200px" height="150px">

このように、画像を同じ大きさのwidth（幅）と高さ（height）を指定してあげることもできます。

画像が荒くなる原因と対処法

画像が荒くなってしまう大きな原因は

正しい拡張子で画像をフォーマットしているか
表示されるブラウザ幅より小さいサイズの画像を使用していないか

で解決される場合がほとんどです。画像がにじんできれいに出ない…と悩んだら、まずこの二つを見直してみるのがいいでしょう。

監修してくれたメンター

メンター増田直子

40歳直前までHTMLの存在すら知らなかったのですが、現在はWordPressを中心としたwebデザイン/コーディングをしているフリーランサーです。

趣味はスキューバーダイビング・年間3度は海のある国内外へ旅行してます。

内容分かりやすくて良かったです！

ゆかりちゃんも分からないことがあったら質問してね！

分かりました。ありがとうございます！

TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

HTMLでiframeを使う方法【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。今回は、HTMLでiframeタグを使う方法について解説します。...

HTML

HTMLでよく使う数学記号を現役デザイナーが解説【初心者向け】

HTMLでよく使う数学記号について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそも、HTML...

HTML

HTMLのフォントサイズで最大値・最小値を指定する方法を現役エンジニアが解説【初心者向け】

HTMLのフォントサイズで最大値・最小値を指定する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します...

HTML

jQueryでHTMLの要素を削除する方法を現役デザイナーが解説【初心者向け】

jQueryでHTMLの要素を削除する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そ...

HTML

サイトの印象を変えたい！HTMLで動画を埋め込みする方法【初心者向け】

今回は、HTMLで動画を埋め込みする方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。サイトのト...

HTML

Expressを使ってHTMLを表示する方法を現役エンジニアが解説【初心者向け】

Expressを使ってHTMLを表示する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...

HTML

あわせてよく読まれている記事

「スキマ時間で稼げる副業はないかな…？」「どうせなら在宅でできる副業はないかな…？」「スキルを身につけながら稼ぐことはできないかな…？」この記事では、在宅でできるおすすめの副業20選を紹介し、選び方、副業をする上での注意点まで解説しています。今の会社の収入だけでは満足できていない人会社に出勤するのが無駄だと思っている人そんな人に向けて書きました。この記事を最後まで読めば、あなたにぴったりの副業が見つかるでしょう。目次画像が荒くなる原因は画像形質画像サイズも原因の1つ画像の最適化HTMLで指定できること画像が荒くなる原因と対処法監修してくれたメンター副業で特におすすめなのはIT系の副業です。習得に時間と労力はかかるが、しっかり力をつければ安定して稼ぐことができます。プログラミングは今後必要とされるスキルですので、副業を機会に始めてみるとよいでしょう。難しい印象がありますが、意外と楽しく感じる人も多いので、まずはIT系の副業について勉強してみるのがおすすめです。プログラマー Webサイト制作 Webデザインプログラミングで副業したい人向けに、未経験から副業プログラミングで稼ぐ方法を解説した記事もあります。ぜひご覧ください。 1 在宅でできる副業20選在宅でできる副業にはどのようなものがあるのでしょうか。現在人気の副業を中心に、それぞれの特徴をまとめました。また、スキマ時間で毎月一定収入を稼ぎたいと考えている方向けに、「現実的に副業の範囲で5万円稼げるのか」という点についても説明しています。 1.1 Webライティング Webライティングは、クライアントが指定した内容やテーマに沿って、記事を執筆する仕事です。 Webメディアをはじめとする、様々な媒体でニーズがあり、ブログや商品紹介ページの作成、最近ではYouTubeの台本などの仕事もあります。 Webでの検索は今後も増加していく一方ですので、圧倒的に将来性がある副業だと言えるでしょう。また、時間の確保さえできれば、毎月5万円を安定的に稼ぐことが可能です。長期間継続し、文字単価を上げることができればより少ない時間で収入を得られるようになります。向いている人継続的にスキルアップし、専門性を高めていける人記事を書くために多くのWebサイトや資料を読み込むため、情報収集が苦にならない人様々な分野に興味を持つことができる人タイピングに自信がある人報酬体系文字単価に、納品した記事の文字数を掛け合わせて計算する 1文字0.5円〜3円、1件あたり2000文字〜10000文字が相場成果報酬型のため、案件を多く受けることができればその分収入アップにつながるクラウドソーシングなどのサイトを利用すれば、案件を受注し納品することで即収入が発生メリット日本語の読み書きができれば、特別なスキルがいらない本業にも通じる文章作成能力が身につくデメリットライバルが多く、案件が取りづらい可能性がある案件が取れたとしても最初のうちは低単価で受注することも多くなる 1.2 ブログ自分自身で開設したブログから収益を得る仕事です。ただし、記事を更新するだけでは収益が発生しません。主に記事に外部企業の商品広告を貼り、そこから商品を購入したユーザーがいる場合に手数料が受け取れる「アフィエイト」と、Googleのバナー広告を掲載し記事がクリックされると報酬が発生する「Google アドセンス」という2つの方法があります。 Web広告の市場規模は年々拡大しているため、今後もニーズが増え続けていくでしょう。しかし、ブログアフィリエイターの30％以上が、ブログからの収入を得られていません。月5万円を稼ぐとなると、上位20％に入る必要があるため、安定的に稼ぐためのハードルはかなり高いと言えるでしょう。参考：特定非営利活動法人　アフィリエイトマーケティング協会　「アフィリエイトに関する市場調査　2020年向いている人収益化するまで記事更新を継続できる人「これだけは他の人に負けない」といった特定の分野に精通している人報酬体系アフリエイトの場合、広告を通して商品を1つ購入した場合に、商品価格の数％または一定額が支払われる報酬額は商品ごとに異なり、1件あたり100円〜数千円アドセンスの場合、1クリック30〜40円、PV数次第で収益が変わる記事作成後、検索に反映されるまで3ヶ月ほどかかることがほとんどのため、収益化までは少し時間がかかるメリット P V数を増やす過程で、記事のライティングスキルや集客スキルが身につく一度稼げるブログを作ってしまえば、何もしなくても広告収入が発生するため不労所得を得ることができるデメリット競争が激しく収益化するまでに時間がかかる 1.3 プログラマープログラミング言語を用いて、様々なシステムやアプリケーションを作成したり、動かしたりする仕事です。基幹システムのサーバー構築や、既存システムの開発やテストといった業務内容があります。2018年の時点で、プログラマーのようなIT人材は約20万人以上不足となっており、2025年ではIT人材は36万人の不足と試算されています。金融や家電、自動車など様々な分野においてI Tの活用が推進されていることも追い風になっており、かなり将来性がある職業だといえるでしょう。参考：経済産業省　2019年　I T人材需給に関する調査 1案件あたりの単価が高く、スキルが身につけば短い時間で納品まで完了できますので毎月5万を安定して稼ぐことは可能でしょう。場合によっては1案件で数十万円稼ぐこともできるのがプログラマーの特徴です。ただし、高額な案件を獲得するには、それなりの経験が求められます。企業で3年以上の実務経験と向上心が必要になりますが、満たしていれば時給4,000円以上も視野に入るでしょう。向いている人プログラミングに必要な知識は日々アップデートされているため、常に新しいことを学んで行ける人向上心があり、前向きに取り組める人本業でプログラミングに携わっている人報酬体系プロジェクトごとに異なり、1案件あたりの単価は5〜10万円以上になることが多い高い技術が必要とされるアプリケーション作成の場合には30万円以上となることもある知識を得るために一定時間が必要とされるため、最低3ヶ月は収益が発生しない可能性が高いメリットプログラミング言語は一度覚えてしまえば様々な分野に応用可能なため、手に職をつけることができるニーズが高く、案件に困ることがない一般的にスキル習得難易度が高いと思われているが地道に継続すれば未経験からも習得できるデメリット知識を取得するまでには一定時間を確保する必要がある案件を獲得するには企業で数年の就業経験が必要関連記事：【副業】プログラミング未経験から稼ぐ方法を徹底解説 1.4 Webサイト制作ホームページやLP（ランディングページ）などのWebサイト制作をする仕事です。主にプログラミング言語を用いてコーディングをすることがメインの業務となります。現在、企業活動を行うにあたってホームページの設置は必須といえます。ホームページからの集客を重視している企業も多くなってきていますので、今後も必要とされ続ける職種です。スキルアップのための地道な努力さえできれば、初心者であっても毎月5万を継続して稼ぐことは可能です。後述するWebデザインとのスキルのかけ算で単価を上げることも可能です。案件獲得の競争が激しいという一面はありますが、ポートフォリオ作る、低単価でも実績を積み重ねる、などの工夫をすれば月5万の収益を達成できるでしょう。向いている人必要な知識が日々アップデートされていくため、常に新しいことを学ぶことができる人報酬体系クラウドソーシングから受注する場合は、1ページあたり5000円〜が相場 Word Pressのテーマ制作やコーポレートサイト全体の設計などをする場合は10万円以上になる場合も多い知識を得るために一定時間が必要とされるため、最低3ヶ月は収益が発生しない可能性が高いメリットアプリケーション制作やシステム構築を行う場合と比べてWeb制作に必要なプログラミング知識は少なくなっているため、学習を始めて収益化するまでのハードルはやや低い YouTubeの無料教材を利用したり、プログラミングスクールを利用したりすることで効率よく学べる環境があるデメリットクラウドソーシングなどのサイトでは案件数に対して応募者が多く、競争が激しくなる可能性が高い関連記事：【副業】プログラミング未経験から稼ぐ方法を徹底解説 1.5 Webデザイン Web上に表示されるページの見た目に関する制作を行う仕事です。 Webサービスや広告用LP（ランディングページ）の作成など業務は幅広く、クライアントの依頼を受けて、使い勝手の良い魅力あるページ構成やデザインを考えることがメインの業務となります。自社の魅力を世間によりよく発信するために、Webサイトにデザイン性を重視する企業が増えているため需要は高まってきているといえるでしょう。スキルアップのための地道な努力さえできれば、初心者であっても毎月5万を継続して稼ぐことは可能です。ポートフォリオを作る、低単価でも実績を積み重ねるなどの工夫をすれば月5万の収益を達成できます。先述したWebサイト制作とのスキルのかけ算で単価を上げることも可能です。向いている人新しい技術を吸収することに喜びを見出せる人デザイン以外の幅広い業務をすることに抵抗がない人報酬体系クライアントにより異なり、1案件数千円〜数万円と幅広い企業向けの場合単価が高く10万円以上の案件も多くなる知識を得るために一定時間が必要とされるため、最低3ヶ月は収益が発生しない可能性が高いメリット Web制作に必要なスキル全般が身につくデザインに関して顧客との折衝・調整を行うことも多く、コミュニケーション能力が身につくプログラミングやUI・UXデザインに関するスキルも身につくため、副業から本業へのシフトチェンジも視野に入れつつ、仕事に取り組むことができるデメリット仕事の依頼を受けることができるレベルに達するまで、一定の学習時間を必要とする関連記事：【副業】プログラミング未経験から稼ぐ方法を徹底解説 1.6 イラスト制作ロゴ、名刺、アイコン、キャラクターなどのデザインをする仕事です。クライアントからコンセプトや完成イメージの指示を受け、デザインをしていきます。LINEスタンプやキャラクターデザイン、図解やTwitterのアイコンなど、様々な分野でイラストが必要とされており、今後もニーズは拡大していくでしょう。初心者でスキルやセンスがない場合、案件が獲得できず1ヶ月の売り上げが数千円で終わってしまうことも多いでしょう。スキルがあっても案件が単発で終わってしまうことも多いため、常に営業・集客をしていかなければ継続して収益を上げることは難しいのではないでしょうか。向いている人自分のデザインスキルやセンスに自信がある人趣味として絵を描いたりデザインすることが好きな人報酬体系 1案件数百円〜数千円とクライアントにより稼げる金額は幅広い企業向け案件の場合単価が高くなるスキルさえあればすぐに稼ぐことができるが、1から始める場合やセンスがあまりないと感じる場合、収益発生までは数ヶ月〜1年以上かかるメリット案件が多数あるため、自分にあった案件を見つけやすいデメリット案件が獲得できるかどうかが各個人のスキルやセンスに左右されやすい良い品質で納品するために、専用のソフトウェアや機器を用意する等、初期投資にある程度の費用がかかる 1.7 ネットショップネット上に店舗を開き、商品を販売する仕事です。ネットショッピングの市場規模は年々拡大しており、将来性は高いといえます。参考：経済産業省　　電子商取引に関する市場調査の結果継続して売り上げをあげるためには、商品ラインナップや価格など、他の店舗と比べた優位性をアピールすることが必要になってきますが、大手と比べた場合、仕入れの面で不利になることも多いため、差別化をし選んでもらうショップにするためにはかなりの努力が必要です。全くの未経験から始めた場合、月5万というのはかなり高いハードルとなるでしょう。向いている人普段からネットショッピングをよく利用している人好きな商品ジャンルがある人 SNSのフォロワーがすでに多い人報酬体系商品の売り上げから仕入れにかかった費用を差し引いた分が利益となる安く仕入れることができる先を確保できていれば、利益を出しやすい商品がすぐに売れるとは限らないため、最低3ヶ月は売り上げが入ってこない可能性があるメリット実店舗と異なり、人件費を極力抑えて物品の販売をすることができるプログラミングの知識がなくても店舗ページを開くことができるプラットフォームも充実しているハンドメイド作品を販売し固定のファンを獲得することができれば継続した売り上げを見込めるデメリット数ある他のショップと差別化をすることが難しく、SNSなども使って集客を行わなければ売り上げが見込めない 1.8 カスタマーサポート企業へのお客様からの問い合わせに対して、メールやチャット、電話で対応をする仕事です。稼働時間の確保さえできれば、安定した金額を毎月稼ぐことができるといえるでしょう。向いている人丁寧な顧客対応が求められるため、飲食店などの接客業やコールセンターでの勤務経験がある人報酬体系時給制となることが多く、1時間あたり1,000円〜1,500円が相場働いた分だけ稼げるので、比較的早く収入を得ることができるメリットマニュアルに沿って対応をする形になるため、特別なスキルがなくても始めることができるデメリット契約上毎週一定時間働くことが求められるクレーム対応をする場合、ストレスが溜まりやすい 1.9 データ入力・文字起こしエクセルやワードにデータを入力したり、動画や音声の内容を聞き会話内容を文字にして書き起こす仕事です。企業内で使用する顧客リスト作成やプレゼン資料の作成、YouTubeの字幕作成といった作業があります。 1件あたりの単価が低いため月5万を稼ごうとすると、相当な時間を費やす必要が出てきます。初心者でも手が出しやすい分、スキルアップが案件の獲得や単価アップに繋がりにくいため、副業として取り組む場合一定金額で頭打ちとなる可能性が高いです。月5万稼ぐのはなかなか難しいといえるでしょう。向いている人淡々と作業をするのが好きな人タイピングのスピードに自信のある人事務職での勤務経験がある人報酬体系 1件あたり数百円〜数千円クラウドソーシングサイトでよく用いられる「タスク形式」の場合、1件入力するごとに数十円入力件数や文字数が多くなればなるほど、稼げる金額は増える作業をした分だけ収益に反映するため、比較的早く収入を得ることができるメリット特別なスキルが不要で、仕事を始めるハードルが低いデメリット 1件あたりの単価が低く、時給換算した収入が少なくなりやすい 1.10 コンサルティング自分が詳しい専門の分野で顧客の相談や指導をする仕事です。主な業務としてはクライアントの悩みを解決することになります。人の数だけ悩みがあると言われますので、需要は無くならない仕事だといえます。コンサルタントとしての実力があればリピーターを獲得できるため、月5万円を稼ぐことは容易です。しかし、スキルに自信がない場合や中途半端なスキルしか持っていない場合、顧客獲得に苦労する可能性が高いため、安定して稼ぐことは難しいでしょう。向いている人既に本業を通じて専門的な知見を持っている人結果にコミットするプロ意識の高い人報酬体系相談時間やコンサルティング後の業績など結果に対して、自身で設定した報酬を受け取るメリット初期費用が不要で、今までの経験や知識を生かすことができる単価が高い可能性があるデメリット本業を通じた人脈形成やSNS・ブログなどを用いた集客、ブランディングができなければ案件が獲得できない 1.11 Webマーケティング Webサービスを用いて企業の業務支援や売り上げアップのコンサルティングをする仕事です。SNSの運用代行や広告・メルマガ配信代行、SEO対策などがメインの業務となります。実力次第で稼げる金額が変わるため、人によって月5万円を稼ぐ難易度は異なりますが、これからWebマーケティングの勉強を始める人にとってはかなりハードルが高いといえるでしょう。向いている人自身でブログを運営し集客に成功している人本業でWeb広告営業に携わっている人本業でWebマーケティングに携わっている人報酬体系クライアントとの契約条件により異なる一般的には成果報酬・月額支払い・一括支払いのいずれかで契約するメリット Webサービスを使って稼ぐスキルを磨くことができるデメリット基本的に結果にコミットできる実力が必要となるため、案件を獲得するまでのハードルが高い 1.12 動画編集あらかじめ撮影された動画を見やすくするために、カット作業やテロップ挿入をする仕事です。企業のプロモーション動画やYouTube、ウェディングムービーなど様々な分野で動画編集のニーズは高まっています。高いスキルは必要とされないため、月5万円程度であれば比較的短期間で稼げる可能性は高いです。ただし、その分ライバルも多く今後案件が獲得しづらくなる可能性は高いでしょう。向いている人細かい作業をするのが苦にならない人報酬体系 1件あたり5,000円〜数万円で、企業向け案件の場合単価が高くなるクラウドソーシングサイトでの募集が多いため、即収入につながりやすいメリット自分自身でYouTubeやプレゼン動画を作る際に身につけたスキルが応用できる一定レベルのスキル取得までにプログラミングなどと比べて時間がかからないデメリット動画制作をするためのパソコンやソフトウェアに初期投資が必要 1.13 広告動画制作映像・写真・イラストといった素材を加工・効果付けをして動画を作る仕事です。動画クリエイターと言われることもあります。企業向けの動画広告作成については市場が拡大しており、将来性がある分野となっています。参考：サイバーエージェント　2020年国内動画広告の市場調査動画制作の経験があれば、広告運用等も合わせて依頼されることもあるため、1件あたりの単価も高くなりやすく、月5万円は達成可能といえます。ただし、スキルがない状態では案件獲得が難しく収益化しづらいでしょう。向いている人動画制作に携わったことがある人動画編集で一定の売り上げを上げている人報酬体系 1件あたり数万円〜数十万円企業向けの案件については単価が高い傾向にあるメリット汎用性の高い、本格的な動画制作のスキルを身につけることができるデメリット動画制作をするためのパソコンやソフトウェアに初期投資が必要スキルを身につけるまでに時間がかかる 1.14 写真撮影写真販売は、自分で撮影した写真を、ネットショップやストックフォトサービスで売って収入を得る仕事です。プロのカメラマンであれば別ですが、素人が副業として行う場合、売れ行きの良い写真を狙って撮るのはかなり難しく、安定的な収入を得ることは期待できないでしょう。向いている人カメラが趣味の人日頃からよく写真を撮る人報酬体系 1枚数百円〜数千円で販売するのが一般的ストックフォトサービスを使うと、販売価格から40～60％ほどの手数料が差し引かれるメリット趣味を仕事にできる始めるためのコストがほとんどかからないデメリット売れる写真を撮るためには専門的な学習とセンスが必要とされる 1.15 ナレーション企業の広告やアプリゲームに使用されるナレーションを提供する仕事です。 1件あたりの単価が低いだけではなく、募集されている案件の数も多いとはいえないため、月5万円を稼ぐことはなかなか難しいでしょう。向いている人声に自信がある人声優系の学校に通っていた、声優の仕事経験がある人報酬体系 1件あたり数百円〜数千円主にクラウドソーシングサイトやスキル販売サイトで募集しているメリット趣味を仕事にできるデメリット 1件あたりの単価が低い編集や録音をするための機材などの初期投資が必要 1.16 オンラインの家庭教師英語やダイエット、ビジネスなど自分の得意なことをオンラインで教える仕事です。副業として行う場合使える時間が限られてきますので、時間単価を上げることが必須になります。スキルがあれば時間あたりの単価を高く設定することも可能です。しかし、人気や実力がなければ顧客数に影響してしまうため、単価を上げることが容易ではなく、月5万まで稼ぐのは難しいといえます。また、参入障壁が低いのでライバルも多いでしょう。向いている人人に教えることが好きな人報酬体系スキル販売サイトで、1時間当たりの料金を設定し募集することが多い 1時間500円〜数千円程度メリット販売できるプラットフォームが多いデメリット時間を切り売りするのでスケジュール調整が難しい参入障壁が低くライバルが多い 1.17 Twitterの懸賞 Twitter懸賞とは、Twitterのアカウントを利用して応募できる懸賞・キャンペーンのことです。後日当選が発表される形式の懸賞の場合、フォロワー数やツイート・プロフィール内容に注意を払うことで当選確率を上げることができます。しかし通常の懸賞と同様、運の要素が強いため月5万を安定的に稼ぐことは期待できないでしょう。向いている人毎日Twitterを使っている人報酬体系 1回の抽選ごとに商品または現金が当たるメリット主催者が発信したツイートをリツイートするだけなので、ごく短時間で参加できるデメリット転用可能なスキルが全く身につかない見返りの有無が確率に左右される 1.18 フリマアプリフリマアプリで不用品を販売して収入を得る方法です。メルカリをはじめとするフリマアプリは多数リリースされており、ユーザー数も多いため、売るものがあれば即収入につながります。特にブランド品などは高く売れやすいため月5万円を稼ぐことは可能です。しかし、売るものがなくなった時点で出品ができませんので継続的に収入を得ることができないでしょう。向いている人自宅に物がたくさんある人報酬体系アプリを使用する場合、商品売上金額から、1商品販売するごとにかかる10％程度の手数料を差し引いた金額が収益となる即金性が高いメリット既に自宅にあるものを売るためコストがかからず収益を上げやすいデメリット一時的にしか稼ぐことができない転用可能なスキルが全く身につかない 1.19 せどり・転売ネットショップやリサイクルショップから安く商品を仕入れて、仕入れ額よりも高く販売することで差額を利益として得る仕事です。せどりには様々な方法があり、楽天ポイントを利用したり海外から輸入したりする方法などがあります。仕入れ商品のリサーチから梱包、販売まで全て一人で行うため仕組み化することができれば短時間で月5万円を稼ぐことはできます。ただし、価格差が取れる商品を見つけ出すまで時間がかかることも多く、競争相手も多いため、軌道に乗せるまでは時間がかかるでしょう。向いている人特定分野の商品に詳しい人流行に敏感な人報酬体系仕入額と販売価格の差が利益となる出品手数料や送料を考慮して価格設定をする必要があるメリット仕組みがシンプルな商売なので、安く仕入れることができれば特別なスキルがなくても始めることができるデメリットプラットフォームごとの転売規制によって売れる商品が変わる可能性があるブランド品の偽物販売に関わってしまうリスクがある 1.20 ポイントサイトサイト内の特定の広告をクリックして商品購入や会員登録をすることで、報酬を得ることができます。副収入がある男性会社員の22.3%の収入源は、「ポイント・アンケートサイト」で58.1%と最多となっており人気の仕事です。参考：新生銀行　2019年サラリーマンのお小遣い調査月5万円を稼ぐことは十分可能ですが、一度きりの案件も多いため継続して稼ぐことはできないでしょう。向いている人コツコツと単純作業に取り組める人様々な企業に個人情報を提供することに抵抗がない人報酬体系広告ごとに決められた達成条件を満たすと収益発生ポイントが貯まったら電子マネーや現金に交換可能なため即金性が高いメリットクレジットカード作成や口座開設などの高額案件に取り組めば、短期間で一定の金額を稼ぐことができる特別なスキルがなくても始めることができるデメリット誰でもできる仕事のためスキルが全く身につかない 2 在宅でできる副業のメリット・デメリット在宅でできる副業にはメリットだけではなくデメリットもあります。事前に理解しておくことで、自分に合った副業を見つけることができるでしょう。 2.1 メリット在宅でできる副業のメリットは3つあります。それぞれ詳しく説明します。 2.1.1 メリット1　仕事内容や付き合う人を選べる副業で稼ぐためには、自分自身の得意分野を生かして仕事をすることが重要です。苦手なことには時間をかけず、得意なことに集中することで限られた短い時間の中で成果を上げられます。会社で働く場合と異なり、取り組む仕事については自ら取捨選択する姿勢が大切です。また付き合う人を選ぶことができますので、人間関係で余計なストレスを抱えることも少なくて済みます。 2.1.2 メリット2　本業以外のスキルが身につく副業に取り組む過程で、本業以外の実用的なスキルを身につけることができます。副業にもよりますが、成果報酬として1件あたりの対価が設定されていることがほとんどのため、必然的にスキルを身につけることになります。対価をもらいながら学ぶことができますので、学習のアウトプットの場としても最適です。会社に頼らず自力で稼ぐ力を身につけたい、独立しても通用するスキルが欲しい、という人にとって副業は有効な手段となるでしょう。 2.1.3 メリット3　時間と場所に縛られず仕事ができるスマホやPCが1台あれば、基本的に時間や場所に関係なく作業ができます。通勤時間がないのは、精神的にも体力的にも楽だと感じる人は多いのではないでしょうか。また、通勤時間がなくなることで空いた時間やスキマ時間で作業を進めることもできるためより効率的に稼ぐことが可能です。 2.2 デメリット在宅でできる副業のデメリットは3つあります。 2.2.1 デメリット1　自己管理力が必要体調や納期管理、営業や案件の管理など基本的には全ての作業を一人で行う必要があります。無理をして体調を崩してしまったり、急なトラブルが発生して納期に間に合わないという事態が発生した場合、各方面に迷惑をかけることになります。基本的に余裕を持ってスケジュールを組み、仕事に取り組むことが重要です。 2.2.2 デメリット2　孤独感を感じることが多い仕事の性質上、一人で作業する時間が多いため、孤独感を感じることが多くなるでしょう。一人で作業をするのが苦手で、和気あいあいと仕事をしたい人にとっては厳しいかもしれません。 2.2.3 デメリット3　トラブルに巻き込まれる可能性がある仕事の選び方次第では、トラブルに巻き込まれてしまう可能性があります。副業はあくまで自己責任で行うため、万が一トラブルが発生した場合も自分自身で全て対処する必要があります。特に、「簡単・高収入」を謳った副業詐欺には注意しましょう。稼ぐどころか、高額な教材を買わされてしまったり、気付かない間に犯罪に加担してしまう可能性もあります。仕事を受ける場合には依頼先の情報や業務内容を慎重に確認し、問題ないか見極める力が必要です。 [PR] Webデザインで副業する方法とは3 在宅でできる副業の選び方数ある副業の中でどの副業を選ぶのが良いのか、選び方についてまとめました。 3.1 目的に合わせて選ぶなぜ副業をするのか、副業に対して何を求めているのかを明確にして取り組むことで効率よく稼ぐことができます。以下のように目的に合わせて選ぶことが有効です。「短期間で一定金額を稼ぎたい」：即金性の高いもの「無理なく空いた時間を有効活用したい」：作業負担が少なく手軽にできるもの「本業で足りない生活費の確保」：1ヶ月に稼げる金額が明確なもの「将来の独立・起業のためスキルアップしたい」：汎用性の高いスキルが身につくもの 3.2 最初はリスクの小さい副業を選ぶ副業を始める際、元手がかからないものを選ぶことは重要です。特に本業と異なる分野の仕事に取り組む場合、自分にあった仕事かどうかはスタートしてみるまでわからないことが多いです。もし自分に合わないと判断した時に、コストをかけず始めていればすぐにやめて違う仕事をするという選択ができます。初期投資の額が大きいと、投資額を回収できなくなる可能性も高いです。稼ぐために始めた副業で収益を上げられなかったり、負債を抱えてしまったりすると、精神的な負担が大きくなり本業にも悪影響が出てしまいます。プログラマーやWeb制作、WebデザイナーといったIT系の副業であれば、いずれも初期費用を抑えて低コストで始めることができます。 3.3 自分スキルになるものはおすすめどの副業が良いか迷った時には、自分自身にスキルが身につく副業を選ぶのがおすすめです。時給で働く場合やスキルが身につかない副業を続けると、時間の切り売りをするばかりで、一時的には稼げるかもしれませんが、将来的な収入アップは望めません。副業でスキルアップができると、より高単価の案件を受注することで収入を上げていくことができます。また、副業に取り組む中で自分の可能性に気づき、本業での成果につながったり、転職をするきっかけとなったりすることもあります。スキルを身につけることができる副業としては、プログラマーやWeb制作、WebデザイナーといったIT系の副業がおすすめです。今後も需要が高い分野ですので、一度スキルを身につければ再現性高く稼ぐことができるでしょう。 4 在宅で副業する際の注意点副業をする上では、法律や税金の知識が欠かせません。「知らなかった」では済まされないケースがほとんどですので、事前に学んでおきましょう。また、無用なトラブルを避ける方法についても解説します。 4.1 法律法律は特に重要です。違反すると罰金が発生したり、犯罪者となってしまう可能性もあるので、最低限は理解しておきましょう。ここでは、副業を検討する方が知っておくべき法律を4つ厳選して紹介します。 4.1.1 特定商取引法特定商取引法とは、事業者による悪質・違法な勧誘行為などを防止し、消費者を守るために作られた法律です。特定商取引法は以下を対象としているため、インターネットでの物品販売なども対象となっています。訪問販売通信販売電話勧誘販売連鎖販売取引特定継続的役務提供業務提供誘引販売取引訪問購入違反した場合、罰則や行政処分の対象となります。特に副業を行う場合は以下の点について、違反行為がないよう十分注意しましょう。事業者の名称、住所、電話番号、販売価格、送料、代金支払い方法、支払い時期などについて明記する返品の可否・返品の条件・返品にかかる送料の負担について明記する（返品特約瑕疵担保責任) 参考：特定商取引法ガイド 4.1.2 電子契約法電子契約法は電子消費者契約法とも呼ばれる、電子商取引における消費者の救済措置について定めた法律です。インターネットでの契約行為は、郵送不要で書面がなくても完結するため利便性が高く副業をする上でも頻繁に行われます。その反面、トラブルが起きやすいのも事実です。以下に電子契約法の要点をまとめましたので、しっかり把握しておきましょう。申し込み内容を消費者が最終確認できる画面を用意するなどの措置を事業者側がとっていなかった場合、消費者側の操作ミスによる誤った申し込みは無効となる →例えば、顧客がネット通販の注文時に数量を誤入力し、多く注文してしまった場合でも、商品名や個数などを顧客が確認できる画面を事業者が用意していなかった場合には、その注文は無効となります。契約成立時期は通知が到達した時点とする →ネット通販で、「購入する」「申し込む」のボタンを押しただけでは契約は有効とはなりません。事業者側が内容を確認し、顧客に注文承諾の通知が届いた時点で契約が有効となります。参考：電子政府の総合窓口e-Gov 4.1.3 医薬品医療機器等法（旧薬事法）正式名称を「医薬品、医療機器等の品質、有効性及び安全性の確保等に関する法律」といいます。2014年に薬事法が改正され、制定されました。医薬品等の製造や流通等について定め、これらの安全性を確保し、保健衛生の向上を図ること目的とした法律です。 1か月で〇〇㎏痩せる、1週間で肌が〇〇歳若返るなど、根拠もない過剰な広告行為した場合には罰則の対象となります。健康や美容といったジャンルは人気があるため、副業で触れる機会も多いので注意が必要です。実際にアフィリエイターが逮捕される事件も起きています。参考：共同通信　「アフィリエイター」を書類送検法律に沿った表記ができているか、判断に迷う場合には厚生労働省のガイドラインを参考にしましょう。 4.1.4 著作権法著作権法は副業を行う上で一番関わる可能性が高い法律です。適用対象は記事、動画、デザイン、イラスト、プログラムなど幅広くなっており、実際に著作権侵害で検挙された例も多くなっていますので十分注意しましょう。参考：不正商品対策協議会また、著作物を創作した時点で様々な権利が発生するため、多少のことでも著作権侵害に該当してしまうリスクがあります。他人の著作物を利用する場合は必ず、以下のルールに従って対応しましょう。サイトで他人の著作物を引用する場合においては引用元を明記するほか、引用部分とそうでない部分をハッキリと区別させる参考　公益社団法人著作権情報センター著作者から利用許可をもらう参考　公益社団法人著作権情報センター 4.2 税金税金についても知っておきましょう。申告漏れがあると罰則を受ける可能性があります。 4.2.1 確定申告を忘れない売上から経費を引いた副業の所得が20万円を超える場合に、確定申告が必要となります。申告をしなかった場合、罰則や追徴課税を受けることになりますので、必ず期限内に済ませるようにしましょう。確定申告を行った結果税金が還付される場合もありますが、支払いをする場合も多いので、納税資金についてはあらかじめ確保しておく必要があります。また、副業で得ている収入が20万円以下の場合、確定申告が不要であってもお住まいの市区町村への住民税の申告は別途必要となるケースがありますので注意してください。 4.3 トラブル防止副業に関してのトラブルもあらかじめ知っておくと、回避しやすいです。最低限として、以下で紹介する3点を頭に入れておきましょう。 4.3.1 事前に会社に相談する許可なく副業をしていることが会社にバレると、トラブルになる可能性が高いです。副業をすること自体は違法ではないですが、本業に影響しないよう就業規則で禁止している会社はあります。仮に、就業規則に明記されていないとしても、黙って副業をしているとトラブルになる可能性は高いです。あらかじめ届け出れば可能とする会社も多くなっていますので、副業を始める際は事前に会社に相談しましょう。 4.3.2 請ける仕事に責任を持つ副業で取り組む仕事の多くは業務委託契約になり、賃金や労働時間など、労働基準法等による保護を受けることができません。契約自由の原則に基づき、業務内容や報酬などの条件を当事者間で取り決めることになります。そのため、自分にとってどんなに条件の悪い仕事であったとしても、一度仕事を請けた以上は完了させる義務が生じます。完了できない場合、債務不履行責任を負うこともありますので、仕事を請ける上では事前にわからないことは曖昧にせず確認するようにしましょう。 4.3.3 個人情報に気をつける副業で取り組む仕事の中には、個人情報を取り扱う内容も多く含まれます。個人情報を漏洩させてしまった場合、数百万〜数千万円といった損害賠償を請求s流可能性もありますので、セキュリティ対策については万全な対策を取っておきましょう。また、自分自身の個人情報漏洩にも注意が必要です。悪用される可能性もありますので、個人・法人問わず、住所・本名・連絡先などを教える場合には最新の注意を払ってください。 5 まとめ在宅でできる副業のおすすめ職種について解説してきました。副業を選ぶ上では、目的に合わせたものを選ぶことが最も重要です。少ないコストで始めることができる上に、スキルが身につく仕事としてI

副業・フリーランス

WordPressでアイキャッチ画像を設定する方法【初心者向け】

WordPressでは、記事1つ1つにサムネイル画像（アイキャッチ画像）を設定できます。ブログの記事冒頭や記事一覧ページに配置されている、一番目を引く画像です。テックアカデミーマガジンの場合は、このように表示されています。アイキャッチ画像を設定すると、下記のメリットがあります。記事の内容がひと目で分かる記事一覧の画面でわかりやすい記事のクリック率が上昇する SNSなどでシェアされた時に目立つそこで今回は、アイキャッチ画像の設定方法について簡単にご紹介します。目次画像が荒くなる原因は画像形質画像サイズも原因の1つ画像の最適化HTMLで指定できること画像が荒くなる原因と対処法監修してくれたメンター大石ゆかり田島メンター！！記事一覧で見た時に記事ごとに画像が表示されていると思うんですけど、あれってどうやって表示するんですか〜？田島悠介アイキャッチ画像のことだね。それなら記事ごとに設定するんだけど・・・ちょっとやってみようか。大石ゆかりはい、お願いします！ Gutenberg（標準ブロックエディタ）でWordPressのアイキャッチ画像を設定する方法 WordPressバージョン5.0から、標準エディタがブロックエディタ（通称Gutenberg）に変更になっています。ここでは、ブロックエディタでアイキャッチ画像を設定する方法をご説明します。【Gutenberg】アイキャッチ画像の設定エリアを表示する Gutenbergでは、アイキャッチ画像は記事投稿画面でデフォルトで表示されています。アイキャッチ画像の右側の∨マークをクリックすると、∧マークに切り替わり、「アイキャッチ画像の設定」ボタンが表示されます。【Gutenberg】アイキャッチ画像を設定する「アイキャッチ画像の設定」ボタンをクリックします。上部の「ファイルのアップロード」タブをクリックすると、次のような画面が表示されます。「ファイルの選択」ボタンをクリックして、設定したい画像を選択しアップロードしてください。アップロードが完了したら、右下に表示される「アイキャッチ画像を設定」のボタンをクリックします。投稿画面に、設定したアイキャッチ画像が反映されます。これで設定は完了です。設定する画像を間違えた場合には、「画像の置換」ボタンをクリックし、選択し直すことができます。また、「アイキャッチ画像の削除」というテキストリンクをクリックして、設定の削除もできます。設定は右上の「下書き保存」ボタンをクリックするまで保存されませんのでご注意ください。旧エディタ（Classic Editor）でWordPressのアイキャッチ画像を設定する方法 WordPressは5.0から、標準のエディタがブロックエディタ（Gutenberg）になりました。しかし旧バージョンから使用している方は、いままでの旧エディタ（Classic Editor）のほうが使い慣れている方も多いでしょう。 Classic Editorはプラグインとして追加することで、切り替えが可能です。ここでは旧エディタ（Classic Editor）でアイキャッチ画像を設定する方法をご説明します。アイキャッチ画像は記事投稿画面で設定できるのですが、デフォルトの記事投稿場面で表示されていない場合には、以下の手順で表示させてみましょう。投稿編集画面で、右上に表示される「表示オプション▼」というボタンをクリックします。すると、投稿画面で表示されるオプションリストが表示されます。その中から「アイキャッチ画像」を探し、チェックボックスにチェックしましょう。すると、投稿画面の右サイドに、「アイキャッチ画像」のエリアができます。これでアイキャッチ画像追加の準備はできました。【旧エディタ】アイキャッチ画像を設定するアイキャッチ画像設定エリアの、「アイキャッチ画像を設定」というテキストリンクをクリックします。すると、画像追加画面が立ち上がるので、設定したい画像を選択しアップロードしてください。アップロードが完了したら、右下に表示される「アイキャッチ画像を設定」のボタンをクリックします。投稿画面に、設定したアイキャッチ画像が反映されます。間違ってアップロードしてしまった場合は、「アイキャッチ画像を削除」というテキストリンクをクリックし、またやり直せば大丈夫です。記事を公開し、どのように反映されているかを見てみましょう。これでアイキャッチ画像の設定は完了です。 [PR] Webデザインで副業する方法とはWordPressのアイキャッチ画像が表示されないときの対処法とは大石ゆかり田島メンター！！アイキャッチ画像を設定したんですけど、表示されません…！田島悠介原因はいくつかあるから順番に対処法みていこうか。大石ゆかりお願いします！ここではWordPressのアイキャッチ画像が表示されないときの対処法をご説明します。前述した設定の通りアイキャッチ画像が保存されているのであれば、テーマの設定にアイキャッチ画像の機能を有効化する関数が設定されていない場合が考えられます。オリジナルで作成したテーマなどを利用している場合などにも、functions.phpの設定の有無でアイキャッチ画像は表示されない場合があります。 functions.php /** * アイキャッチ画像の機能を有効化 */ add_theme_support( 'post-thumbnails' ); いままで表示されていたアイキャッチ画像が表示されなくなったような場合は、プラグインの競合が起きている場合がほとんどです。このような場合は、有効化しているプラグインを順番に無効化していきます。これにより、影響をおよぼしているプラグインを特定できます。プラグインが特定できたら、しばらくそのプラグインを無効化して、次のバージョンアップなどで問題が修正されるのを待つのが方法の1つです。または代替できるようなプラグインを探して、そちらに差し替えるなどの方法があります。最後にもう一度各投稿記事を開いて、アイキャッチ画像が正しく設定できているかも確認してみましょう。 WordPressのアイキャッチ画像の最適なサイズとはアイキャッチ画像のサイズは、デフォルトでは「設定」の「メディア設定」の数値で決まります。画像はWordPressにアップロードすると、この設定によりメディアライブラリにオリジナルサイズを加えて指定されたサイズで登録されます。縦横比が上記の設定と違う場合は、以下のように横の長さを基準としてそれぞれの画像サイズで保存されます。この例では、元の画像は横620pxで縦349pxの画像です。この場合、メディア設定の大のサイズ指定よりも小さい画像なので、フルサイズはオリジナルのサイズ、中が横300pxを基準として縦横比で縮小したもの、サムネイルは横150pxを基準として中央で正方形にトリミングした画像です。 4番目の例は、「サムネイルを実寸法にトリミングする」のチェックマークをオフにした場合の画像です。この場合は、サムネイルは同じ縦横比を保ったまま縮小されます。固定または投稿ページに画像ブロックで配置した画像のサイズは、右側のプルダウンメニューから選択できます。アイキャッチ画像はSNSのOGP画像としても使われることも多いので、最適なサイズは横1200px × 縦630pxとされています。様々なSNSでの画像の表示を確認したい場合は、以下のサイトなどを利用すると便利です。 OGP画像シミュレータまとめ：アイキャッチ画像を設定して魅力的なサイトを作ろう標準のブロックエディタ、旧エディタでのアイキャッチ画像の設定方法、アイキャッチ画像が表示されない場合の対処方法、最適なアイキャッチ画像のサイズと設定や確認方法をご紹介しました。アイキャッチ画像はこのように記事の冒頭に表示されるので、テキストだけよりぐっと見た目が華やかになりましたね。アイキャッチ画像を適切に設定して、より魅力的なサイトにしていきましょう。他のカスタマイズ方法として、WordPressのウィジェット編集方法の記事もあります。大石ゆかりアイキャッチ画像があると、記事のイメージがつかめていいですね♪ 田島悠介そうだね。　アイキャッチ画像は一覧にすると特に印象に残りやすいから、必ず設定しておいたほうが良いね！大石ゆかりはい、分かりました！ WordPressを学習中の方へこれで解説は終了です、お疲れさまでした。つまずかず「効率的に」学びたい副業や転職後の「現場で使える」知識やスキルを身につけたい WordPressでのサイト制作を学習していて、このように思ったことはありませんか？テックアカデミーのWordPressコースでは、第一線で活躍する「プロのエンジニア/Webデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、WordPressを使ったオリジナルサイト構築を学べます。まずは一度、一週間の無料体験で学習の悩みや今後のキャリアについて話してみて、「現役のプロから教わること」を実感してみてください。時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします。

WordPress

【デザイン事例を紹介！】グリッドデザインのWebサイトが良い15の理由

本稿は、Design School Canvaのブログ記事を、Design School Canvaより了解を得て日本語翻訳し掲載した記事になります。また本記事は、Mary Stribley氏によって投稿されたものです。グラフィックデザイナーにとって、グリッドは特に重要なデザインツールであるとされています。ほんの数本のグリッドの存在がデザインに加わることが、デザインプロジェクト全体にとって、極めて重要なのはなぜでしょうか？デザイナーは一人一人異なる答えを持っているかもしれませんが、要するに、グリッドは、それなしでは時間もかかり、面倒で困難なデザインを構築するのに役立ってくれるのです。もしあなたがグリッドデザインの世界を探求しようか迷っているとしたら、グリッドをレパートリーに加えるだけで、デザインが非常に良くなる15の理由をお話します。 01. コンテンツが整理されるグリッドの主な利用価値の1つは、デザインの要素を整列化、順序化したり、Webページをクリーンできちんとしたデザインにするのに役立つことです。これはグリッドの整列機能の効果であり、グリッドの役割の大部分を占めていると言えます。グリッドシステムを確立することで、要素を整列化するのに使える基本構造を自分自身で創ることが可能となるのです。そして、これによりクリーンで整理されたレイアウトを実現できます。例として、Christine Wisnieski によるTwist CreativeのGridデザインのレイアウトを見てみましょう。各要素がきれいに整列されて、全体としてクリーンな仕上がりになっています。グリッドを使うときには、各要素をきれいに整列できるようなタイプのものを見つけましょう。要素とは具体的には、文章、画像、グラフィックなどで、その他どのような対象も要素となりえます。最終的な完成イメージという大まかな全体像から始めて、それに合うグリッドを組み立てましょう。 02. あなたの仕事を高速化する常に高速化と効率化を追い求める世界で生きる私たちにとって、「効率改善」などは耳に聞き慣れた言葉ですから、このメリットの説明は、すんなりと受け入れてもらえるかもしれません。グリッドは、あなたのデザインにかける時間を、よりスピードアップして充実したものにしてくれるでしょう。というのも、どのポジションに要素を配置するのが最高の選択なのかを示すガイドとしても、機能してくれるからです。要素が良く見えそうなポジションを手さぐりで探してから、ランダムに配置するという作業をしなくても、グリッドがあれば、あなたを自然な解へと導いてくれるでしょう。グラフィックデザイナーのTroy Templeman氏が述べるように、「Gridデザインは、どの場所にコンテンツを配置できるかというよりむしろ、どの場所にコンテンツを配置すべきかという、デザイナー自身の決定をサポートすることで、デザインのプロセスをスピードアップしてくれる。」というわけです。グリッドは家の建築の土台のようなものとして考えることができます。一番最初に建造しておくべきものの1つであり、そこからさらに構築を進めます。 [PR] Webデザインで副業する方法とは03. 文章の居心地が良くなるようなレイアウトを実現できる少なくとも、グリッドと文字は、2つのデザイン要素として相性のいいの組合せです。強力なグリッドは、文章量の多いレイアウトを、よりすっきりとして組織化された印象に整えてくれます。ボディコピーの文章も読みやすくしてくれるでしょう。文章を読みやすくするのに役立つグリッドの手法の1つに、「ベースライングリッド」があります。これはノートの罫線のようなもので、文章の1行1行がベースラインとなるグリッドの上に乗ります。これらのグリッドは、文章で作られた各要素が、同じ高さに並ぶように整えてくれます。もしあなたが文章の行を整列していなくても、多くの人はその特定のアンバランスな箇所には気づかないかもしれませんが、あなたのデザインが全体として散らかっているということは無意識的に気づくものです。つまり、小さな変化が大きな効果をもたらしてくれるのです。これは、「ベースライングリッド」の実例です。各行がそれぞれ整列されていて、クリーンですっきりとしたタイポグラフィーの効果を生み出しています。 04.　他のデザイナーとの共同作業をもっと容易にしてくれるあなたも今までに他のデザイナーと共同で仕事をしたことがあるでしょうか？そのような場面では、グリッドは、ストレスとコミュニケーションの齟齬をいくらか和らげてくれるかもしれません。すでにお話したように、グリッドはデザインに基本構造を作るのに役立ち、個々の要素がどの場所に置かれるべきかについての方針も示してくれます。もし、あなたが最初にグリッドからデザインを組み立てていれば、新しいデザイナーが途中から加わったときにも、あなたのデザイン手法や、要素の配置の意図を理解してもらえるでしょう。例として、あなたが下にあるようなデザインに取り組んでいて、これから第3パラグラフを作成するときに、他のデザイナーに参加してもらうよう依頼するケースを考えてください。グリッドシステムを使っていれば、配置や整列を正確に実践できます。加えて、「カラムの幅はどのくらいにしますか？」「1つ前のカラムからどのくらいの距離を空けて配置しますか？」などのメッセージが行ったり来たりすることも少なくなるでしょう。というのも、グリッドによって全ての答えはすでに用意されているからです。他のデザイナーと共同で仕事をする時には、わかりやすくて、最終的な完成品に合うグリッドシステムを構築しましょう。必要なカラムの数が3つであるなら、13も使う必要はありません。グリッドシステムを組み立てていないうちから、要素の整列を行うのは避けましょう。グリッドを機能的で役立つものにしておくのが大切です。 05. バランスの整ったデザインを創りやすいグリッドの美しさはその統一感にあります。あなたのデザインを複数のカラムに分割しようとするときには、シンメトリーなレイアウトから始めることになるでしょう。左右のどちら側のデザインがもう一方の側からずれているか判断することも、容易になるでしょう。例として、以下のMaan Ali氏によるWebサイトのデザインを見てみましょう。左右対称なグリッド、大きさの均一化されたブロックと文章を使うことで、均整のとれたデザインになっています。他の例として、Braulio Amado氏によるデザインでは、中央のグラフィックを加えて3つのカラムとして表現することで、シンメトリーで完璧なバランスになっています。かなり強いデザインであるために、圧迫感のある印象を人に与えやすいにもかかわらず、きちんと整列して完璧なバランスを実現することで、クールで落ち着いたデザインになっているのです。 06. マルチページのレイアウトに統一感を与えるグリッドは複数ページのレイアウトにも役立つでしょう。レイアウトにグリッドを使うことで、あるページから別のページへ、あるレイアウトから別のレイアウトへ、グリッドを継承することが可能です。容易にレイアウト全体の一貫性を保つことができます。例として、WebサイトのRolling Stoneを考えてみましょう。数多くのページから構成されていますが、各ページの構造やコンテンツはそれぞれ異なっています。全体のページで一貫したレイアウトを保ちながら、各ページごとに最高の方法でデザインするには、どうしたら良いと思いますか？以下の画像では、WebサイトのRolling Stoneの音楽のページとトップページを比較しています。4つのカラムで構成されるグリッドデザインを使うことで、一貫性があり、クリーンで、親しみが持てるような外観になっています。一方で、各ページにある空白のスペースも、ページがしっかり機能することに役立っています。グリッドがマルチページのレイアウトに役立つ具体例としては、スタイルガイドのようなマニュアルが一般的です。これらは教育目的で使われ、線形のデザインで整えるのが望ましいため、グリッドが活用されるのです。例として、以下のMike CollingeによるBosphorusのスタイルガイドでは、グリッドが統一して使われています。複数のページをデザインするプロジェクトに取り組んでいるとしたら、「素晴らしいマルチページのレイアウトを設計するためのチェックリスト」に目を通しておきましょう。 07. 階層化したデザインを表現できる Gridデザインの共通の前提は、グリッドを使うことで各要素を均一なサイズのブロックに分けることですが、こうすることで自動的にデザインをコントロールできます。階層化はデザインにとって大切なことであり、グリッドはこの階層化をスピードアップして容易にしてくれます。あなたが階層化の大切さにまだ気づいていないとしても、全てのデザインは少なくとも3段の階層を持つべきである理由のリストによって、その認識は変わるでしょう。例として、NASAのホームページのデザインを見てみましょう。 4つのカラムのグリッドで構成されるデザインで、より重要度の高い画像を、複数のカラムや列の領域まで引き伸ばして大きくすることで、階層を表現しています。「ハロウィーンの空を飛ぶ活動を終えた彗星」の左上の画像は、2カラム×2列分のサイズに広げられ、ページの中で最も注目を引くようにデザインされています。他の重要な話にも、画像が複数のカラムに引き伸ばされたものがあります。印刷物にもグリッドをデザインの基本として使うことができます。複数のカラムのサイズに拡大することで、ある要素に注目を集めたり、逆に小さなカラムのサイズにして、ある要素を目立たないようにすることができます。次の例は、David Tang氏によるデザインで、数字の23や30に注目を集めるように、グリッドの大きさや配置が工夫されています。 08. 散らかったレイアウトと、さよならできるグリッドは、恐怖の散らかったデザインを一掃してくれる素晴らしいツールです。そのためには、マージンを使いましょう。マージンとは、デザインのまわりの余白のことです。一般的に、マージンが狭いほど、あなたのデザインは詰まって散らかって見えてしまいます。マージンをより広くすることで、整ったクリーンなデザインに見せることができます。以下の例では、マージンがグレーの色でマークされています。グリッドとマージンはしばしば一緒に使われますが、この組合せには、デザインをより開かれたクリーンな印象にする効果があります。散らかったデザインを回避するもう1つの方法は、ガターを使う方法です。ガターとは、グリッドのカラム間にある余白のことです。ガターのサイズは調整できますが、機能するグリッドを作るためには、全体のガターサイズは統一しましょう。マージンとガターを組み合わせることで、効果的な結果を生み出している例を見てみましょう。このAisle One によってデザインされた壁紙は、マージンとガターが目立つようなデザインであるため、それぞれいかに効果的に使われているかに気づかせてくれます。 09. 心地よいデザインの世界が開ける芸術家や写真家など数多くのデザイナーが、グリッドを作品のベースに使っている理由は、数学的な美しさを持つデザインを生み出すと考えられているからです。グリッドによって心地よいデザインを生み出す方法の1つに、「三分割法」があります。最も基本的かつ簡単な方法の1つです。写真の技術としてもよく使われる方法ですが、理論の根本は、各2本の水平線と垂直線によって、全体のデザインを9つの均一な区画分けることにあります。線の交点(以下の例ではブルーの円)にデザイン要素を置くことで、心地よいデザインを生み出します。この理論が写真に使われるとき、写真家は、レンズの焦点がこれらの交点に集まるようなフレームを慎重に選びます。試しに「三分割法」をあなたのテキストデザインに取り入れて、目に心地よくなるかどうか確認してみましょう。ページを水平方向と垂直方向に均等な3×3の区画に分けて、これらのシンプルなガイドを応用するだけです。 10.　グリッドのルールを破ってインパクト効果を狙うグリッドのレイアウトのルールを守ることで、クリーンで整った美しいデザインを生み出すことができますが、時にはグリッドのルールを破ることで、ユニークで人目を引くような効果を狙うことができます。例として、99Uによるデザインでは、シンプルな3カラムグリッドが使われていますが、イエローの文字を対角方向にページ全体に走らせることで、グリッドによるクリーンな直線性のルールを破っています。「Think differently(考え方の転換)」というメッセージを伝えるには、印象的で記憶に残りやすく、実に効果的なデザインです。グリッドのルールを破ると、特定の要素に注目を集める効果もあります。例として、このBig CartelのWebサイトのデザインを見てみましょう。要素はグリッドに従って整列されていますが、いくつか例外的なデザイン要素があります。グリッドから飛び出ている要素が、強い垂直ラインのデザインを破ることで、人の視線を引く効果があります。 11. 柔軟性に富むグリッドがあなたのデザインに合うかどうか心配になりますか？全てのグリッドは柔軟性に富むので、デザインの変化にも対応できますから、心配する必要はありません。あなたがグリッドを作るときには、好きなだけカラムの数を選ぶことができるのは、グリッドの柔軟性の１つです。以下の例では、1カラムのデザインと、2または3カラムのデザインの比較を示しています。もちろん一般的には、デザイナーやデザインの必要性に応じて、最大13カラムの範囲でグリッドが構成されます。以下の例では、フルページサイズの画像と文字、そしてシンプルなレイアウトタイプを活かしたデザインで、1カラムのグリッドシステムとして完璧です。次のDesign Surgeryによるレイアウトのデザインは、13カラムで構成されています。所々に入っている画像と相まって、長くなりがちな記事の文章を効果的に魅せています。最終的にカラムの数はあなた次第です。ただ、カラムの数が多いほどデザインの柔軟性が高まり、数が少ないほどシンプルで柔軟性が低くなることも、デザインする時には心に留めておきましょう。 12. 対角線のデザインに役立つ文字通り、異なる角度からのデザインのアプローチにも、グリッドは役に立ちます。グリッドは水平または垂直に並べるだけではなく、対角線の軸上に配置しても、効果的です。 Andrew Ackroyd氏によってデザインされたポスターは、フォントと画像が対角線のグリッド上に並べられ、モダンでスタイリッシュな効果を生み出しています。対角線のグリッドは、画像の多いレイアウトにも役立ちます。Karen Hoffstetter氏によるこのデザインでは、対角線を活かしたフレームを使った画像で、全体が埋め尽くされたデザインです。またこのデザインでは、対角線のグリッドに加えて、水平方向と垂直方向グリッドも使われていることが、要素の美しい整列を可能にしています。 13. 万能に使えるグリッドが最も利用されているのは、雑誌や編集のレイアウトなどですが、その他のどんな用途にも、デザインツールとして活用できます。多くの有名なロゴは、グリッドシステムに基づいて作成されています。例えば、Braunの有名なロゴは、グリッドを使用して、文字をクリーンで強さのあるデザインに統一するプロセスから、誕生したのです。グリッドはまた、イラストレーション全般にも使うことができます。Dean Gorissen氏による、都市のイラストレーションでは、クリーンでシャープな角度が使われていますが、これが対角線のグリッドの形が利用されたことを示しています。どのような用途であれ、グリッドは、計り知れないほど便利なツールとなってくれるでしょう。全てのデザインスタイルやデザイナーにとって有益なツールではないかもしれませんが、多くのケースにおいては役に立ちます。あなたの次のプロジェクトでも、グリッドの活用を考えてみてください。 14. 余白のデザインに役立つあなたは余白を活かしたデザインの世界を深く掘り下げてみたいと思っていますか？グリッドは余白のデザインにも役立ちます。デザインを複数のカラムに分けて、要素を並べた後、残ったいくつかの列やカラムは空けたままにして余白を作りましょう。 João Oliveira氏によるこのレイアウトでは、グリッドのいくつかの領域を空けておくことで、余白を広く作っています。その結果として、スタイリッシュかつ洗練されたデザイン、機能的でミニマルなレイアウトが実現されていて、散らかりや不要な要素は全くありません。同様に、Mehmet Gozetlik氏によるポスターのデザインでも、グリッドの機能が活かされています。フォントと画像が中央のカラムに整列され、外側のカラムは余白にされています。美しくバランスが取られていて、要素が中央に集められた、視覚効果も高いポスターデザインです。 15. 読者の目に優しいデザイン活字印刷のレイアウトを読みやすくすることで、グリッドは、文章のデザインにも役立ちます。人間の目は、文章のまとまりの長さにとても敏感です。文章のまとまりが長すぎると、最後まで読み進めるのも辛くなりますが、短すぎても細切れな印象になり、しっかりと読み込むのが難しくなります。一般的に、行の黄金比は、1行あたり、単語数で6以上、合計文字数で空白も含めて約50～65文字になるとされています。文字の多いレイアウトにグリッドを使うことで、簡単に素早く均一なカラムを作ることができます。カラムを使うことで、文章の長さを強力にコントロールできます。これこそ、新聞でグリッドを基本としたレイアウトがよく使われている理由です。読みやすいコンテンツを作るのに役立っているのです。編集に関することをもっと学びたいと思いますか？「世界の編集デザインベスト50」のリストが紹介されているWebページを訪問して、目を通しておきましょう。次はあなたの番です：グリッドデザインを早速実践しましょうあなたがグリッドのファンであるなしに関わらず、非常に多くのデザインで役に立つことは明らかです。グリッドの起源は13世紀に遡るというのも、驚くにはあたらないことかもしれません。グリッドには、デザインのバランスを整えて整列することから、対角線のデザインでタイポグラフィーをクールに見せることに至るまで、数多くの活用方法があります。グリッドは、デザインのページ上のただの線ではありません。デザインを構造化し、デザインの方向性を示し、デザインを形作ることで、あなたの望む完成イメージを実現する力があるのです。 [お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。

Webデザイン

ヒーローイメージで印象を大きく変える10のデザイン事例

本稿は、Smashing Magazineのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、UI/UXデザイナーのNick Babich氏によって投稿されました。あなたのWebページを訪問したユーザーは、何らかの反応を示すでしょう。ユーザーの反応は、肯定的であれ否定的であれ、大部分は彼らが何を見るかによって決定されます。視覚はおそらく人間の最も優れた感覚であるため、ヒーローイメージは、ユーザーの関心を引く最も手っ取り早い方法の1つといえます。大胆で、グラフィックを使用した、メッセージ性の強い画像は、ユーザーの関心を引きます。ヒーローイメージすぐにユーザーを惹き込み、ミニマリストデザインのアプリやWebサイトにおいて完璧な中心的存在となるでしょう。ヒーローイメージは単なる美しい画像以上の存在です。それは強力なコミュニケーションツールです。この記事では、ヒーローイメージの使用に関するヒントをいくつか紹介します。 1. Webサイトの内容と関連性を持たせるヒーローイメージは導入として考えてください。ヒーローイメージはユーザーに、Webサイトの他の部分に何を期待できるかを連想させるものです。ヒーローイメージの目的は、あなたのWebサイトが何であるか、また伝えたいアイデアは何であるかを、瞬時に訪問者に伝えます。ヒーローイメージがWebサイトのコンテンツの意図を上手く伝えていない場合、ユーザーに役立つものにはなりません。かえって画面上の貴重なスペースを無駄に使い、ときには混乱の原因にさえなります。画像がブランドや製品に対する先入観に合わないと、ユーザーは混乱します。悪い画像選択の代表的な例、誰もがこの画像（上記参照）が銀行ローンに関連することに気づくとは限りません。画像選びは妥協してはいけません。あなたが創造しようとしているキャンペーン、テーマ、目的に合うものを選んでください。上記のLunet Eyewearのヒーローイメージを見てください。Webサイトのメッセージを明確に伝えています。画像のコンテンツはブランドを表しているのです。製品の宣伝または販売のためにWebサイトを使用している場合、ヒーローイメージの利点を活かすことができるはずです。製品のコンテクストに合うヒーローイメージを使用してください。そして、製品の外観だけでなく、実際の設定で製品がどのように機能するかを示しましょう。製品を販売する最良の方法は、商品それ自身に販売させることです。ヒーローイメージは製品のメリットのデモを行うことができます。デジタル製品やサービスについても同様です。互換性のあるデバイス上でのスクリーンショットのモックアップを作成し、あなたのアプリやサービスの使用感を人々に伝えましょう。 Slackは、ヒーローイメージとしてアプリのインターフェースを採用しています。もちろん、ヒーローイメージのデザインと選択は難しいことです。そこで、Angie Schottmuller氏はヒーローイメージの判断基準として、7つのポイントで構成されるフレームワークを作成しました。キーワードの関連性画像はターゲットキーワードを視覚化できているでしょうか？目的の明確さ画像はWebサイトのメッセージを明確に伝えていますか？デザインのサポート画像は行動喚起（Call To Action）を促すためにページフローをシームレスにサポートしていますか？信頼性画像はあなたのブランドを信頼感のあるものとして表現していますか？付加価値画像は関連性を高めたり、ユーザーにとってのメリットを示していますか？望みの感情イメージは、あなたがユーザーに望むアクションを引き起こさせる感情を描写していますか？主人公としての顧客顧客は製品を購入したら主人公になれるということを描写していますか？ 2. 画像を中心的存在にするヒーローイメージは、少ない情報を伝えるには完璧な環境です。はっきりと目立つものがよいでしょう。ユーザーはWebサイトに訪問する度に立ち止まって眺めることになるでしょう。しかし、画像ですべてを伝える必要があるという意味ではありません。むしろ画像は、関連性を持たせた方法で、メッセージを視覚的に強化することが必要なのです。 [PR] Webデザインで副業する方法とは3. 感情的に説得力のある画像を選択するデザインにも感情を組み込むべきです。感情的な影響を与え、インスピレーションを生み出し、あなたがユーザーに望む感情を高めるような画像を選択するべきです。結局のところ、人々が重要な意思決定をするときに、しばしば感情は理性を上回ります。肯定的な感情を刺激することによって、ユーザーとのつながりを構築することができます。 4. 読み込みとレンダリングは可能な限り早くするヒーローイメージは重要な設計要素なので、素早くレンダリングする必要があります。残念なことにヒーローイメージの多くのデザインは、HID（ヒーローイメージ遅延）という現象に悩まされています。これは主に、スクリプトやCSSのスタイルシートによって読み込みがブロックされることが原因です。デザイナーは、ヒーローイメージがいつ表示されるかに焦点を当てる必要があります。しかし、これは想像以上に厄介です。モダンブラウザでは、いつコンテンツが表示可能になるかを知るためのフックがありません。 1つの簡単な例は「インラインスクリプトタイマー」であり、これは時間を記録し、imgタグの直後に置かれるものです。コードは次のようになります。 <img src="hero.jpg" onload="performance.mark('hero1')"> <script>performance.mark('hero2')</script> このコードはUser Timing APIを利用しており、Steve氏の作成したテストページでどのように動作するかを見ることができます。 5. 高解像度の画像を使用する画像は、ピクセル化（画像が粗くなり個々の画素が見えること）したりぼやけて表示されるべきではありません。低画質の画像ほど悪いものはありません。ヒーローイメージは、画像がすべてであり、第一印象が重要になります。そのため高画質の画像を使用しましょう。重要なヒーローイメージの場合、要素とsrcset属性やsizes属性を使用して、さまざまな画像のバリエーションを提供することが重要です。低画質の画像 vs. 適正にサイズ調整された画像 6. 異なる画面サイズを考慮する画像は、ディスプレイやプラットフォームに合わせて適切なサイズにしてください。すべてのデバイスに合わせて画像を最適化します。これは、小さなデバイスでは、大きな画像をサイズ変更（リサイズ）またはより小さな画像と交換することです。レスポンシブデザインのWebサイトの開発者は、たとえモダンなWebサイトの場合でも、さまざまなデバイスに合う最適な画像解像度を選択することに苦労します。すべての画面解像度とデバイスに対して、1つの画像では足りないことは明らかです。Webサイトは、すべての異なるデバイスにおいて、またすべての異なる解像度、ピクセル密度、向きにおいて完璧に表示されるように適応しなければなりません。レスポンシブWebサイトを構築する際、開発者が直面する主な課題の1つは、メディア（特に画像）の管理、操作、配信です。幸い、この問題の解決策があります。レスポンシブブレークポイントジェネレーターは、画像のブレークポイントをインタラクティブに生成するのに役立つ、無料のオープンソースのWebツールです。レスポンスブレークポイントジェネレーターは、複数のサイズの画像を管理するのに役立ち、レスポンシブデザイン画像のブレークポイントをインタラクティブに生成できます。 7. 行動喚起（Call To Action）を強調するデザインの主役はヒーローイメージにするとしても、行動喚起（Call To Action、以降CTA）などの要素も含める必要があります。ただし、CTAはヒーローイメージと競合させるべきではありません。色は強調のために非常に重要です。CTAのボタンは他の要素よりも明るい色で目立つようにするべきです。 CTAのボタンの視覚的な重みは、ヒーローイメージと均斉がとれるようにしましょう。ぼかし効果を行動喚起（CTA）にテストするぼかし効果を使用して、ページの視覚的階層をテストしましょう。ぼかし効果のテストは、ユーザーの視線が本当にあなたの思惑通りに移動するかを実験する手助けとなる、簡単なテクニックです。必要な手順は、Webサイトのスクリーンショットを撮り、Adobe XDでオブジェクトのぼかし効果を適用することです。例として、以下のCharity WaterのWebページを見てください。ページのぼやけたバージョンでは、どの要素が目立っているように見えますか？その印象をあなたが気に入らなければ、戻って修正しましょう。ぼかし効果のテストは、デザインの焦点と視覚的階層を明らかにするテクニックです。 8. コントラストをデザインする画像の上にあるタイポグラフィが読みやすいか確認してください。太文字で読みやすくて画像と調和する、しかし画像から独立して目立つようなタイプフェイスを選択してください。画像の上にテキストを配置する予定の場合、画像の主要部分が見えて、認識可能であることを確認してください。オーバーレイおそらく最も簡単な方法は、シンプルなテキストを画像の上に直接置くことです。ただし、テキストと画像のコントラストが十分でない場合は、画像全体に半透明色のオーバーレイを加えると効果的です。 Outlinesは、カラーオーバーレイを使用しています。ブランドカラーを使用すれば、ヒーローイメージを向上させることができます。既存の製品やブランドのデザインをしている場合は、特定の色がすでにそれらに関連付けられている可能性が高いでしょう。原色を特定し、それを画像の前面に表示してみましょう。 Cliqueのヒーローイメージは、アプリの青いインターフェースの色調と合っています。スクリム（scrim）あるいは、スクリムを使用してテキストにコントラストを追加することもできます。スクリムは、オーバーレイされたテキストをより読みやすく柔らかい印象にするために使用される、半透明のレイヤーです。不透明度の値はコンテキストに依存します。デザインに応じてグラデーションの不透明度を選択します。一部のヒーローイメージには、以下に表示される画像のように暗めの60％のグラデーションが必要です。 9. 実際の人物画像を使用する人物画像を使用することは、ユーザーの関心を引くのに非常に効果的な方法です。私たち人間は、人物の顔を見ると彼らとつながっているように感じ、単に商品を買っているような気分にはなりません。しかし多くの企業のWebサイトで、「信頼を築く」ための偽善的な印象の人物画像が使用されていることは、残念です。ユーザビリティテストでは、純粋に装飾的な画像（以下に示すような）がデザインに価値付加を与えることは滅多になく、ユーザー体験を向上させるというより、むしろ逆効果であると示されています。したがって、笑顔で無難な印象のビジネスパーソンの画像を理由もなく使用するのは避けてください。不自然な画像は、浅はかで偽善的な印象をユーザに残します。実践上役に立つルールは、あなたのアプリやWebサイトのキャラクターのイメージに合う人物の高品質の画像を使用することです。画像は、商品、企業文化の本物を表現したものでなければなりません。以下にいくつかのヒントがあります。混雑したショットの画像は避けてください。主役となる被写体が1つの写真を使用します。本物のストーリー性を持つ画像を追求してください。興味深い活動をしている人々の写真を撮ってください。製品がある場合、人々がその製品を使用している写真を撮ることも検討してください。 10. ヒューマンタッチな（人間的な触れ合いの感じられる）イラストヒーローイメージは単なるビジュアルです。あらゆる種類の画像を利用することができます。イラストは人気の高い選択肢になりつつあり、時には写真よりも個性豊かな表現が可能です。イラストは、画像のコンテンツとテクニックによる詳細なデザインの両方を、より制御できます。ユニークなイラストを使用すると、他のサービスと差別化され、より良いブランドの知名度を高めることができるでしょう。 Dropboxは、簡単に理解できるイラストを使用してメッセージを明確に示し、複雑なアイデアを伝えます。イラストは想像力に訴えかけ、見る人との間に強いつながりを確立します。イラストが機能するためには、容易に認識可能なものでなければならず、それが伝える情報は見る人が異なるとしても同じ様に解釈されるものでなければならないのです。複数のイラストを使用する場合、一貫性がなければなりません。ソースが同じであるように、つまり同じ人がイラストを描いたように、見えるようにしましょう。結論クオリティが高く、見るのが楽しく、コンテンツと上手く機能する限り、ヒーローイメージは素晴らしい選択肢です。この技巧を最大限に活用するには、十分なコントラストとCTAのある設計にしましょう。また、TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。現役のWebデザイナーがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルのWebサイトを作ることが可能です。独学に限界を感じている場合はご検討ください。

Webデザイン

HTMLでimageタグを使って画像を表示する方法【初心者向け】

HTMLでimageタグを使って画像を表示する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 Webページに画像を表示するにはどうすれば良いのだろう文字だらけの味気ないWebページを豪華にしたい！ Webページと写真ファイルってどんな関係があるんだ？なんて皆さん、この記事を読めば、Webページで画像を出す方法が理解できます。うまく画像をつかって、おしゃれなWebページを作ってくださいね。本記事はテックアカデミーのはじめての副業コースのHTMLカリキュラムの内容をもとに解説しています。目次画像が荒くなる原因は画像形質画像サイズも原因の1つ画像の最適化HTMLで指定できること画像が荒くなる原因と対処法監修してくれたメンターそもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。田島悠介今回は、HTMLに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 imageタグを使って画像を表示する方法について詳しく説明していくね！大石ゆかりお願いします！【動画でも解説しています。クリックで見る！】画像を表示する方法 HTMLのimageタグを使って画像を表示するには、いくつかの属性を使い、下記のように記載します。 <img src="image.png" alt="海の写真" title="空と海"> それぞれ1つずつ確認していきましょう。 imageタグ <img … > ここには画像を表示しますよ、ということを示します。ソース属性 src=”…” ソースは、出所や源泉という意味です。表示する画像ファイルの、ファイル名やファイルの場所を示します。タイトル属性 title=”….” 画像のタイトルを指定します。オルト属性 alt=”…” オルタナティブ、代替の略です。目の不自由な方向けの読み上げWebブラウザで、画像の代替として読み上げる文章です。 Googleなどのサーチエンジンが、画像の中身を理解するのにも用いられます。では具体例をみてみましょう。表示したい画像ファイルを用意してsrc属性で指定しましょう。ここでは「空と海」というタイトルの「海の写真」の画像「image.png」を表示します。 <img src="image.png" alt="海の写真" title="空と海"> 画像が表示されました。マウスカーソルを画像に合わせると「空と海」と表示され、読み上げ機能ではalt属性で指定した「海の写真」と読み上げられます。基本的な使い方はこれだけです。大石ゆかりサイトに画像を使用すると、見栄えが良くなって文章にもメリハリが付きますね！田島悠介そうだね。文章だけの記事だと見出し(h1タグ)や段落(pタグ)で余白がちゃんとつけられていても見づらい感じがするよね。大石ゆかり src属性は、画像があるURLを記述するんですね。alt属性やtitle属性がちょっとわかりません。田島悠介 alt属性は代替テキストで検索エンジンに教えてあげたり、画像が表示されなかったときに表示されるよ。title属性は、マウスカーソルを合わせると吹き出しが出るんだよ。画像ファイルを指定する方法 HTMLで、画像を始めとする外部ファイルと連携をするときには、ファイルの場所やファイル名で、どのファイルかを指定します。この、どのファイルかを指定するための記述方法を、パス（path = 道順）と言います。 Webページを作っている各ファイルは、こちらの図のようなフォルダ構成になっていることがよくあります。このフォルダ構成を意識して、HTMLファイルにフォルダ名やファイル名を記述して道順を示していくんですね。パスの書き方には、絶対パスと相対パスの2種類あります。それぞれ詳しく説明しますね。絶対パス HTMLファイルの位置は関係なく、基準となる位置からの道順を示すのが絶対パス。市役所に行くには、駅から南に300m・・・と、基準となる場所から示す道順です。絶対パスの1つは、Webサイトの各ファイルをまとめている、おおもとのフォルダからの場所を示す方法です。今回の図では、demoというフォルダがおおもとですね。パスの記法では、先頭に置いた「 / 」スラッシュの記号をルート（根本）と呼び「おおもとのフォルダ」という意味があります。また、英単語の後に「 / 」スラッシュ記号を置くことで、フォルダ名を示します。実際にimgタグのsrcに、ルートからimage.jpgまでのパスを記述すると、このようになります。 <img src="/images/image.jpg" > 分解して翻訳すると、こんな意味ですね。「 / 」おおもとのフォルダ内の「 images/ 」images というフォルダ内の「 image.jpg 」image.jpg というファイルこの道順に沿って、HTMLは表示する画像ファイルを見つけるのです。また、すでにインターネット上に公開されている画像を指定する場合は、URLで記載することもできます。 <img src="https://techacademy.jp/sample/image.jpg" > URLを用いた記法も絶対パスの1つです。 HTMLファイルがどこにあるかは関係なく、公開されているWebサイトを基準に道順を示しているんですね。相対パスパスを記述するHTMLファイルと指定するファイルの、位置関係を意識して道順を示すのが相対パスです。市役所に行くには、ココから北に500m・・・と、今いる場所ココを基準に示す道順です。相対パスは、パスを記述するHTMLファイルとの位置関係を示す方法です。いくつかのパターンで、具体的に説明していきます。 HTMLとファイルが同階層にある場合このようなファイル構成で、index.htmlから同じフォルダ内にあるimage.jpgを指し示す方法です。パスの記法で、文頭の「 ./ 」ドットスラッシュ記号をカレント（現在位置）と呼び、パスを記述したファイルがあるフォルダを示します。 imgタグのsrcに、カレント記号を使ってからimage.jpgまでのパスを記述すると、このようになります。 <img src="./image.jpg" > また、カレント記号は省略することもできます。 <img src="image.jpg" > どちらの記法でも、記述したHTMLファイルと同じフォルダ内のimage.jpgを指し示しています。ファイルがHTMLより下のフォルダ階層にある場合次に、こちらの図のように、index.htmlの下層フォルダにあるimage.jpgを示す場合です。このパスは、今まで説明したカレントやフォルダ名のパス記法で、以下のように記述します。 <img src="./images/image.jpg" > また、カレント記号を省略すると、以下のようにも記述できますね。 <img src="images/image.jpg" > ファイルがHTMLより上のフォルダ階層にある場合最後に、index.htmlの上層フォルダにあるimage.jpgを示す場合です。パスの記法では先頭の「 ../ 」ドットドットスラッシュ記号をペアレント（親）と呼び、上位のフォルダ、親フォルダを示します。ファイルが上位のフォルダ階層にある場合のパスは、親フォルダ記号を使ってこのように記述します。 <img src="../image.jpg" > これを応用すると、下記のように複雑なパスも簡単に示すことができます。親フォルダの中にある、imagesフォルダの中にある、image.jpgを示すパスは、このように記述します。 <img src="../images/image.jpg" > パスの記号の意味が理解できると、簡単に記述することができますね。 imgタグを使って画像ファイルを表示するには、パスを記述して正しい道順を示すことがとても大事ですので、ぜひマスターしてください。 [PR] Webデザインで副業する方法とは【応用】画像の表示スタイルを調整する画像の表示スタイルは、imgタグにCSSを指定して調整していきます。 ※CSSの書き方（記述ルール）や、HTMLとの適用方法（埋め込み方）を解説した記事を読んでおくと理解が深まります。画像の大きさを調整する imgタグにCSSを指定せずに表示すると、元々の画像サイズがそのまま表示されます。はみ出てしまったり、小さすぎたり、レイアウトが崩れてしまうので、きちんと大きさを指定したいですよね。画像サイズの幅を指定するには、width、高さを指定するにはheightというプロパティを使います。 img.image1{

HTML

実は簡単！Photoshopで写真をイラスト風にする方法【初心者向け】現役デザイナーが解説

写真を使って少し変わった加工をしたいと思ったことはないでしょうか？ Photoshopではフィルターギャラリーなどを使って写真を簡単にイラスト風に加工することができます。初心者向けに2つの方法を紹介するので、自分に合ったほうで試してみてください。目次今回は下記の2つの方法でご紹介します。フィルターギャラリーを使用した方法輪郭検出を使用した方法 (※今回の作業はすべてAdobe PhotoShop CCのバージョンで行っています) 田島悠介今回は写真からイラスト風の画像にする方法を練習してみよう。大石ゆかり田島メンター！！具体的にはどういった機能を使うんですか～？田島悠介主に使うのは「フィルターギャラリー」かな。あと「輪郭検出」を使った方法も、いかにも鉛筆で描いたような雰囲気になって面白いよ。大石ゆかりぜひやってみたいです！よろしくお願いします！今回はこの写真を使って加工していきます。フィルターギャラリーを使用した方法 Photoshopの「フィルター」機能を使うことで、写真を絵画やイラスト風にすることができます。色鉛筆フレスコ塗料水彩画カットアウトエッジのポスタリゼーションこするドライブラシパレットナイフ Photoshopのメニューから「フィルター」→「フィルターギャラリー」を選択します。 (フィルターギャラリーは、背景レイヤーのままでも処理が可能です) 左にプレビュー、中央に適用できる効果の一覧、右には細かい調整に使用する欄が表示されます。フィルターギャラリーを使用した加工にはいろいろなものがありますが、今回はその中から「アーティスティック」フォルダに保存されているフィルターを使って画像をイラスト風にします。 1.色鉛筆「色鉛筆」を使って加工した写真がこちらです。それでは、実際に作ってみましょう。「フィルターギャラリー」→「アーティスティック」→「色鉛筆」を選択し、左のプレビュー画面を見ながら以下の設定を調整します。芯の太さ：値を小さくすると細かく色が彩色されます。筆圧：値を小さくするとベタ塗りになります。用紙の明るさ：「0」にすると、黒一色で塗りつぶされた状態になりますが、値を大きくすると背景色に設定された色が反映されます。背景色は、Photoshopの左に表示されているツールバーの背景色アイコンで確認できます。今回は下記の内容で設定しています。背景色：白芯の太さ：3 筆圧：15 用紙の明るさ：50 色鉛筆で書いたような画像の完成です。 2.フレスコ次に、「フレスコ」を使って加工してみましょう。「フィルターギャラリー」→「アーティスティック」→「フレスコ」を選択し、左のプレビューを見ながら以下の設定を調整します。ブラシサイズ：値を大きくするとテクスチャが失われます。画像がイラスト風になります。ブラシの細かさ：値を小さくするとテクスチャが追加されます。テクスチャ：値を大きくすると境界線が強調されメリハリがでます。今回は下記の内容で設定しています。ブラシサイズ：2 ブラシの細かさ：8 テクスチャ：3 境界線が強調された、メリハリのある画像の完成です。 3.塗料「塗料」を使って加工すると以下のようになります。「フィルターギャラリー」→「アーティスティック」→「塗料」を選び、左のプレビューを見ながら以下の設定を調整します。ブラシサイズ：値を大きくするとテクスチャが失われます。画像がイラスト風になります。シャープ：値を大きくすると境界が強調されます。ブラシの種類：「シンプル」以外のブラシを設定すると、「ぼかし」などの違う効果を追加することができます。今回は下記の内容で設定しています。ブラシサイズ：13 シャープ：40 ブラシの種類：シンプル少し大きめの筆で描いたような仕上がりになります。 4.水彩画次に、「水彩画」の加工をしてみましょう。「フィルターギャラリー」→「アーティスティック」→「水彩画」を選択し、左のプレビューを見ながら以下の設定を調整します。ブラシの細かさ：値を小さくするとテクスチャが追加されます。シャドウの濃さ：値を大きくすると暗部が強調され、画像が黒く塗りつぶます。テクスチャ：値を大きくすると境界線が強調されメリハリがでます。今回は下記の内容で設定しています。ブラシの細かさ：8 シャドウの濃さ：0 テクスチャ：1 元の画像より柔らかな印象になりました。 5.カットアウト次に、「カットアウト」を使って加工した画像です。「フィルターギャラリー」→「アーティスティック」→「カットアウト」を選択し、左のプレビューを見ながら以下の設定を調整します。レベル数：値が小さいほど色が単純に、大きいほど複雑に(元画像に近い状態に)なります。エッジの単純さ：値が小さいほど細かく、大きいほど大まかなタッチとなります。エッジの正確さ：値が小さいほど崩れた感じになり、大きいほど元画像に近くなります。今回は下記の内容で設定しています。レベル数：7 エッジの単純さ：1 エッジの正確さ：3 色紙を貼り付けたような画面になります。 6.エッジのポスタリゼーション次に、「エッジのポスタリゼーション」を使って加工した画像です。「フィルターギャラリー」→「アーティスティック」→「エッジのポスタリゼーション」を選択し、左のプレビューを見ながら以下の設定を調整します。エッジの太さ：値を大きくすると境界線の線が太くなります。エッジの強さ：値を大きくすると境界線の色が濃くなります。ポスタリゼーション：値を小さくすると、テクスチャが失われよりイラスト風になります。今回は下記の内容で設定しています。エッジの太さ：4 エッジの強さ：1 ポスタリゼーション：6 線が強調されたような画像になります。 7.こする次に、「こする」を使って加工した画像です。「フィルターギャラリー」→「アーティスティック」→「こする」を選択し、左のプレビューを見ながら以下の設定を調整します。ストロークの長さ：値を大きくすると「こする」ストロークが長くなります。領域のハイライト：値を大きくするとハイライトされる範囲が広がります。適用量：値を大きくするとコントラストが強くなります。今回は下記の内容で設定しています。ストロークの長さ：2 領域のハイライト：0 適用量：2 線で擦ったような画像になります。 8.ドライブラシ次に、「ドライブラシ」を使って加工した画像です。「フィルターギャラリー」→「アーティスティック」→「ドライブラシ」を選択し、左のプレビューを見ながら以下の設定を調整します。ブラシサイズ：値を大きくするとテクスチャが失われます。画像がイラスト風になります。シャープ：値を大きくすると境界が強調されます。ブラシの種類：「シンプル」以外のブラシを設定すると、「ぼかし」などの違う効果を追加することができます。今回は下記の内容で設定しています。ブラシサイズ：6 ブラシの細かさ：9 テクスチャ：1 ブラシでぼかしたような画像になります。 9.パレットナイフ最後に、「パレットナイフ」を使って加工した画像です。「フィルターギャラリー」→「アーティスティック」→「パレットナイフ」を選択し、左のプレビューを見ながら以下の設定を調整します。ストロークの大きさ：値を大きくするとテクスチャが失われ、全体が塗りつぶされていきます。ストロークの正確さ：値を大きくするとテクスチャが追加されます。ただし、「ストロークの大きさ」が０より大きい時にのみ効果がでます。線のやわらかさ：値を大きくすると境界がぼやけ、全体的にやわらかい雰囲気になります。今回は下記の内容で設定しています。ストロークの大きさ：10 ストロークの正確さ：3 線のやわらかさ：2 「3.塗料」よりも、さらに大きめのブラシでぼかしたような画像になります。フィルターギャラリーを使った方法は以上です。田島悠介フィルターギャラリーを使った方法だよ。大石ゆかりこんなにたくさんの効果があるんですね！しかもやりたい表現を選ぶだけで、いろいろ適用できるので便利です。田島悠介各オプションは写真の大きさや状態によって全部変わってくるので、プレビューを見ながら動かしてみよう。大石ゆかりはい！次は輪郭検出ですね。 [PR] Webデザインで副業する方法とは輪郭検出を使用した方法 2つ目の方法です。引き続き、1つ目の方法で使った画像を輪郭検出とレイヤーの属性を使い加工していきます。まずは、期待する仕上がりにならなかった場合にいつでもやり直せるようオリジナル画像を複製し、加工用の画像を用意します。 1.画像レイヤーを右クリックし、「レイヤーを複製」を選択します。 2.「レイヤーを複製」ダイアログが開きます。ダイアログで、複製レイヤーに「明るさ調整」と名前をつけ「OK」をクリックし、複製レイヤーを作成します。 3.同じ操作を繰り返し「輪郭」レイヤーを作成します。編集しないレイヤーは、レイヤーの左にある目のアイコンをクリックし、非表示にします。 4.「明るさ調整」レイヤーを選択し、「色調補正」パネルの「コントラスト」を選択します。「色調補正」パネルが表示されていない場合は、メニューの「ウィンドウ」→「色調補正」をクリックすると表示されます。 5.「明るさ」の部分を上げて「OK」をクリックします。今回は以下のように調整しています。 6.「輪郭」レイヤーを編集します。レイヤーの左にある目のアイコンをクリックし表示状態にしてから選択し、メニューの「フィルター」から「表現方法」→「輪郭検出」をクリックします。 7.「輪郭検出」を設定すると、以下のようにテクスチャが失われ、輪郭が強調された画像になります。 8.「輪郭」レイヤーの「不透明度」を下げ、完成です。「輪郭」レイヤーの「不透明度」を下げ、下の「明るさを調整」レイヤーのテクスチャをブレンドすることで、画像をイラスト風に加工することができます。イラスト風にうまく仕上がりましたか？少し変わった加工がしたい方はぜひ試してみてください。執筆してくれたメンターメンターOM Webデザインの勉強のためロサンゼルスに留学。その後、現地のWeb制作会社に就職し、Webデザイナーとしてのキャリアをスタート。現在もロサンゼルスで働く傍ら、フリーランスのWebデザイナーとして、アメリカだけでなく日本からのWeb制作も請け負う。また、画像のリタッチが得意なので、しばしばリタッチの依頼も請け負う。田島悠介輪郭検出を使ったやり方では複数のレイヤーを使って、それぞれに役割を持たせるんだ。大石ゆかりフィルターギャラリーを使った方法と比べると、ちょっと複雑ですね。田島悠介その分、各レイヤーの色相や明るさを調整することで、さまざまな調整ができるというのもあるね。自分のやりたい表現に応じて、いろんな方法を試してみよう。大石ゆかり分かりました！ありがとうございます！ Photoshopをさらに使いこなしたい場合は、Photoshopで手ぶれ写真を補正する方法も合わせてご覧ください。 [お知らせ]TechAcademyでは初心者でもフォトレタッチをマスターできるオンラインPhotoshop講座を開催しています。現役デザイナーに毎日チャットで質問することができます。

Photoshop

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

HTMLで画像の画質が荒くなる原因と対処法を現役デザイナーが解説【初心者向け】