ブログ合宿参加備忘録 ブログデザインも見た目が9割 #ブログ合宿

---広告---

Blog gassyuku haruna

先日記事にしたとおり、ごりゅご (@goryugo)さん主催のブログ合宿へ行ってきました。

ブログ合宿“というのは、ブログ始めたい、ブログを楽しみたい、ブログ仲間を作りたい人達が集まってワイワイやる勉強会です。
詳しくはこちら:【林囓】今回(3月1日)もブログ合宿へ参加します!お題はブログデザイン

定員15名満席となって熱気ムンムン。

合宿での講義内容などを記事にしました。

【広告】

ブログデザイン

今回のブログデザインの講師は、プロのWebデザイナーでごりゅご.comもデザインした はるぅな(@haruna1221)さん。

冒頭の画像のように、要点を解りやすく教えていもらいました。

最初の一歩

最初、ブログデザインを考える時に大切なのは、どんなサイトにするかを考えること。
この本で学んだのですが、プレゼンなどの資料を作る時も同様で、スライドに入れる画像を選んだり、資料を集めたりするより先に、まず何をどのように伝えたいかをしっかりと考えて、それから実際に手を動かすのだと書いてありました。

ごりゅご (@goryugo)さんも言ってましたが、技術的なことは今の時代ググれば分かります。

最初に技術ありきでは無く、何を発信したいかによってデザインも変わってくるのですね。

当ブログも、Apple製品などのIT製品で、みんなが毎日が楽しく過ごせればいいなと思いながら更新しています。

その後のデザインの決め方ですが、普段から自分の好きなサイトをEvernoteなどへストックして置いて、骨組みを決めてから煮詰めていきます。

さすがプロ、先生のブログデザインのストックは、数え切れないほどありました。

その時に役に立つのは、Google ChromeのWebpage Screenshotというエクステンション。

これは、表示しているWeb pageを丸ごと一枚の画像にすることができます。

意識するポイント

ヘッダー画像は、とても大切。
ここで、どんなブログなのか、どういうことを伝えたいのかを訪問者へ印象づけることが重要だそうです。

まぁ、どんだけ文字でブログを解説してあっても、文字は読みませんからね。

その他のポイントは4つ

  • テーマとかコンセプトをまとめる
  • 余白を意識する
  • グリッドをそろえる
  • 文字数や色を抑える

これは、全て訪問してもらった人に気持ちよく記事を読んでもらう為に必要な事だと感じました。

ブログを人に例えると良く解るかもしれません。

初対面の人の髪の毛がボサボサだったり、シャツのボタンがだらしなく外れていたりすると、にわかに信用できませんよね。

添削

出席者のブログをチェックしながら、実際に治した方が良いところを指摘してもらいました。
ここでは、Google Chromeの “要素の検証“(右クリックのプルダウンメニューから選択) が大活躍。
この機能があるのは知っていたのですが、使い方がイマイチ解らなかったので、教えて貰えて良かったです。

Th yoso kensyo要素の検証画面

当ブログへの添削内容は、背景色を基本白にするか、ヘッダー画像などの背景を背景色に合わせて、スッキリさせた方が良いと教えてもらいました。(修正済み)

また、前から解らなかったCSSの変更も教えてもらってスッキリ。

Th henko beforeBefore

Th henko afterAfter

その他、いっぱい濃い内容の講義がありました。

懇親会

伏見駅近くの居酒屋さんへ異動してお楽しみの懇親会。

Th kakoiya個室 炉端料理 かこいや 名古屋伏見店

このお店は、私が好きな日本酒の種類が多く、お料理も美味しくて良かったです。
まさか、名古屋で三重県の地酒 作(ざく)が飲めるとは思いませんでした。

ここでも、ブログの話や個人的な話で盛り上がり、楽しい一日を過ごせました。

まとめ

今回も、いっぱい有益な講義内容で楽しかったです。
新婚のごりゅご (@goryugo)さんと はるぅな(@haruna1221)さんのコンビネーションの良さもあって、とても解りやすかったです。

そして、ブログを通じて、Facebook仲間も増えて楽しかったです。

また次回期待してます。(^o^)/

集合写真! #ブログ合宿 #theta360 – Spherical Image – RICOH THETA

ごりゅご (@goryugo)さんのブログ:ごりゅご.com

出席者の記事(随時更新)

  • 名古屋ブログ合宿に行ってきたよ! | キタガガブログ。
  • 3月1日(土)の「名古屋ブログ合宿」でブログ観が変わったかもしれない | カツイエ
  • 名古屋ブログ合宿にエア参加!その名も『エアブログ合宿』!今回のテーマはブログのデザイン!! | つじもん.com
  • 余白の調整だけでブログの文章が劇的に読みやすくなる ブログ合宿で学んだことまとめ | ごりゅご.com
  • 名古屋ブログ合宿で学んだブログのデザインをする上で大切な4つの事 #ブログ合宿
  • 【名古屋】全国ツアー5本目は名古屋でブログ合宿に参加!【全国ツアー】 #ブログ合宿 – WaFu-NOTE
  • ブログを始めていなくても楽しめる、名古屋ブログ合宿 – すぷりんぐぼーど
  • Written by Metal(@Metal_mac

    文中リンク先

  • スティーブ・ジョブズ 驚異のプレゼン
  • Evernote
  • Webpage Screenshot
  • 個室 炉端料理 かこいや 名古屋伏見店
  • 作(ざく)地元ならではのフルラインナップ!! <清水醸造>【三重の地酒専門店 奥志摩の酒商人べんのや】
  • 過去のブログ合宿

  • 【レポート】第5回名古屋ブログ合宿参加レポート!目から鱗のアクセス解析など #ブログ合宿 -本会編-
  • 【ブログ】ごりゅごさんのブログ合宿番外編、M席に座って快感だった件 #ブログ合宿
  • 【囓】ブログ運営にメチャ参考になるブログ合宿にエア参加したよ! #ブログ合宿
  • 名古屋ブログ合宿、デザイン編!!デザインの基礎から個別指導までイロイロ勉強になった!! | IWAIMOTORS BLOG
  • ブログにもやっぱり必要?「デザイン」がテーマのブログ合宿に参加してきました! | enjoing!
  • 【広告】

     

    この記事が気に入ったら
    応援お願いします (^o^)

    リンカジmacの最新情報をお届けします

    Twitterでメタルをフォローしよう!

    気に入ったら友達へシェア!

    3 件のコメント

  • 読み手として考えれば見やすくすっきりしているほうがいいですよね。
    私は記事前の冒頭に広告のバナーがでかでかと表示されてるブログは読む気が萎えますね。スクロールするのが面倒なので。
    読み手にその負担を強いるほどの記事があれば問題ないですが必ずしもそうでないですからね。
    そういうのがあると自分自身で書いた記事内容に熱意がないのでは?と思ってしまいます。
    ブログを読む立場からすると広告をみたくてブログを読むのではありませんからね。

    • コメントありがとうございます。
      広告の配置は悩ましいところですね。
      ぶっちゃけ話をすると、記事上辺りがクリック単価が高いので、貼る側としては、ついつい其処に配置してしまいがちです。
      広告は、いっぱい貼れば実入りがよくなる訳でも無いですから。
      まぁそこが面白い処でもありますけどね。
      ご意見参考にさせていただきます。^_^

  • […] 林囓mac雑誌「MacFan」で度々紹介されてる、JAZZ好きな@Metal_macさん。 {lang: "ja"}!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id;js.async = true; js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs);}(document, "script", "facebook-jssdk"));!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); […]

  • コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です