家族ブログリニューアルまでの道のり

May 19, 2018 | Ayaka | にしだけ日記

こんにちは、あやかです。

ブログをリニューアルすると言い続けてきましたが…ついにリニューアルサイトを公開！

そこで今日は家族ブログリニューアルに至るまでの道のりについて、妻 あやかサイドから書いていきます。
概要としてはこんな感じです。

  1. サイトを作る目的
  2. コンテンツ
  3. デザイン
    –  資料集め
    – 手書きでデザイン
    – スマホでデザイン
  4. 実装

1. なんのためにサイトをつくるのか？

結論から先に言ってしまうと、このにしだけHPの目的は、好き！会いたい！と思える人に出会うことです。
これだけだと「ブログで好きな人に出会う？」って思いますよね。順番に書いていきます。

プロジェクトのゴール（家族目標）

サイトリニューアルにあたってまずは、家族ブログは「家族目標を達成するツールの一つ」であることを確認し合いました。
にしだけの家族目標は「走馬灯に残るシーンを増やす」です。

関連記事：にしだけの家族目標！走馬灯に残るシーンをたくさん作る

これまでの「走馬灯に残るシーン」を振り返ると、２つに分類することができました。

  • 新しい価値観に出会った時
  • 新しい価値観を試している時

新しい価値観に出会い、実践する。それには人との出会いが不可欠だと考えています。
関連記事：たすけて欲しい夢

にしだけ夫婦が新しい価値観を模索する様子を発信することで、にしだけに興味を持ってくださる方を一人でも増やす。そしてその方ににしだけが会いに行く。そんなことができる場にしていきたい。

そんなことを考え、にしだけHPをリニューアルさせることにしました。

2. 何を発信していくか？コンテンツ作り

「にしだけに会ってみたい」「何か一緒にできたらおもしろそう」

そう思ってもらえるきっかけづくりとして、自分たちの「やりたいことリスト」を公開することにしました。
また、「おもしろい人と仕事がしたい！」と、お仕事依頼の窓口「できることリスト」も公開します。

とはいえ、このリストだけをみて「にしだけに会いたい」と思ってくれるような優しい人はなかなかいませんよね。なので、にしだけのことをもっと知ってもらえるようなコンテンツも必要だと考えました。旅をしたり、いろんな固定概念を打ち壊したりすることが好きなわたしたち。そんなにしだけ夫婦のやったことや考えていることを全部発信しちゃいます！

「ちょっと笑える」
「こんな生き方もあるのか」
「ちょっと役に立つやん」

そんな風に思ってもらえるような記事を発信していく予定です。

3. WEBデザイン

デザインコンセプトは「POPでたのしい」。

ながれとしては、
– 資料集め
– 手書きでラフ案作成
– スマホでイメージ作成
– 実装
という感じで進めて行きました。

資料集め

それぞれが「いい！」と思うサイトを集めまくりました。

おしゃれサイトは、drawwwersというスクショがとれるWEBサービス（Chrome Extension）で収集。自分のポートフォリオも作れるんですが、他の方のポートフォリオも見れるのがありがたやポイント！おしゃれサイトを探すのは結構時間使いますからね。。。

手書きでイメージをふくらます

集めた資料などを参考に、手書きでイメージをどんどん膨らませました。ここは二人で。
キーワードは、「渦」「価値観のグラデーション」。テイストは「楽しい」「POP」に。


手書きイメージ。ふたりとも絵は下手。笑

アイディアや、経験、人との出会い。ひとつひとつの小さな点が渦になって、やがて大きなモーブメントを巻き起す。

そんなイメージで、アイコンがぶわーーーーっと渦状に吹き出てくるのはどうかな！というアイディアにまとまりました。

一番見てもらいたい「やりたいことリスト」と「できることリスト」は、フッターにふたりのアイコンを設置。ホバーすると、脳みそがぱかっと割れて、アイディアが吹き出てくる！みたいなことを考えていました。笑

