ヘルプ

余白を使って見やすいホームページにしよう

 

余白って?



ページエディタにある余白のパーツがありますが使っていますか?

どこに余白を作るのか?どんなふうに余白を作るのか?
余白によってデザインの印象や情報の伝わりやすさを大きく変わります。

 
  1. 読みやすさの改善:余白はテキストや画像の間に空間を作り出し、情報が詰め込まれ過ぎることなく、ユーザーがコンテンツを容易に消化できるようにします。適切な余白は、読みやすさを向上させ、ユーザー体験を改善します。
 
  1. コンテンツの構造化:余白を使ってコンテンツのグルーピングを行うことで、デザインの構造が明確になります。これにより、ユーザーは情報の階層や重要性を理解しやすくなります。
 
  1. 注目の促進:適切な余白の使用は、特定の要素への注目を促します。余白が多いほど、その中にあるコンテンツに目が行きやすくなり、重要なメッセージやアクション呼びかけが際立つようになります。
 
  1. ブランドイメージの向上:余白の多用は、洗練された、高品質な印象をユーザーに与えることができます。余白を上手に使うことで、ブランドの専門性や信頼性を強調できます。
 
  1. ユーザーの興味を維持:適度な余白は視覚的疲労を減らし、ユーザーがコンテンツに対して長く関心を持ち続けることを助けます。

余白は、単に空いているスペースではなく、コンテンツを際立たせ、調和させ、ユーザー体験を向上させるための重要な設計要素です。
効果的に使用することで、デザインのクリアさ、効果性、および美しさが高まります。


 

余白を使って見やすいホームページにしよう




余白なしと余白ありを比べると見やすさにも変化が出て来ますね。

余白はテキストや画像の間に空間を作り出し、情報が詰め込まれ過ぎると読みずらさも出て来ますので、余白ありの方が断然見やすくなってます。






次に、間違ったとこに余白をつけてしまうと、コンテンツのグルーピングがどこまでなのかわからなくなってしまいます。
間違った余白によってとても読み取りにくくなってます。






デザインには基本となる「4大原則」の中に 近接 (関係する情報を近づける)というものがあります。
 

人は位置的に近いものを「関係があるもの」と認識する習性があるので、位置関係を整理するだけで、視覚的に理解しやすかったり、読みやすいレイアウトを作ることができます。


近接のポイントは「 余白 」

関係するもの同士の余白は狭く、関係しないもの同士の余白は広くするなど余白の使い方もさまざまです。




余白パーツを使って見やすいホームページを作ってみましょう。



 

関連ヘルプ

ナビゲーション内にログアウトを追加してみよう

  ログアウトを追加しよう 閲覧者がログインしてる時にサイトのナビにログアウトボタンを設置したい場合 設定前のサイトプレビュー↓ このようにログインボタンしかありません。 今、ログインしてる状態なのか、それともログアウトしてるのかもわかりません。 そんな時のためにできる設定があります。 サイト編集のナビゲーションの編集画面に行きます。 オレンジ枠の編集に進みます。 ...

サイトからの通知メールを他社メールサーバー(SMTP)から送信する方法

