最終更新日:2025年07月26日
WEBノウハウ
「ホームページをリニューアルしたい」と思った時に考えること
会社でホームページのリニューアルを任された。以前から個人のホームページの改善を考えているが、何から手をつけたらいいのかわからない・・・始めるタイミング、やる手順が分からなくて、なかなか実行できていない方も多いと思います。
そこで今回は、ホームページリニューアルをする時に気をつける事をまとめました。初めてホームページを作る方の為にもなると思うので、是非参考にして頂けると幸いです。
下記に当てはまる企業や個人事業主の方は、HPリニューアルの検討が必要かもしれません。
❶古すぎてスマホに対応していない
❷セキュリティ対応ができていない(ドメインのhttps化)
❸更新&運用が大変
❹管理費の削減
10年以上前に作ったホームページだと、スマートフォンの表示に対応していない場合があります。近年スマートフォンでの閲覧の割合が50%以上と増えてきており、対応はマストになっています。
ブラウザとサーバ間でデータを暗号化してやりとりする仕組みのことで、対応することでユーザーへの信頼や安心感へとつながります。
定期的な更新や運用を行っていきたいが、手が回らず止まっているということはよくあります。アクティブなサイトはそれだけ見に行く理由になるのでホームページの効果を最大化できます。月に数回の更新プランもあるサービスもあるのでそちらを検討することもいいと思います。
維持管理費が高くコストを下げたい場合には、サブスクなどのサービスの検討が必要です。月額制でオーダーメイドで作るよりもコストをかけずに作ることが可能です。
・自分で作る
感覚的に自分で簡単にホームページが作れるサービスがあります。手間はかかりますが、コストを抑えて作りたい方は一度使ってみてください。テンプレートも豊富にあるサービスもあるのでデザイン面も0から作らず安心です。
・サブスクサービス
月額制で安く簡単に作れるサービスも多く存在しています。テンプレートに沿って制作、半オーダーメイドで制作など、各サービスによって提供される内容は様々です。中にはサポート体制や月に数回の更新もセットになっているサービスもあるので、WEB知識がなくても・自社での管理が不安な方も、安心して使用できます。
・オーダーメイド
一般的なホームページ制作になります。ご自身のビジネスなどに合わせ、思い描くサイトデザインにすることができます。その分費用もかかってくるので、コストと見合うようであれば検討して頂ければと思います。
・リニューアルの目的
目的はさまざまですが明確にしておくことが大切です。単なるデザイン改善ではなく、「スマホタイプにしたい」や「ブランディングをしたい」など具体的な目的を言語化しましょう。
・現状サイトの課題
現状のホームページでの悩み・改善したい点(見え方・できたらいい事など)を箇条書きでいいので、具体的に言語化しましょう。
・構成内容
こちらはコンセプトや社長挨拶・問い合わせフォーム・SNS連携など、入れたい内容をイメージしておくとデザインを作りやすくなります。
・原稿と写真
上記の内容が決まったら、原稿(テキスト)と写真素材の準備が必要です。予算があれば撮影やコピーライターへ原稿作成の依頼も検討しましょう。
・スケジュールと依頼予算
予算感を決め(XX万円、XX〜XXX万円など)、大枠でいいのでサイトを公開日をいつにしたいのか、希望の日程を設定しましょう。それを持って、依頼先といつまでにサイト構成案を完成させるのか?原稿や写真素材の準備が必要かスケジュールに落としていきましょう。
UX(ユーザーエクスペリエンス)の向上:
レスポンシブデザインや使いやすいナビゲーションの導入により、サイトを見る人(ユーザー)がサイトを快適に利用できます。情報へのアクセスがスムーズになり、訪問者が求める情報に迅速にアクセスできるようになります。
コスト削減と効率化:
リニューアルにより、より効果的な運営が可能になります。最新のテクノロジーや最適化されたプラットフォームの導入により、コストを削減しつつも効率的な運営ができるようになります。
様々なデバイスからのアクセス向上:
レスポンシブデザインを採用することで、スマートフォンやタブレットなどの様々なデバイスからもサイトにアクセスしやすくなります。これにより、ユーザーは自分の選好するデバイスで快適にサイトを閲覧できます。
・時間と費用がかかる
どのくらいの内容でリニューアルするかにもよりますが、時間がかかります。また、制作会社や使用するサービスによって費用感も変わってくるので、社内やご自身で検討する時間が必要です。
・URLが変わると、検索エンジンでの順位が下がる可能性がある
リニューアルに伴い、URLの変更やコンテンツの再構築が行われる場合、検索エンジンでのランキングやインデックスに影響を与えることがあります。これにより一時的にアクセスが減少することがあります。
ホームページリニューアルは、ただ見た目だけのデザイン変更と考えずに、しっかりと目的を設定してサービスや制作会社さんを選定することが大切です。無料で数ヶ月使用できるサービスもあるので、色々と調べてみて検討してみてください。
最後まで読んで頂き、ありがとうございます。
会社のホームページ制作・リニューアルにおすすめの
ホームページ制作サービス「PASSITE(パッサイ)」
だれでもパッ!と、WEBサイトが作れる。
デザインを選んで、素材を準備すれば、あとは5日間、待つだけ。
続きを見る→
最終更新日:2025年07月23日
WEBノウハウ
ファイル形式[拡張子]、あなたは理解できていますか?
「.jpeg」や「.pdf」などファイル名の末尾に「ピリオド」を挟んで表示される文字列を『拡張子』と呼びます。今回はデザイン(WEB・グラフィック)をする上でよく出てくる6つの拡張子を紹介します。なんとなく意味は理解しているけどよく分かっていないという方は、是非ブックマークで保存してください。
拡張子とは、データファイルを識別するためにファイルの末尾に「.(ピリオド)」の後ろにつけられる文字列のことです。下記例のように「.」ピリオドより前のデータ名は自由に変えることができます。
データファイル名の構造は、「任意のデータ名.拡張子」になっています。
【例】passite_images.png
┗任意のデータ名┛┗拡張子┛
JPEG(Joint Photographic Experts Group)は、画像圧縮に使用されるフォーマットで、主に写真やイラストの圧縮に適しています。JPEGは損失圧縮を使用し、データサイズを縮小するため、画質が劣化する可能性がありますが、可逆圧縮よりも圧縮率が高いです。多くのデジタルカメラやウェブ画像で広く使用され、色彩豊かで滑らかなトーンを表現できます。RGBカラーモデルをサポートし、多くのアプリケーションが対応しています。ファイル拡張子は通常.jpgまたは.jpegです。JPEG(またはJPG)画像は一般的に小容量で、オンライン共有やウェブ表示に適しています。
【JPGとJPEGの違い】
JPGとJPEGは実質的に同じ画像フォーマットを指します。”JPEG”はファイルフォーマットの正式な名前で、JPGはこのフォーマットの一般的な略語です。一般的には、画像ファイルが.jpegという拡張子を持つこともあります。したがって、JPGはJPEGの略語で、どちらも同じファイル形式を表すものです。ファイル名の拡張子や略語の使用には歴史的な経緯やプラットフォームによる違いがありますが、実際には両者は同じものを指しています。したがって、JPGとJPEGの違いは名前の表記法や拡張子に関する違いであり、画像データの中身や特性には差異はありません。
PNG(Portable Network Graphics)は静止画像のフォーマットで、以下はその主な特徴です。PNGは非圧縮または可逆圧縮の形式を採用し、高品質な画像を提供します。また、透明な背景(アルファチャンネル)のサポートがあり、写真、図形、ロゴなどの多くの種類のイメージに適しています。色深度は8ビットから48ビットまで幅広く、RGBおよびグレースケールのカラースペースに対応しています。また、データの損失がなく、文字やエッジが鮮明であるため、ロスレスフォーマットとして幅広く使用されています。一般的なファイル拡張子は.pngで、ウェブ画像、アイコン、透過画像、プリント媒体、デザインプロジェクトなど、多くの用途に利用されています。
GIF(Graphics Interchange Format)は、静止画像やアニメーションを表現するために用いられるフォーマットで、主な特徴は次の通りです。GIFは256色のパレットを使用し、可逆圧縮を提供するため、単純なイラストやアニメーションに向いています。短いループアニメーションとして幅広く利用され、ウェブ上で多くのアイコンやミームが制作されています。透明な背景をサポートし、アニメーションの一部を透過させることが可能です。GIFはシンプルで一般的であり、ファイルサイズが小さいため、ウェブ上で容易に共有できる利点があります。一般的なファイル拡張子は.gifで、多くのウェブブラウジングプラットフォームでサポートされています。
SVGの正式名称は『Scalable Vector Graphics』です。JPEG、GIF、PNG、TIFFは、色の点の集合で、拡大すると画像が荒れるビットマップ画像またはラスター画像と呼ばれます。一方、SVGはベクトル画像またはベクター画像と呼ばれ、点や線を数値化し、コンピュータが計算して表示するため、拡大しても画像が劣化しません。SVG画像を使用すると、スマートフォンの小さな画面から高解像度の大画面ディスプレイまで、美しい画質でウェブサイトを表示できます。また、画像ファイルのデータサイズも小さいです。SVGの欠点は、点と線で表現されているため、写真のような微細な色や輪郭の表現が難しいことです。そのため、ウェブサイトのロゴやタイトルなどに適しています。
TIFF(Tagged Image File Format)は、高品質な画像ファイルフォーマットで、主に印刷業界や専門的なグラフィックデザインに使用されます。主な特徴は以下の通りです。TIFFは可逆圧縮を使用し、画質の損失がないため、プロ品質の画像保存に適しています。多彩な色深度(通常は8ビットから16ビットまたは32ビット)とカラースペースをサポートし、高品質な写真や図形イメージを保存できます。透明情報や多重画像レイヤーを含めることができ、プロジェクトの要求に合わせた柔軟なオプションを提供します。一般的なファイル拡張子は”.tiff”または.tifで、印刷、出版、画像処理、医用画像、アート制作など幅広い分野で使用されています。ただし、ファイルサイズが大きく、ウェブ用途などでの利用は限られています。
HEIC(High Efficiency Image File Format)は、画像ファイルフォーマットの一つで、主にiOSデバイスで使用されます。特徴は以下の通りです。HEICは非常に効率的な圧縮アルゴリズムを使用し、高品質の画像を小容量で保存できます。24ビットのカラースペースをサポートし、透明な背景も含めて多彩なカラースペースを表現可能です。また、静止画像やアニメーション、HDR画像、深度マップなど、多くの要素を1つのファイルで統合できます。HEICはJPEGよりも高品質な画像を提供し、データの節約に寄与します。ただし、古いデバイスやプラットフォームではサポートされないことがあるため、互換性には注意が必要です。一般的なファイル拡張子は.heicで、主にAppleデバイスで使用されます。
いかがでしたでしょうか?ファイル形式(拡張子)それぞれの特徴を知ることで、制作するメディアに最適な素材を準備することができます。デザイナーや制作会社とのやりとりの回数も減らせるので効率アップに繋がるので是非参考にして頂けると嬉しいです。
最後まで読んで頂き、ありがとうございます。
だれでもパッ!と、WEBサイトが作れる。
デザインを選んで、素材を準備すれば、あとは5日間、待つだけ。
続きを見る→
最終更新日:2025年07月22日
WEBノウハウ
ホームページとは?意味・仕組み・種類・作成方法について
インターネットの普及により、個人や企業にとってホームページの存在はますます重要になっています。この記事では、ホームページの基本的な意味から、仕組み、種類、そして作成方法について解説していきます。
ホームページとは複数のWEBページから構成されたもので、「トップページ」や「ブログ一覧ページ」などの様々なWEBページをまとめたサイト全体のことを指します。
一般的には、特定の個人や団体、企業などの情報をまとめて提供するページとして利用されます。ホームページにはテキスト、画像、動画、リンクなどのコンテンツが含まれ、訪問者が情報を得るための入り口となり、主に以下の目的で利用されます。
①情報提供
製品やサービス、個人のプロフィール、活動内容などを紹介するため
②ブランディング
企業や個人のイメージをユーザーに伝えるため
③コミュニケーション
お問い合わせフォームやブログを通じてユーザーとのやり取りをするため
ホームページとWEBサイトは本来異なる意味を持ちますが、一般的には同じものとして使われることが多いです。どちらもインターネット上で情報を提供するための媒体を指します。※英語圏では「ホームページ」と伝えると「トップページ」と認識されてしまうため、英語圏では「WEBサイト」を使いましょう。
*トップページとは、Webサイトの入り口となるページのことです。Webサイトまたはホームページの入り口となるページをトップページと呼びます。トップページは、Webサイトの顔とも言える重要なページであり、訪問者が最初に目にする場所です。
ホームページは、ウェブサーバーに保存されたHTML(HyperText Markup Language)ファイルによって構成されており、インターネットに接続したパソコンやスマートフォンからブラウザを通じてアクセスできます。ブラウザは、指定されたURL(Uniform Resource Locator)を基に、サーバーから情報を取得し表示します。ホームページの見た目や機能は、HTMLやCSS(Cascading Style Sheets)でデザインされ、JavaScriptやPHPなどのプログラミング言語で動的な機能が加えられることもあります。
*動的サイトとは、アクセスした「ユーザー」「時間」「場所」といった特定の条件に応じて、異なる情報を自動で表示するホームページのことで、静的サイトとは、「誰が」「いつ」「どこで」見ても同じ情報が表示されるホームページのことです。
ホームページは特定のURL(Uniform Resource Locator)を持ち、その中核となるのがドメイン名です。ドメイン名は、インターネット上でホームページを識別するための住所のようなものです。
ホームページのデータはサーバーに保存され、ホスティングサービスを利用して公開されます。サーバーは常時稼働しており、アクセスがあった際にデータを提供します。
*ホスティングとは、ウェブサイトを公開するために必要な環境をレンタルすることです。
ホームページは主にHTML(構造)、CSS(デザイン)、JavaScript(動きやインタラクション)の3つの技術で構成されています。これらが組み合わさることで、ユーザーにとって見やすく、使いやすいページが完成します。
1.ヘッダー: サイト名、ロゴ、ナビゲーションメニューなど
2.メインコンテンツ: ページ毎の主な情報、サービスの紹介など
3.ナビゲーションメニュー: 利用者を様々なページへ誘導するためのメニューバー
4.フッター: お問い合わせ先、ホームページのリンクをまとめたサイトマップなど
ユーザビリティ(サイトの見やすさ)を考慮してホームページを構築することが重要となります。
ホームページは目的や用途に応じてさまざまなタイプが存在します。
など目的と用途に応じて適切な種類を選ぶことが重要です。
初心者でも基本的なHTMLやCSSを学ぶことで、簡単なホームページを作成できます。無料の学習サービスやYoutubeなど検索して初心者向けのチュートリアルなどを活用しましょう。
WordPressやStudioやWixなどのCMSを使えば、プログラミングの知識がなくてもホームページを作成できます。多くのテンプレートが用意されており、デザインも簡単にカスタマイズ可能です。特にWordPressは豊富なテンプレートやプラグインが利用できて、カスタマイズ性が高いので、ビジネス用のホームページにも適しています。自分のペースで進められ、より多機能なホームページが作れます。
低コスト優先で作成を依頼したい場合は、フリーランスのデザイナーやエンジニアに依頼するのも良い選択肢です。
ホームページ制作会社に依頼すれば、プロフェッショナルなデザインと機能を備えたホームページを作成できます。費用はかかりますが、時間や労力を節約できます。様々なサービスがあるので、下記サイトよりあなたにあった制作サービスを検索してみてください。
ホームページを作成する目的を明確にし、目的に合ったデザインとコンテンツ内容を、見る人へ提供しましょう。
また、サイトを見た方をどう行動させるか(電話する・資料請求する・購入する・SNSヘ遷移)も明確化しサイトデザインに反映すると良いでしょう。
スマートフォンやタブレットからのアクセスが増加しているため、レスポンシブデザインを採用してモバイル対応を確保しましょう。
*レスポンシブデザインとは、ウェブサイトがパソコン、スマートフォン、タブレットなど、様々なデバイスの画面サイズに合わせて、自動的に表示を調整するデザイン手法です。
情報の見やすさ・分かりやすさ・伝わりやすさを重視したデザイン、コンテンツ内容を心がけ、訪問者が使いやすいようにナビゲーションを分かりやすくする事で、必要な情報に簡単にアクセスできるようにします。
*サイトナビゲーションとは、Webサイト上で目的のページを探す手がかりとなる、リンク付きの表示のこと
ホームページは情報発信やブランディング、ユーザーとのコミュニケーションにおいて欠かせないツールです。様々な種類と作成方法を理解した上で、目的に合ったホームページを作ることで効果的に情報を届けることができます。また定期的な更新や改善を行うことで、時代やユーザーのニーズに合った内容を提供し続けることが重要です。
ご自身のホームページを作成するにあたり、本記事がご参考になれば幸いです!
だれでもパッ!と、WEBサイトが作れる。
デザインを選んで、素材を準備すれば、あとは5日間、待つだけ。
続きを見る→
最終更新日:2025年07月19日
WEBデザイン
無料で使えるイラスト素材、抑えておきたい厳選5サイト!
デザインを作る時に困ることの一つは、イラスト素材の準備だと思います。
・イラストを制作するスキルがない
・素材サイトが多すぎる
・素材サイトのライセンスや著作権がわからない
・イラストを発注する予算がない
など、上記のような方に向けて、今回は使い勝手がいい素材サイトを5つピックアップしましたので、是非参考にしていただけると幸いです。
よく使う人物のイラストをシーン別とタッチ別で3サイト、その他の素材で地味ですが使用頻度が多いアイコンと吹き出しの素材サイトをご紹介いたします。
文字通り無料でイラストがダウンロードできますが、どこまでも自由に使用することが認められている訳ではありません。一例として
・再配布の禁止
・販売の禁止
・公序良俗に反する使用の禁止
・商用利用の禁止
など素材使用に関するルール(禁止事項・条件等)が、各サービスの利用規約に定められているので、使用前に必ず配布先サイトにある利用規約を確認してから使用することをお勧めします。
https://www.linustock.com/
■商用利用:◯
■加工:◯
■ファイル形式:PNG(線のみと色のみ)・EPS
■クレジット表記:不要
■ユーザー登録:不要
■利用規約:https://www.linustock.com/termsofuse
タッチが統一されたシンプルで加工しやすい「線画」イラストがメインの素材サイトです。adobe illustaratorで加工可能なEPSファイルは線画のみとなっていて自由に色をつけることができます。また、加工テクニックやこんなイラストがほしい!など、のリクエストも送ることができるので便利です。
https://jitanda.com/
■商用利用:◯
■加工:◯
■ファイル形式:JPG・PNG・SVG・Ai
■クレジット表記:不要
■ユーザー登録:不要
■利用規約:https://jitanda.com/terms/
ちょっと癖のあるイラストが多いので、変わったデザインや普通と違う印象に仕上げたい時に、相性が良さそうな素材サイトです。ダウンロード前にサイズの編集や、配色のカスタマイズなど便利な機能があります。
https://soco-st.com/
■商用利用:◯
■加工:◯
■ファイル形式:PNG・EPS・SVG
■クレジット表記:不要
■ユーザー登録:不要
■利用規約:https://soco-st.com/guide
ソコソコ使えるシンプルなイラストをコンセプトにした、シンプルで使いやすい素材サイトになっています。筆者個人的にはソコソコではなくめちゃめちゃ使用頻度の高い、使いやすい素材ばかりが魅力的です。モノクロとカラー両方のイラストが準備されていて、サイト内で色を変えることができるので、とても使いやすい設計になっています。
http://fukidesign.com/
■商用利用:◯
■加工:◯
■ファイル形式:JPG・PNG・SVG・Ai
■クレジット表記:不要
■ユーザー登録:不要
■利用規約:https://fukidesign.com/terms/
1000種類以上の吹き出しがある素材サイトで、「吹き出し」はここ見るだけで欲しいものが見つかる!と個人的には思っています。こちらのサイトもいろいろな編集機能がついていて、サイズ・配色の他、バリエーションも選べたり、吹き出しの中にテキストを入れる機能もついています。
https://icooon-mono.com/
■商用利用:◯
■加工:◯
■ファイル形式:PNG・JPG・SVG・Ai・photoshop EPS
■クレジット表記:不要
■ユーザー登録:要
■利用規約:https://icooon-mono.com/license/
6000種以上のアイコンがまとめられた素材サイトで、ビジネスシーンで使用できるアイコンが豊富にあるところも魅力的です。ダウンロード前に色を変えられるので、配色の検証がしやすいです。
無料で使えるイラスト素材のサイトを5つ厳選してご紹介しました。メインビジュアルからサブ的な役割まで幅が広く、万能に活用できるのがイラストです。いろいろなタッチの素材サイトを知っておくことで、振り幅の広い表現が可能になります。是非ブックマークしてご利用ください。
最後まで読んで頂き、ありがとうございました。
だれでもパッ!と、WEBサイトが作れる。
デザインを選んで、素材を準備すれば、あとは5日間、待つだけ。
続きを見る→
最終更新日:2025年07月15日
WEBノウハウ
note AIアシスタント(β)を使ってみた!
chatGPTを代表するAI技術がnoteでも使えるようになったので「百聞は一見に如かず」色々と遊んでみました。
①書き始める前に
②表現をととのえる
③文章をまとめる
④レビュー
⑤タイトル提案
⑥その他
上記が現在実装されている6項目で、より詳細な項目を下記にまとめました。記事を執筆する上で使い勝手がよさそうな6項目があります。
「note AIアシスタントβ」を使用する前は、0から100まで原稿を作成するイメージでしたが、どちらかというと「サポート」がメインAIの機能になっていて、構成や書き出しを考えてくれたり、文章自体の表現をさまざまなテイストに添削してくれる機能になっていて、「アシスタント」というネーミングなっている理由がわかりました。
それと一部の項目に[PRO]という記載が気になると思います。
これがある項目については「note pro」の会員しか利用できないようになっています。また、「一般」の会員タイプは1ヶ月で5回しか利用できないので、お試し感覚で使用するイメージになります。ちなみに「noteプレミアム」は月額500円で利用でき加入月は無料で始められます。「note pro」に関しては法人向けのサービスで、月額80,000円のプランになります。
使い方はめちゃめちゃシンプルです。noteにログインしたら右上にある「投稿」のボタンをクリックします。
次に投稿文を入力する画面が出てくるので、左側にある「+」のアイコンをクリックします。
記事を書くためのツールや装飾するツールが出てくるので、一番上の「AIアシスタント(β)」を選びましょう。
そうすると冒頭でまとめた6つの項目が出てくるので、使いたいものを選び、指示を入力ししばらく待つとAIが自動でテキストを生成してくれます。
試しに下記の内容で「記事のアイデア」と「記事の構成」の2種類をnote AIアシスタントに質問してみました。
「ホームページが必要な理由を3つの項目で提案してほしい」
▼AIアシスタントが出した解答がこちら
次に「3つの項目」というリクエストに沿って、「集客のためのツール」「信頼性と認知度の向上」「コミュニケーションと相互作用の強化」の3つのポイントで提案してもらいました。これに文章を追記したり、統計データなどのグラフや写真などを貼り付けることで、記事を時短で作れそうです。
▼AIアシスタントが出した解答がこちら
こちらは構成の提案なので、箇条書きでシンプルな内容になっています。「構成の提案」は何を書いていいのかがわからない時のリサーチやネタとして活用できるなと感じました。
AIアシスタント(β)を使用して感じたことは「質問力」が大切だなと感じました。これは「ChatGPT」でも同様だと思います。「3項目でまとめてほしい」や「◯◯を10案出して」など具体的に数字で聞くと、得たい結果を生成してもらいやすくなりそうです。
今回も最後まで読んで頂き、ありがとうございました。
だれでもパッ!と、WEBサイトが作れる。
デザインを選んで、素材を準備すれば、あとは5日間、待つだけ。
続きを見る→
最終更新日:2025年07月11日
お役立ち情報
【Microsoft PowerPoint(パワーポイント)のデザイン】最低限 気をつけたい3つのポイント!!
仕事をする中で、パワーポイントを使用して資料作成をする機会があると思います。テンプレートを使っているけどいい感じにならない・・・、フォント選び方がよくわからない・・・、配色が何だかしっくりこない・・・など多くの悩みがあると思います。そんな方にオススメ!これさえ押さえておけば、いい感じのスライドデザインができるポイントを3つご紹介いたします。
よくある悩みとして「フォント」「メリハリ(強弱)」「配色」。
この3つを押さえて基礎力をアップしましょう。下記の見本をベースにデザインの改善を行っていきます。
フォントを絞りましょう!とよく聞くと思います。上記はフォントが4種類使われていて、全体の統一感が出せていません。フォントを絞ることで全体のイメージが統一でき、まとまりのある印象を与えることができます。使用するフォントの数は、多くて3つまで、メインのフォントとサブのフォントを決めて使い分けることが理想的です。
文字の強弱は一番小さいサイズと、一番大きいサイズの差をつけることでメリハリをつけることができます。上記サンプルでは、メインタイトルをBeforeより大きくし、最下部に入っているコピーライトの表記を小さくすることで強弱をつけています。また会社名と氏名の部分は大きさも変更してますが、字体の太さを変えることで微妙な強弱をつけバランスをとっています。
配色はとても迷うことが多いと思います。基本的にスライド資料であれば黒にキーカラーとなる1色を使うだけで、整った誌面を印象付けることができます。また色数を増やさずにキーカラーを薄くして背景やラインなどに使うことで雑多な印象になることを防ぎます。
レイアウトには基本的な型がいくつかあります。代表的なものを4つご紹介いたします。筆者もこの4つの型を使い回して資料をデザインしております。
・タイトル型
誌面の中心にシンプルに文字を配置するレイアウトで、表紙やトピックスの切り替わり、コンセプトの時に使用します。
・2分割型
上部にタイトルがあり、その下は左右に2分割されています。before・ afterや、左に文字、右に画像や図形など使い勝手がいいテンプレートです。
・縦3分割型
「3つのポイント」などで情報を絞ってデザインするときによく使用するレイアウトです。その他にも2/3をテキスト、1/3を画像や図形など誌面を分割して使う時の目安にもなります。
・横3分割型
単調になりやすい箇条書きを、オシャレに見せたい時などに使えます。右側にイメージがあるところもポイントで文字を左右いっぱいに広げないことで視認性もよくなります。
【やってはいけないこと】
「横3分割型」の最後でご紹介した「文字を左右一杯まで伸ばさない。」ことです。理由としては1行当たりの文字数が多いと、次の行がどれか分からなくなり読みにくくなります。
そういった時の改善策として「横3分割型」を利用するといい感じになります。
デザインをする上で難しいとされている余白ですが、資料デザインにおいては以下の2つに気をつけてデザインしてみましょう!
・要素間の余白を意識する
要素とは文字と文字の余白(行間など)や文字と写真の余白などです。下記のサンプルをご覧ください。左は要素間の余白が詰まっている状態です。窮屈な印象と少し読みにくさを感じるレイアウトになっています。
それを調整したものが左のレイアウトになります。このように各要素ごとに適切な余白をとってあげることで、視認性が高く読み進めたくなるレイアウトが完成します。
・誌面全体の余白(目次)
左のサンプルは、誌面を全部埋めないといけない!という固定概念が出てしまっているレイアウトです。これでも悪い訳ではありませんが、ワンランク上のデザインを目指すのであれば、あえて大きなスペースを作って上げてゆとりのあるレイアウトを心がけることも大切です。
今回お伝えした3つのポイントを意識するだけでも、パワーポイントを使用した資料デザインは良くなっていくでしょう。どれか一つでもいいので是非実践で活用してみてください!最後まで読んで頂き、ありがとうございました。
だれでもパッ!と、WEBサイトが作れる。
デザインを選んで、素材を準備すれば、あとは5日間、待つだけ。
続きを見る→