パセリデザイン

【埼玉県所沢市】イベント広報・個人事業主・中小企業専門のデザイン事務所です。出張相談もお気軽にご相談ください!

WEBレッスン受講者様専用ページ

WEBメニュー御依頼者様専用ページ

  このたびはWEBメニューのご依頼、Webレッスンにお申し込みありがとうございます。

コチラのページでは、カスタマイズ・受講前に確認していただきたいことや

受講後にご自身でカスタマイズする際参考にしていただけるコンテンツを掲載しています。

 

 

講習用・Dropboxリンク

 

 

アメブロについて

 

アメブロは大きく分けて5つ、カスタマイズが出来る場所があります。

 

  アメブロの構成   無題

 

  • ヘッダー
  • メニューバー
  • サイドメニュー
  • メッセージボード
  • 記事本文

です。

 

  こちらのアメブロを実際にカスタマイズしています。 ⇒サンプルページ:http://ameblo.jp/paseri-d-test

 

 

 

 

ヘッダー

※サンプ

ヘッダー

 

 ヘッダーはお店の看板となります。

新規のお客様は「3秒で次の興味を見つけられなかったら去ってしまう」とも言われていますので

一目で何をテーマに扱っているブログなのかが分からないといけません

(だからホントはこのサンプルはもっと頑張らなきゃですが・・・)

写真・キャッチコピーでギュッと興味と心をキャッチしましょう!

 

幅980pxが一番きれいに表示されますので

全体に画像を表示したい場合、このサイズ以上の画像をご用意ください。

フリー素材なら幅が980px以上のもの(印刷向け素材のほうが適しています)

自分で撮影したものならカメラ・スマホで撮ったままのデータをお持ちください。(SDカード・USBなどで)

小さいものしかない!という場合でも背景を別の画像と組み合わせたりすれば使えるものもありますので

是非お気に入りの画像をお持ちください。

(ネット上からの素材を使用する際は商用利用可能かどうかを御確認ください)

 

 

メニューバー

 

メニューバー

 

メニューバー「ブログの目次」のようなものです。

 

新規の方はほぼ、ここから見始めるといっても過言ではありません。

「どんなサービスがあるのか」「価格帯はどれくらいなのか」

「どこにあるのか」 「どうやったら予約が出来るのか」 ・・・そういったことを書きます。

 

  あまりここの数が多すぎてしまっても、お客様はどこから見たら良いのか迷ってしまいます。

理想は4~6個、個人的には5個がベストです。

 

どうしても詳細に分けたい場合は、このメニューバーを「大見出し」として

そのリンク先にさらに細かいリンク集を作りましょう。

ここは特定の記事にリンクが作れるものなので、

リンク先を作りたい場合は 前もって記事を作成しておいていただけるとその日から機能します。

設置までは下書きにしておけばお客様に見られることもありません。

 

このメニューバーは四角で枠が並ぶデザインが一般的ですが 実は結構遊べます。

ここの工夫次第でアメブロらしくない、HPのようなデザインに出来ます。

(もちろん、凝る分時間も掛かるのでレッスンの方にはあまりオススメできないのですが)

 

製作例:Rise★nail様 http://ameblo.jp/rise--nail/

 

 

 

製作例:新所沢富士幼稚園様 http://ameblo.jp/shintokofuji/

 

 

 

 

 

 

サイドメニュー

(一番オススメの2カラム配置の場合・幅300px)

実は並べる項目は自分で増減・並べ替えが出来ます。

中でも主にカスタマイズするのは「フリースペース」というものです。

フリースペースを一番上に持ってくることでさらに自由なカスタマイズが可能になります。

地図を入れたり、小見出しにリンクをしたり、最新の日程を入れたり・・・。

工夫次第で色々な事ができます。

 

広告は一番上の項目の後に入ります。

ということはフリースペースが長くなると・・・です。

 

それぞれのメニューにも見出しのデザインや背景が付けられます。

あまり懲りすぎる必要はありませんが、ここもオリジナル性を発揮することが出来ます。

メニューバーをつける以上のカスタマイズを選んだ場合(CSS編集デザインを適応したとき)

