デザイン力アップ

• ワンランク上のホームページデザインになるための総チェックレッスンを開催しました。［2020年4月］
• 標準的なカレンダーデザインだけじゃない！イベント一覧、お知らせ一覧など、予約カレンダーカスタマイズをご紹介
• ページの表示速度を改善！「遅延読み込み」機能でホームページを素早く表示しよう
• 一瞬でホームページの印象を柔らかくできる、写真のスタイル変更機能
• ホームページのスマホ表示をちょこっとカスタマイズ
• 写真のサイズ・向きが違っても安心！マガジンレイアウトで雑誌っぽいデザインに
• グローバルナビゲーションメニューを固定してホームページの利便性をアップ！
• 「remove.bg」を使って簡単に人物を抜き出す（透過する）方法
• 加工した写真をホームページの背景に設定して、デザインをワンランクアップ！
• スタッフ紹介ページをかっこいいデザインにする方法

• ワンランク上のホームページデザインになるための総チェックレッスンを開催しました。［2020年4月］

  本日、4月のホームページの効果UPレッスン「ワンランク上のホームページデザインになるための総チェックレッスン」をZoomで開催しました。

  「自分でなんとかホームページ作成・更新してきたけど、もうちょっとシュッとした感じにならないかな・・・自分では限界・・・」なんていうお悩みを抱えていませんか？

  見た目がいまいち決まらないとお悩みのお客様に最適な、レッスンです。

  実際に作成されているホームページを確認し、ご希望の状態に変更したり、ご提案させていただきました。

  
  

  本日は、秋田県・横手市で筋膜にアプローチしたオロフェイシャルリリースをされている「美表情塾」の中川様がご参加くださいました。

  ※ご了承済みの方のみ、リンクをご紹介しています。

  くわしく！
• 標準的なカレンダーデザインだけじゃない！イベント一覧、お知らせ一覧など、予約カレンダーカスタマイズをご紹介

  リウムスマイル！では、通常のサービスの予約からイベントの受付・お知らせをできるカレンダーを作成できます。

  お手本セットアップでホームページを作成した場合は、カレンダーは標準装備されています。

   

  まだカレンダーを作成されていない方はこちらをご覧くださいね。

  ≫ カレンダーを作成して、ホームページに表示する手順

   

  このカレンダー、標準型・縦型表示はもちろん、開催するセミナー・イベントの概要だけを表示したり、数件だけお知らせとして表示することも出来ます。

   

  • 

    標準型

    通常のメニューやコースなどのご予約におすすめ

  • 

    お知らせ一覧型

    トップページにセミナーやイベントなどのお知らせを載せたい時におすすめ

  • 

    イベント一覧型（1列）

    セミナーやイベントを詳しくご紹介したい時におすすめ

  • 

    イベント一覧型（3列枠）

    一画面ですぐにどんなイベントやセミナーがあるのかを見せたい時におすすめ

  くわしく！
• ページの表示速度を改善！「遅延読み込み」機能でホームページを素早く表示しよう

  自分のサロン・お店のホームページを開いた時、何だかページが表示されるのが遅い・・・なんてことありませんか？

  ページの表示が遅い時の原因は主に3つあります。

  1. インターネットの回線速度が遅い
     回線にはwi-fi回線や4G・LTE回線などいくつも種類がありますが、時間帯によっては混雑することがあります。
     また、スマホの場合は契約プランによって通信制限が掛かっていることもあります。通信制限が掛かると、通信速度が落ちてページの表示に大変時間が掛かります。
     
     
  2. パソコン・スマホの動作が遅い
     パソコンのOSが古いもの（WindowsXPや7など）だったり、スマホでも古い機種を使用していると、メモリの少なさや性能の古さが影響して表示速度が遅くなることがあります。
     また、最新機種であっても、ソフトやアプリを沢山インストールしてたり、バックグラウンドで起動したままでいたりすると、動作が遅くなってしまいます。
     
     
  3. ページに使用している画像自体の容量が大きい・画像の数が多い
     ページに使用している画像の容量が大きい・画像の数が多い場合、一枚一枚画像を読み込むため、ページ全体の表示に時間が掛かります。

   

  原因に挙げた1番目と2番目に関しては、ホームページを閲覧している環境を変えていただくしかできないのですが・・・

  3番目はホームページの管理者であるご自身で表示の設定を変更することができます。

   

  リウムスマイル！では基本機能として、「遅延読み込み」機能を設定することができます。

  「遅延読み込み」とは、コンテンツ（内容）が豊富で長いページ内の画像の読み込みを遅延させるテクニックです。

  リウムスマイル！のホームページでも、デザインテンプレートページの一覧部分などに設定しています。

  ≫ デザインテンプレート

   

  この設定をしておくとページ自体はパッと素早く表示され、下の方にスクロールしていって画像に差し掛かるごとにその画像の読み込みをするという動作になって、閲覧する側はそのページをサクサクみることができるようになります！

  （画像を読み込み中は画像の位置にローディングアイコンが表示されます）

  • 

    ページが先に開き・・・

  • 

    後から一覧部分の画像が表示されます

  
  

  くわしく！