スマホでWEBデザイン

次はスマホでイメージを作成。HPってPCで作るんで、ついPCサイズからデザインしはじめちゃうんですが、「今の時代はスマホじゃーーー！」と、今回はスマホからはじめたのです。ここは私が担当しました。

使ったアプリは、ゆうこすさんオススメのPhontoと、ハルカナさんおすすめのCanva。細かい調整は難しいけれど、指を使って感覚的にデザインできるのが結構よかったですよ。速いし。

初期デザインはこんな感じ。

個人的にはフレンチカラーっぽいベタが好きなんですが、「価値観のグラデーションを楽しみたい」というにしだけ夫婦の価値観を表現すべく、グラデーションで作ることにしました（ややあとづけ。笑）。

4.いざ実装

実装はもちろん涼輔くん。渦を作るのがすごく大変そうでした…
渦が出来た時は「エンジニアってすごいーーー！」と感動。笑
わたしのほわわわ〜んとしたイメージをどんどん形にしていってくれました。

初期のモバイル版と、PC版。いもむしみたい。

「ブログとしては一覧性がなさすぎ？」
これは最後の最後まで悩んだことです。

たしかに一覧性は低い。けど、ブログって一覧で見るかな？それより、いろいろ触りたくなるような仕掛けをしたらどうかな？だってこのHPの目的は「にしだけってなんか楽しい」って思ってもらうこと！と、一覧性より「POPでたのしい経験」をしてもらえることを優先しました。

メインのデザインが決まり、今度は配色や、メニューのアイコンなどを細かく詰めていきました。フッターのアイコンは写真を想定していましたが、さすがにゴテゴテすぎる他のでやめて、まんまるアイコンに。

いろんな色や、アニメーションが詰まっているので、ぜひ色々見たり触ったりして欲しいです！

Qiitaにもランクイン！爆速なブログに

新にしだけブログはとにかく爆速！１回目も速いんだけど、２回目はもっと速いの！ぜひページを行ったり来たりしてみてください！エンジニアじゃない方も「なんか速い気がするっ！」ってわかるくらいスムーズに動くんじゃないかな？たくさん触ってもらえると嬉しいなぁーー。まずはトップページを見てみてくださいね！

わたしは細かい仕組みを全然理解できてないのですが…笑
涼輔くんの技術ブログに詳しいことは書いてあるようです。
https://qiita.com/yahsan2/items/39eb9e3e19f72257084c

記事制作

最後にコンテンツ作り。「できることリスト」は「お仕事依頼」、「やりたいことリスト」は「助けて欲しい夢」と名前を変えてページを作成。こちらは内容をしっかり伝えたかったので、いもむし型じゃなくて、一覧性のあるページにしました。「できることリスト」も「やりたいことリスト」もどんどん更新していくのでぜひチェックお願いします！

SNSはPOMUというサービスを使ってまとめました~。

ブログもポッドキャストもどんどん更新！

夫婦ポッドキャスト「にしだけの宮本さんとあやかさん」は2日に１回くらいのハイペースで更新しているので、「このブログもそれに負けないスピードで書くぞ！」と、この記事を読んでくださった皆さんの前で宣言しておきます。

「なんか一緒にオモシロイことやろーぜ！」「特に用はないけど、あそぼーぜ！」と思ったらぜひ連絡くださいね。私たち自身もどんどんいろんなコミュニティに参加して、オモシロイことを探して発信していきます！この記事を読んでくださったあなたにもぜひお会いしたいです;D

それでは新しくなった「にしだけ」HP、ぜひたくさん触ってみてくださいねー！

それではまた！

「にしだけの宮本さんとあやかさん」は該当エピソード

投げ銭＆質問箱polca

https://polca.jp/projects/y5VqXNqrERP

SNSもみてね。

Twitter
http://twitter.com/nishidalol