何もしないとここがグレーになってしまうので、色をつけるくらいはしたほうがいいでしょう。

 

カテゴリがどどーっと長くなる方もいますが、あまりたくさん作るのは禁物!です。

どれが重要で、なにが重要でないか、お客様は書き手が思っているより半分も伝わりません。

より重要なものにたどり着いてもらう工夫をしましょう。

 

どうしても多くなってしまう!という場合はフリースペースで目玉カテゴリへの誘導をオススメします。

 

やっぱり製作例はこちらの2サイトで・・・

 

製作例:Rise★nail様 http://ameblo.jp/rise--nail/

 

 

サイドにカラー別デザインサンプルへリンクしています

 

 製作例:新所沢富士幼稚園様 http://ameblo.jp/shintokofuji/

 

 

メインのメニューでは、入学に関する説明へのページへ。

サイドではカリキュラムの詳しい説明へリンクしています。

 

 

 

メッセージボード

ここにレッスンの予定やお問い合わせ先を書く方が多いのですが、ここだけ・ではいけません。

 

トップページを見たときにしか表示されないので

SNSで記事にリンクされたところから、読者の方でチェックリストから最新記事に、検索から・・・

これらから来た人には表示されません。

つまり表示されないのがほとんどです。

 

これらはサイドメニューのフリースペース内に書きましょう。

 

そう聞くといらない機能にも聞こえますが、意外とここを設定してるかしてないかで印象が結構変わるものです。

いわばおうちで言うと「玄関スペース」みたいなもので、

人のおうちにお邪魔していきなりリビングに繋がってるとたぶんびっくりしてしまうと思います。

 

日本のおうちでしたらワンルームのアパートだって靴を脱ぐスペースがあります。

無いからと言って明らかな支障があるわけではありませんが、

玄関スペースがきちんとしているとおうちの印象もおしゃれになりますよね。

 

たかがワンクッション、されどワンクッション。

ここは女性向けサイトであれば特に必要な部分だと思います。

ワンクッションですので、あまり長くなると記事にたどり着けなくなりますので手短で済ませましょう。

「あるだけ」で全然違いますので逆を言うと「あるだけ」でいいです。

 

トップページに来る人は、名刺やチラシを見てアクセスしてくれる人、屋号で検索した人、他のページからの紹介できた人、です。

そういった人に「はじめましての挨拶」程度でOKです。

なのでカスタマイズの必要性で言ったら、上のほうにあるものですが「低」。

後回しでも良いです。

 

 

記事本文

 

背景色、文字色、色々といじることが出来ますが

背景は白、本文は黒ないしグレーやこげ茶といったような、一般的な活字の色が読みやすいでしょう。

赤文字で強調したいものがあるときも、黒の中に色があったほうが目立ちます。

 

ここで主におすすめしたいカスタマイズはタイトル部分です。

訪問者さんが必ず目にされるところなので、小さなところですがオリジナル性はグッとUPです。

レッスンではご希望があれば記事の中で枠をつけるやりかたなどもレクチャーいたします。

 

 

メールフォーム

見た目のカスタマイズではありませんが、とっても重要なメールフォーム。

メールアドレスを書いて「こちらまで」にしてませんか?

ましてや「アメブロメッセージで」にしていませんか?(トラブルの元です!)

 

こちらの無料メールフォームがオススメです。

  【無料】メールフォーム/フォームズ

 

 広告が入ること以外は、WordpressやjimdoなどのHPで設置できるメールフォームに引けをとりません。

有料プランで広告をとることもできます。

是非ご自分でできる方は作成していただいておけばカスタマイズ当日から役立ちますし

よく分からない!という方はレッスンの中で一緒に作成していきましょう。

 

 

 準備していただくと良いもの

 

  • ヘッダー用画像( 全体に配置するなら980px以上のもの。横長構図が望ましい)
  • プロフィール画像(必須ではありませんが、今や顔写真をHPに掲載するのは当たり前です。正面を向いた、明るく、出来れば自撮りでないものが理想です)
  • キャッチコピー(もちろん時間内に一緒に考えることも出来ます!)
  • コンセプトカラー
  • ロゴ画像
  • メニューバーからどこにリンクするか(5個程度)また、リンク先となる記事
  • 無料で高性能なアクセス解析を御希望の場合はGoogleアカウント

 

 

  アメブロカスタマイズレッスン受講者様は、受講1週間前までにこちらのフォームよりアンケートをお送りください。

 

 