1.他社メールボックスサービスにてメールアドレスを作成します。   メールアドレスの作成方法は、各社方法が違いますので、対象サービスのヘルプを確認するか、サポートにご連絡ください。 2.DNSの設定(迷惑メールにならない為の設定) ピッパサックでドメインを取得している場合 サイト管理 > ドメイン設定 > DNS設定 から   DNSに他社メールボックスのSPFレコードを設定します。(で...

カテゴリについて学ぼう

  ピッパサックでのカテゴリって? ピッパサックではタグ機能を使ってカテゴリ分けを行えます。 カテゴリについて理解すると、提供すべき情報を分類・整理し、それらを効率よく呼び出したりできます。 今回はブログのタグでカテゴリを学んでいきます。 基礎編 水彩画コース スタッフブログ 重要なお知らせ デジタルイラストコース   ブログ一覧表示の方法 カテゴリ表示の前に...

PAY.JPのクーポンコード

  PAY.JPのクーポンコード ピッパサックをご利用の皆様に、PAY.JPをお得にご利用していただくために、クーポンコードの発行をしております。 こちらでは確認方法と、適用方法を解説していきます。   クーポンコードの確認 ピッパサックの管理画面のサポート掲示板からクーポンコードの発行をしております。 ※クーポンコードを発行されていない方は、恐れ入りますがサポート掲示板よりお問い合わせ...

リレーションについて学ぼう

  リレーションについて学びましょう リレーションは関連や関係を示すためのものです。   プレミアム会員の作成方法 会員管理>グループ設定にて プレミアム会員 を作成します。 会員管理>会員追加でユーザーを追加します。 編集にて追加した山田太郎さんに、プレミアム会員のグールプを付与↓   動画タグにてプレミアムを作成 ストリーミング>...

リンク設定について学ぼう

  リンク設定について学ぼう   WEBサイトにおけるパスとは、画像ファイルなどのファイルがどの場所にあるかを表した文字列のことです。 間違ったパスの書いてしまうと、画像が読み込まれなくて正常に表示ができなくなってしまします。   パスの書き方は、「絶対パス」と「相対パス」の2種類があります。   絶対パスはどんなもの? 絶対パスが居所を最初から最後まで記載したフ...

予約システムを使って予約を管理しよう

  予約システムって? ピッパサックでの予約システムは、カレンダー上にユーザーがサイトから予約できます。 使い方が最初は難しいかもしれませんが、とても便利な機能なので使いましょう。   予約システムを使って予約を管理しよう まず、どんな予約にするか?時間や料金設定、予約可能数などしっかり決めてから作ることをお勧めします。 今回はシェアキッチンを1日1組のみ、平日と休日で...

リンクテキストを使って電話やメールへのリンクにつなげよう

  リンクテキストを使って電話やメールへのリンクにつなげよう ピッパサックではページエディタのパーツでリンクテキストを追加できます。 適切なリンクテキストを設定すると、ユーザーは目的のリンクにたどりつきやすくなります。 サイト編集>ページ>ページエディタからパーツを追加します。 テキストには表示させたいタイトルなどを入れて、リンクにはURLを入れます。 URLを入れるのは省略...

表を使って会社概要ページを作ってみよう

  会社概要ページを作ってみよう 会社概要ページは、会社情報を正確ユーザーに伝えてどんな会社なのか?会社の信頼性を高めるためにも大切なページです。 ピッパサックでは表を使ってとても簡単に会社概要ページを作ることができます。   固定ページで会社概要ページを追加しよう サイト編集>ページ>ページ追加から新しく固定ページを追加します。 ページエディタで編集しよう まず最初...

料金プランをパネルにして追加しよう

  料金プランを追加しよう ピッパサックでは、さまざまな料金プランが作れますが、わかりやすく伝えるためにプラン表を作ってみましょう!   コース名 水彩画コース デジタルイラストコース 水彩画&デジタルコース 内容 週1回動画配信(水彩画) ブログ閲覧(基礎編・水彩画) 課題提出 ライブ配信 週1回動...

求人フォームを作って、求人申し込みページを作ってみよう

求人フォームとは、応募者にとっては企業の求人の募集に参加するためでもあるし、企業にとって応募者の情報を取るためのとても大切なツールです。   フォームを使って求人フォームを作ってみよう 求人フォームに記載したいことを書き出します。   名前 必須 フリガナ 必須 生年月日 必須 年齢 必須 性別 必須 郵便番号 必須 住所 必須 電話番号 必須 メールアドレス 必須 ...

都度購入でパックを購入後、6ヶ月間のみを動画閲覧できるようにしよう

  都度購入でパックを購入後、6ヶ月間のみを動画閲覧できるようにしよう 都度購入で6ヶ月パックを購入してもらい、6ヶ月間のみ動画を閲覧できるような仕組みはどうすればいいですか? それは、クイック決済とグループの有効期限の設定を行うことでできるようになります。   グループを作ってみよう 会員管理>グループ設定から、6ヶ月間のみのグループを作ります。 グループを追加したら、...

パンくずリストを設置してみよう

  パンくずリストって?   パンくずリストってなんだろう? パンくずリストは、閲覧してる方に見やすい使いやすいホームページを作るために大切です。 ホームページを訪れたとき、「現在どこのページになのか?」疑問に思った時パンくずリストが道標となります。   コーポレートサイトの例 ホーム > 会社情報 > 社長挨拶   採用サイトの場合 ホーム > インタビュー > 採用フォ...

見出しの大きさを変更しよう

  見出しって?   見出しとは、記事の内容が分かるように文章の前につける「タイトル」のことです。   見出しがあることにより、ユーザーが文章の構造を理解しやすかったり、検索エンジンにコンテンツを適切に伝えるというメリットがあります。   見出しの大きさを変更しよう 見出しはサイズを指定しないとサイズがそれぞれ決まっています。   サイトプレビュー↓ &nb...

アニメーションを追加しよう

  アニメーションを追加しよう ホームページにアニメーションを取り入れると、いいことがあります。 大量の情報を読み取ってもらうには、何度もスクロールしてもらう必要がありますが、アニメーションなどの動きつけることにより、ユーザーに負担を感じさせることなく、より多くの情報を届けられるのがメリットです。 それに、ボタンなどの動き取り入れば、触って体験してもらえるサイトに仕上がります。 で...

イベント機能にお申し込みフォームを紐づけよう

  イベント機能にお申し込みフォームを紐づけよう イベントにお申込みフォームを紐づけて、申し込み人数に上限を設けたり、特定のグループのみ申し込めるようにしていきます。   申し込みフォームを作ろう サイト編集>フォーム>フォーム追加から専用のフォームを作ります。 タイトルはわかりやすくしましょう。 オレンジの枠の制限からフォームに上限を設定していきます。 申込数の上限...

カスタム投稿で商品紹介を投稿しよう

  カスタム投稿って? ピッパサックでのカスタム投稿はブログと少し違って項目を自由に設定できる機能になります。 例えば、ポートフォリオ、製品情報、イベント情報、FAQ、レビューなど、ウェブサイトの特定のニーズに合わせて、独自のフィールドを持つコンテンツタイプを追加できます。 カスタム投稿の基本操作はこちらをご覧ください。   カスタム投稿で商品紹介を投稿しよう 商品を紹介す...

会員をCSVインポート・CSVエクスポートしてみよう

  CSVインポート・CSVエクスポートって?   インポートはファイルを読み込むこと。 エクスポートはファイルを出力すること。   CSVファイルとは、各項目がカンマ(,)で区切られたテキストデータのことです。 データの容量が軽く、読み書きや編集が簡単に行えます。 またCSVファイルは互換性がよく、Excelやメモ帳、Googleスプレッドシートなどさまざまなソフトで閲覧したり、編集できたりします...

ページエディタを使いこなしてみよう

  ページエディタを使いこなしてみよう よく使うレイアウトを保存して効率よくサイトを作ってみましょう! レイアウトブロックを追加>3カラム>画像/見出し/文章を作っていきます。 サイトプレビュー↓ 下のコピークリック、「Ctrl」キーと「V」キーを押しペーストします。 ※Macは command + V 3カラムなのでもう一度ペースト。 これで3カラム完成しました。 サイト...

ページエディタを使いこなしてみよう パート2

  ページエディタを使いこなしてみよう カラムに同じ内容を入れても表示の仕方が変わる時があります。 今回は2カラムを使って説明していきます。 1個の2カラムに埋め込んでいきます。 サイトプレビュー↓ 雑誌のようなレイウトになりました。 次は2個の2カラムに同じ内容を埋め込見ます。 サイトプレビュー↓ このように同じ内容ですが表示...

動画のチャプター機能を使ってみよう

  動画のチャプター機能を使ってみよう 動画チャプターは動画に複数のセクションを入れることができる機能です。 チャプターごとにプレビューが表示され、各チャプターには動画の部分ごとのテキスト入力ができるため、ユーザーは視聴したい部分を簡単に見つけることができます。 ピッパサックではアップロードした動画ごとに手動で動画チャプターを追加できます。 ストリーミング>動画一覧>編集からチャ...

グループ機能を使ってプランを作ってみよう

  グループ機能を使ってプランを作ってみよう     どのようにプランやグループを分けたりしたらいいのかわからない方に向けてわかりやすく説明していきます。     今回は水彩画やデジタルイラストのオンラインサロンのコースを作っていきたいと思います。     初心者コース(無料会員登録) 月1動画配信(基礎編) ブログ閲覧(基礎編)  ...

ワンターンフォームをページに追加しよう

  ワンターンフォームをページに追加しよう ワンターンフォームはページエディタのパーツはないので、生成されたURLをお知らせするか、どこかへリンクとして設置して、使っていただくような機能となります。  

階層メニューをQ&Aに応用してみよう

  Q&Aを作成しよう サイト編集>階層メニューを使用し、Q&Aを作ってみましょう! 階層メニューとは、メニューの表示形式のひとつで、メニューをクリックすると下層にある項目が下に表示されるものになります。 質問をクリックすると、回答が下に表示されるQ&Aを作ってみます。 サイト編集>階層メニューから階層メニューを作ります。 「 Q&A 」入力し、項目追加します。 編集から質問を...

表示設定の変更方法を覚えよう

  表示設定って? サイト編集>ページ>ページエディタにてブログの表示方法は説明しましたが 閲覧保護設定してある記事のタイトルは閲覧できますが保護がかかってるので、記事をみても保護の対象外の人にはログインを求めます。 パーツオプション機能により表示せってが変更できるようになります。   閲覧保護設定の記事を表示方法について ブログには NEWS と FANCLUB があります。 FANCLUB&nb...

OBS Studioを使ってライブ配信はしてみよう

  OBS Studioって? OBS Studio(以下OBS)は、各種配信サイトに対応している無料のライブ配信用ソフトです。 OBS Studio ダウンロード   OBS Studio ダウンロード方法 お使いのパソコン(OS)に合うものをダウンロードしてください。 OBS Studio を開きます。サービスは「カスタム」を選択します。   ストリーミング>ライブイベント(Beta)から「配信準備...

クイック決済を使ってみよう

  クイック決済って? ピッパサックでのクイック決済はPAY.JPを使用した決済方法で、都度課金や継続課金も行えます。 さまざまなプランも作成できます。なので、プランに合わせた会員のグループ分けも行えますのでとても便利な決済方法です。   クイック決済の設定方法 PAY.JPを使用します。まずPAY.JPにてプランを作成します。 金額、課金間隔(月次、年次)、ID 、プラン名を入力し登録...

オリジナルテーマを作ってみよう

  オリジナルテーマって? オリジナルテーマを使うと、HTMLの構造・CSS・画像などをある程度自由に変更でき、従来のHTMLのよるWEB制作が可能になります。 TWIGテンプレートによる、動的なコーディングも可能になります。 書き方まとめ(日本語) こちらは、テーマ管理から、オリジナルテーマの作成を行っていただくことで、オリジナルテーマが作成され、ファイル管理のthemeフォルダに格納されます。 ...

LINEを活用しよう

LINEなどのソーシャルネットワークをお使いの方は是非ビジネスに活用しましょう。 ソーシャルネットワークには沢山の種類がございますが、今回はLINEをPIPPAsacで活用する方法をご紹介致します。   LINEとは LINEは現在 日本では人口の40%が利用しているという日本で一番使われているアプリなのです。 ホームページにうまく組み込むことで集客に強くなるでしょう。 まず、LINEへ送るボタンとはサイ...

ファイル管理が重たい時の3つの解決策!

  ファイル管理が重たいなと感じた時は? 画像をたくさん使うサイトではファイル管理ページが重たくなることがあると思います。 そんな時の解決方法を3つお教え致します!   その1 いらない画像は削除! この画像はもう使うことはないなーって思ったら何の迷いもなく消しちゃって下さい! 断捨離は大事です。   その2 大きすぎるファイルはできるだけリサイズ! 横幅が3000以上もあ...

X/旧Twitterのタイムラインをサイトに表示させよう

  X/旧Twitterの活用方法 Twitterを自分のサイトに表示させる方法はPIPPAsacではとても簡単です。 Twitterのウィジットページにアクセスして下さい。※英語サイトですが簡単です。 1.自分のTwitterのURLを貼り付けます。 2.表示タイプを選びます。 3.copycodeというボタンを押します。 4.管理画面のページエディタを開き、パーツ追加で「文章・表」を選択し追加して下さい。 5.文章・...

Youtubeを表示させよう

  普通のカスタマイズ! PIPPAsacでは簡単にYoutubeの貼り付けが出来、カスタマイズもボタン一つでできるすぐれものなのです! まず、パーツ追加にてyoutubeを選択します。 すると以下画像が表示されます。 カスタマイズは右にあるパーツオプション 自動再生…ページを開いて自動で再生させるか 関連動画の表示…動画が終わってから関連動画を表示させるか ▼関連動画表示有り▼ ...