• 一瞬でホームページの印象を柔らかくできる、写真のスタイル変更機能

  リウムスマイル！ではアップロードした画像をそのまま加工することなく、表示設定を変更するだけで簡単に写真を加工した風に見せることができます。

  初期設定ではプレーンの状態ですが、例えば表示設定で「円フレーム」を設定すればこんな風に表示されるようになります。

   

  • 

    Before

  • 

    After

  プレーンから円にすることで写真の印象が柔らかくなり、かわいらしく見えるようになります。

  例えばベビーマッサージ教室やピアノ教室などの子ども向けのホームページを作る場合や、ペルソナさんが女性で、よりあたたかい印象を与えたいサロン・お店のホームページの場合にとてもおすすめです。

  また、この他にも色々な画像のスタイルを設定することができます。

   

  くわしく！
• ホームページのスマホ表示をちょこっとカスタマイズ

  リウムスマイル！で作成したホームページは、レスポンシブ対応となっているのでスマホやタブレットで見た時には自動的に最適化されます。

  レスポンシブ対応とは

  スマホ・タブレットなどのデバイス（ディスプレイサイズ）毎に、ホームページのレイアウトが自動で変更されるシステムです。

  同じHTMLファイルを使用するので、一度のページ編集作業でパソコン版とスマホ版の両方に編集が適応されます。

   

  　

   

  でも、実はさらに細かなカスタマイズもできるんですよ。

  提供してるサービスの効果的な見せ方や、ペルソナさん（ターゲットとなるお客さん）の層によって、カスタマイズしてチューンナップすることも可能です。

   

  • 年齢層の高いペルソナさんの為に文字の大きくしたり・・・
  • 見やすいようにスマホ版では左右の余白を広くしたり・・・
  • ハンバーガーメニュー［三］じゃなくて、パソコン版ホームページのように最初からグローバルナビゲーションメニュー（エリア②）が表示されるようにしたり・・・

  なんてことも、リウムスマイル！の機能で簡単にできちゃいます！

   

  くわしく！
• 写真のサイズ・向きが違っても安心！マガジンレイアウトで雑誌っぽいデザインに

  リウムスマイル！の「美容室」お手本には、初期から「ヘアスタイルギャラリー」というギャラリーページが用意されています。

  ギャラリーページに写真を載せる時は、できるだけすべて同じ横幅×縦幅の写真を設定していただくことをおすすめしております。

  ですが、スタッフさんのスマホで各自撮影していたりすると、それぞれ写真のサイズが違ってたり、横向き、縦向きバラバラだったりしてしまうことだってあると思います。

  そういう時は、ギャラリーページのレイアウトの表示設定を通常の4列表示から4列マガジン表示に変えると、隙間がぴったり埋まって綺麗に見えるようになります！

   

  • 

    Before

  • 

    After

   （例：ヘアサロンサンプルサイト／デザインスキン type058-25）

   

  今回はギャラリーページの表示設定で、簡単にレイアウトを変更する方法をご紹介します。

   

  くわしく！
