見出し画像

渾身のサイトを5日で作ってみた

シンガポールできらきらしない生活を送るけりーです。

本日ついに、赤ペンジャーナリングのウェブサイトを公開しました!私がXでつぶやいている赤ペンジャーナリングの紹介、そしてself growthなどに関する情報サイトです。

これ、先週の水曜日に「いい加減サイトを作りたい」と発作的に思い勢いとノリで5日間で完成させました。すべて私が作った手作りサイトです。

今日はせっかくなので、私のこだわりがつまりまくったサイトをぜひ紹介させてください!!

寝落ちしながらも完成

実は、私はサイトを作るのは結構好きです。もはや趣味。別に公開しなくても、要は絵を描く感じで作っているのが好き。私の中では遊びの一種。なので、作るだけ作って完成せずに放置したサイト、作ったが公開しないサイト、などは数知れず。

赤ペンジャーナリングも何度もサイトを作ろうとしたけれど、なんとなくまだ作るには自分では固まりきっておらず、着手できずに早数年。でも7月から毎日Xで発信しているうちに形が見えてきて今だ!今しかない、とひらめいて作り切りました。

自分は、これだと思ったらすぐに行動するのですが、やる気がなくなると動かなくなる、いわゆる熱しやすく冷めやすいタイプ。なので、このサイト作りも熱量を失う前に作やらねばと思って始めました。

しかし、私は完全に文系の非エンジニアなので、途中裏側がぐちゃぐちゃになり修復できずにゼロからやり直す、ということを3回くらいやる非常に非効率なやり方をしてしまいました。勢いではじめたので、これは仕方がない。次はもっと短く、3日でできるかな?と思っています。

ただ、完全な趣味プロジェクトのため、時間の確保が大変でした。

というのは、シンガポールのローカル小学校に子供を通わせている関係でそもそも一人時間が1日に5時間しかないのです。もちろん、週末はゼロ!

なので睡眠時間をけずって夜な夜なパソコンに向かっていました。久々パソコンをベッドに持ち込みそのまま寝落ちするという、翻訳の仕事をしていた頃を彷彿とさせる5日間。

でも、睡眠時間を削ったおかげで熱量を失わず、自分の理想とする状態になったと思っています。大満足!ただ、英語の部分はまだ公開できていません・・・。

赤ペンジャーナリングは自分にとってものすごく大切なものであり、言ってみれば私の生きざまの化身です。なので、変なものとして出したくない!絶対に納得できる状態でしか出したくない!と思いやっていたのですが、完璧を求めすぎると完成せず熱量がなくなる恐れもありかなりギリギリでしたw

とはいえ相当こだわりました。

自作ロゴへのこだわり

まず、最初に作ったのがRed Pen Journaling のロゴです。これも、結局デザイナーを入れずに自分で作成。

赤ペンジャーナリングは、基本的にグローバルで展開していく予定なので英語にして、全体的に海外っぽいロゴをイメージしました。といってもあくまでも、私のイメージなので、ちがっていたらすみません。


メインのフルのロゴはこれ。

上部ヘッダーにあるロゴは、RED PENは赤ペンで書いた文字、JOURNALINGはベースカラーで書いた文字、下の一本の線は紙を表しています。

つまり赤ペンジャーナリングで必要な3つの要素をロゴ内で表現しています。

REDとPENの間にある赤いペンは、この赤ペンジャーナリングのポイントである赤ペン。よくジャーナリング関連だとおしゃれな万年筆をビジュアルに使うことが多いと思います。

でも、ジャーナリングに自分が使うのは無印良品のジェルインクペン。そして多分他の人も赤ペンは普通のペンを使うことが多いと思うので、敢えて普通のペンの形をモチーフにました。

赤ペンの点は「J」の上に配置して、この点で赤と黒をつないでいます。

ちなみに、ペンとこの「J」の上の点はびっくりマークになるようにしていて、赤ペンジャーナリングの気づきや内観からのひらめきをイメージしています。


ファビコン用のアイコンロゴ


ファビコンなどに使っているアイコンロゴは赤ベースと白ベースの物を用意しており、日本人なので日の丸的な赤の円も作りました。また円は自分との調和、それからCTFARモデルでも重要視している、ぐるぐると回っていく様子を表しています。


このような形で検討したけれど四角はいまいち

ちなみに、色フェチなので、この赤と黒にもこだわっており、赤はパキっとした赤ではなく少し深い紅に近い色にしています。黒も真っ黒ではなく、濃いグレー。画面越しでは分からないかもしれませんが、ただの黒ではないのです!

シンプルで誠実なトーン

色は、ロゴだけでなくサイトのカラーやトーンの部分でもこだわりました。