kanban_l

 

 

 

 おすすめリンク集

講座前に登録や画像を探しておいていただけると時間短縮になり

カスタマイズできる箇所が増えます♪

ぜひご覧ください!

 

(2015.2現在、商用利用可能であるサイトを紹介しています。 規約などはその都度御確認ください)

 

 

写真素材

●写真AC 【要登録】【無料】

幅広い写真素材が無料!

まずはココを探すのがオススメです。

ただ無料なだけに玉石混合がたまにキズ。

 

●人物専門の写真素材/モデルピース 【要登録】【一部無料】

美人なモデルさんがいっぱい!

20代と思われるモデルさんが多いので若者向けのビジネスや美容系には重宝します。

男性写真も少しあり。

 

 

  ●PIXTA 【要登録】【有料】

一枚540円からハイクオリティな写真が購入できます。

イメージぴったりなものがあるのなら、自分でモデルさんを探して・・・ セットを組んで・・・写真を調整して・・・

という手間と経費を考えたら コスパは断然こちらが良いです。

 

 

 

イラスト素材

●イラストAC 【要登録】【無料】

写真ACの姉妹サイト。IDは共用できます。

やはり数は多いものの、クオリティはバラバラなので、探すのに時間が掛かるかも。

 

●いらすとや 【無料】

手書き風の可愛いイラストが満載。

ただ、人気がありすぎて「どこかでみたことある」感が出てしまうかも・・・?

 

●子供と動物のイラスト屋さん 【無料】

こちらも子供向けイベントなどには大重宝。

やはり有名なので新鮮味は薄いですが・・・。

 

  ●無料イラスト素材ドットコム 【無料】

ビジネス向けの、あまり個性を強く出したくない場合に。

リアルなイラストが多め。 無料素材はページをちょっとスクロールしたところから始まっています。

 

  ●ガーリー素材 【無料】

その名のとおり、イマドキなタッチのガーリー素材。

写真だとモデルさんの好き嫌いで印象が変わってしまうこともあるので そんなときはイラストでの表現もオススメです。

 

 

 

装飾素材

  ●ヒバナ 【無料】

ナチュラル系の素材ならココ。

たぶんレッスン中、私がデザインお任せされることになったらこちらの素材が多用されることでしょう。

紙の質感、布の質感の背景素材やボタンなどのパーツ素材も。

 

  ●フレームデザイン 【無料】

エレガントからシンプルまで、たくさんの枠素材があります。

ヘッダーでブログタイトルを入れたり、見出しを作ったりと重宝します。

姉妹サイトが半端なく充実していて、矢印専門のサイト、罫線専門サイト、など見てるだけで日が暮れます。

⇒姉妹サイトリンク集:http://bg-patterns.com/?page_id=15

 

●ICON HOIHOI 【無料】

文字などに添えると、伝わりやすさがアップするアイコン。 見出しに地図に、色々な場所で重宝します。

 

 

 

その他

●サクラエディタ 【無料】

HTMLやCSSの編集にとっても便利なフリーソフト。

カスタマイズレッスンを御希望で、ノートパソコン持参の方は是非インストールしてお越しください。

 

 

  ●Mariのいろえんぴつ 【無料】

配色を決めるのにとってもお役立ちなサイト。

理想の色を探したいときも、組み合わせをセットで決めてもらいたい!なんてときにも◎。

 

 

  ●12色の色が与える印象について

色は受け取る人それぞれと思われがちですが、実は様々な影響を与えています。

自分のサイトのイメージカラーが分からない!という方はこちらのサイトを参考にしてみてください。

 

 

  ●イケてるWebデザインリンク集

個性的なWEBページにしたい!と思ったら参考にしてみてください。

アメブロでこんなことできるのかなー、というのも実は出来るかもしれません。

 

 

 

更新日:

Copyright© パセリデザイン , 2018 All Rights Reserved Powered by STINGER.