• グローバルナビゲーションメニューを固定してホームページの利便性をアップ！

  グローバルナビゲーションメニューとは、ホームページの上部に表示されているメニューバー（エリア②）のことです。

  「コンセプト」や「メニュー」、「セラピスト紹介」などホームページのメインとなるページへのリンクが表示されています。

  通常の状態ではこのグローバルメニューは、ホームページを下にスクロールしていくと見えなくなってしまいます。

  ですが、リウムスマイル！の基本機能を使えば、常に画面上部に固定して表示するように設定することができます！

   

  • 

    Before

  • 

    After

  画面上部にグロバールナビゲーションメニューが常に表示されることで、その分コンテンツ（内容）の表示面積は減ってしまうのですが、ページ内のどの位置にいてもすぐに他のページにアクセスしやすくなります。

  もし、グローバルナビゲーションメニューが2段になっている場合は、上部がグロバールナビゲーションメニューで埋まってしまうので、1段に収まるように変更することをおすすめします。

  ≫参考：ホームページの上部メニューに表示させたいものが多くて2段になってしまったときは

   

  今回はこのグローバルナビゲーションメニューを固定する方法をご紹介します。

   

  くわしく！
• 「remove.bg」を使って簡単に人物を抜き出す（透過する）方法

  ホームページに載せたい写真から、人物だけを抜き出したい（透過したい）ってことありませんか？

  そんな時におすすめなのが、月刊オミセラブ2月号でもご紹介した「remove.bg」という登録不要の無料画像透過加工サービス！

  画像をアップロードするだけで、簡単に背景を消して人物だけの写真に加工してくれます。

   

  • 

    Before

  • 

    After

  （写真素材：写真AC）

  
  

  今回は「remove.bg」の使い方をご紹介します。

  ※この記事はremove.bgの使い方の一例をご紹介する記事となります。 　remove.bg自体はリウムスマイル外のサービスとなりますので、詳しい操作方法などはサポートの範疇外となります。悪しからずご了承ください。

  くわしく！
• 加工した写真をホームページの背景に設定して、デザインをワンランクアップ！
  デザイン性の高いホームページで目にする、背景に画像を使ったデザイン。
  リウムスマイル！でもヘアサロンのサンプルサイトで設定してたりします。

   

  

  （例：ヘアサロンサンプルサイト／デザインスキン type058-25）

   

  この設定自体はリウムスマイルの機能で簡単にできるんですが、例えば上記のように文字を白で表示したい時、背景に設定したい写真はあってもちょうどいい暗さではなかったりします。

  それは逆も然り。

  濃い文字色にしたい時は、ちょうどいい明るさや透明具合では無かったり…。

  カッコよくても、文字が読みづらくなってしまっては本末転倒ですよね。

   

  そういう時におすすめなのが無料で画像編集できるWEBサービス「Canva（キャンバ）」！

  ツイッターやFacebookのカバー画像などいろいろと自由に作成することができるサービスですごーく便利なんですが、今回は写真の加工方法のみに限定して簡単にご紹介します。

   

  ※この記事はCanvaの使い方の一例をご紹介する記事となります。 　Canva自体はリウムスマイル外のサービスとなりますので、詳しい操作方法などはサポートの範疇外となります。悪しからずご了承ください。

   

  くわしく！
• スタッフ紹介ページをかっこいいデザインにする方法
  リウムスマイル！のお手本をセットアップすると、自動的に出来上がるページの中に「スタッフ紹介・自己紹介」ページがあります。

  「スタッフ紹介・自己紹介」ページは、お店・サロンにはどんな人がいるのかをお客様に丁寧に伝える大事なページの一つです。

  また、お客様の身体もしくは心に触れるサービスを提供している場合は、お客様にとって「誰が」サービスを行うのかということが非常に重要になります。

  お手本の内容ではとても詳しくサンプル文章が入力されていますが、お客様の不安を緩和するためにも、できるだけサンプル文章のように詳しく丁寧にご紹介するようにしましょう。

   

  この「スタッフ紹介・自己紹介」ページですが、お手本では最初は1人分のページしか用意されていません。

  （複数人のスタッフがいる事が多い美容室お手本のみ、4人分のページが用意されています）

   

  お一人で運営されているお店・サロンなら、お手本のページを自分の紹介に書き換えていけばOKですが、2人、3人・・・とスタッフが多くいるお店・サロンもあると思います。

  そんな時は新しくスタッフページを追加して、下記のようにレイアウトするとどんな人がいるのかが、パッと見るだけでお客様に伝わりやすくなります。

   

  ２〜4人の場合	5人以上の場合

  
  今回はどうやってページを追加すればいいのか、また、人数が多くなってきた時にスタッフ紹介ページをすっきりと見せる方法をご紹介します！

   

  くわしく！