赤ペンジャーナリングのサイトは、よくある「夢を叶えるノート術」、「豊かさを感じる」ということをうたうようなふわふわした女性らしいサイト、フラワリーな感じとは違う、もっとかっちりとした印象を与えられることを重要視しています。

誠実さ、まじめ、芯が通っている、ということを大事にしているので、曲線はあまり使わず、直線を基調に。色もグレー、黒、白、アクセントカラーに赤、という形でつくりました。

サイトの内容としても、どちらかというと、ビジネスライクでかっちりとした形で、赤ペンジャーナリングおよび自己成長に関する学べる場、という物にしていくので、ここら辺をサイトに反映させることを意識しています。

きちんとした体系的なメソッドであること、ビジネスパーソンに共感してもらえるようなカラーリングとトーンで、特に男性にも見てもらえるようなデザインに仕上げました。

実際、見てくれた人(男性)がすごく洗練されたサイトですね、とメッセージしてくれて、本当に泣けました。ありがとうございます。

UXの小さな差にも妥協しない

もう一つのこだわりは、サイトに来てくれる人がストレスなく閲覧できること。いわゆるUX的な部分です。結局何度も足を運んでもらうサイトは、感じがよく、違和感がないことは本当に大切。

たとえば、ページを遷移した際の変なずれ、レイアウトの崩れなど、見た時のひっかりがないことはとてもとても大事。

レスポンシブでかつ多言語対応にするために、切り替えやヘッダー部分などが必要で試行錯誤するなかで裏側がぐちゃぐちゃになり、ゼロリセットを繰り返したのですが、おかげで変なひっかかりがなくスムーズに見てもらえるようになったと思っています。

私が心から尊敬しているスタートアップのファウンダーの一人にシンガポールで一番のキャッシュバックサイト、ShopBackのヘンリーがいるのですが、彼にプロダクトのクオリティとはなにか聞いたらUXだと言っていました。

ヘンリーはウェブサービスなど、フィジカルな物がない場合プロダクトのクオリティとは、ちょっとした操作性や挙動の違い。使いやすさこそが他のサービスとの差別化にあり、クオリティの差である。それをつきつめることで勝てるといつも言っています。

実際、ShopBackは現在アジアを中心に11のマーケットで展開していますが、ほとんどの国で既存プレイヤーを短期間で倒して一位になっています。

なので私もこの操作性や挙動にも細心の注意を払って作りました。

くり返しみてもらうための心地よさ

もう一つこだわったのは画像選び。いわゆるライセンスフリーの画像って結構同じになりませんか?アフィリエイトやブログに詳しい方だと分かると思うのですが、サイトの写真見ただけで、あーこれアフィか。と分かる。違和感ではないのですが、そういうサイトだと個人的に画像が無理でまた見たいとは思えなかったりします。

なので、見て気持ちのよい画像、そして画像がちょっとした癒しというか見て気持ちが落ち着くsoothingになるように、統一感のある写真を自作したり、加工したりするなどしました。トーンや色などもきちんと選んだつもりです。


見て気持ちのよい画像を厳選しました。私の趣味ですw

とにかくポイントは、気持ちよく繰り返し来てもらえるサイト!!赤ペンジャーナリングでも書いていますが、感情というか気持ちはとても大事です。なので心地がよく、また訪れてもらえるようなサイトを目指しています。

私が本当に伝えたいこと

他にもこだわりは、色々あるのですが、まずはここらへんで。

このサイトは、私の今までをすべて込めたサイトになっています。特にトップページのコピーは伝えたいことが詰まっています。

ノートに書くジャーナリング、内観、課題解決力、人生のチャレンジ、自己成長などすべてがようやくぴたっとはまった気がしています。

このサイトは今自分に出せる最良形でできあがったと思っています。ぜひトップページだけでもいいので見てください!

最後に

赤ペンジャーナリングのサイトが私のメッセージをしっかりと伝え、見た人の心に響くものになっていることを心から願っています。

赤ペンジャーナリングは過去の自分のようにもがいている人はもちろん、多くの人の役に立てるものだと信じています。私はこれを一人でも多くの人に届けることをライフミッションとしてこれからも発信していきます。

暑苦しい文章になってしまったのですが、必要な人に届けられるように引き続き頑張る所存。

よかったらぜひ、赤ペンジャーナリングのサイトをチェックしてみてください。たぶんiPhone15 Pro maxくらいのサイズ(幅430ピクセル)が一番きれいに見えます。(自分のスマホがそれなのでw それに最適化しています)

誰か必要な人に届きますように。
フォローやいいね、シェアなどしてもらえるとうれしいです。

いいねをしていただくと昔書いた私の絵が出てきます。

なにか、質問などがあれば、Xまで。なお、誹謗中傷は受けつけていませんのでよろしくお願いします。

よかったらサポートお願いします!いただいたサポートは情報収集のために使わせていただきます