トークンハウスコミュニティメディア
こんにちは、トークンハウスメンバーのケンタロウ(@kentaro_koga)です
福岡を拠点に、友人のカズキ(@kazukisonokawa)とFumpというクリエイターチームとして活動しており、主にWeb制作のお仕事をしてます
今回、トークンハウスのコミュニティメディアの制作を担当させて頂きました
ここでは、どんな感じで制作していったのかをザックリと書いていきます
コンセプト：あったかいサイト
まず、ケンゴさん・ダイスケさんのデザインイメージは以下
- オレンジ色ベースで、あったかさが伝わる雰囲気
- とはいえ、UIは最新というか最先端のイメージがある方が良い（憧れを抱くような、ここに自分も乗りたいなと思うような）
ロゴは既に完成しており、オレンジと黄色のグラデーションが使われていました
サイトの目的は以下
- トークンハウスがどのような思いやビジョンでやっているかの認知を最大化し、ファンを増やす
- トークンハウスに興味がある人が申し込みをするLP代わりとなり、あったかいコミュニティメンバーを増やす
これらを軸に「サイト構成・デザイン・コーディング」をしていきました
サイト構成
元々トークンハウスのメンバーと一緒に作っていく予定でしたので、トークンハウスのSlackチャットでみなさんとアイデア出ししてました
トークンハウスの様子や、海外の風景、メンバーの写真などがみれるギャラリーページはメンバーのなおみんさんのアイデアから生まれました
他はLPの替わりになるようなページが必要でしたので、aboutページをLPのようにしてCVボタンの設置。
大まかな構造は最初に大介さんが提案してくれました^ ^
「共同創業者紹介」「プロジェクト」「メンバー」「参加申し込み」「お問い合わせ」を入れることになり、サイトの構成ができました
デザイン
トークンハウスのコンセプトのキーワードが「あったかい」です
なので、デザインイメージの「オレンジ」はとても合っているなと思いました
ロゴもオレンジ系ですしね^ ^
また、家族のような柔らかさを感じるコミュニティなので、ボタンや写真、カードなど全部丸みをつけています
XDでデザインを作り、ケンゴさん・大介さんと共有して作り込んでいきました
メディアサイトなので２カラム構成にした方がサイト内の回遊率は上がるのかな、と思いましたが、あまりメディア感を出したくなかったのと、メンバーが書くコンテンツ自体に集中して読んで頂きたかったので、１カラムのシンプルな構成にしています
他にも細かいとこが沢山ありますが、長くなるので割愛しますm(_ _)m
コーディング
トークンハウスメンバーも記事などを更新していくのでWordPressを使用しました
まず、どのページをメンバーが後から更新していくのか洗い出しました
コミュニティブログはもちろんのこと、ギャラリー、メンバー、プロジェクトのページはどんどん投稿していけるようにする必要がありました
なのでカスタム投稿タイプとカスタムフィールドを追加し、管理画面から誰でも後から投稿できるようにしました(投稿するにはユーザーの追加が必要)
他のページは固定ページ、もしくは固定ページのテンプレートを作成しました
アニメーションはあまり入っていないですが、メニューのアニメーションにTweenMax・ローディングのアニメーションにLottieを使用しています
簡単なアニメーションではありますが、AfterEffectsでロゴとloadingの文字のアニメーションさせ、Bodymovinでそのアニメーションjsonファイルを書き出しLottieでアニメーションさせています
制作は共同制作者のカズキと２人で行っているので、連携して作業が出来るようにローカルでWordPressの開発環境を作り、Githubでコードの管理をしています
他に使用した技術的なものをザーっと紹介
「WebPack / Babel / Glide / Luminous / Sass / Lottie…」
それぞれ説明していると長くなってしまうのでここも割愛させていただきますw
コミュニティと共に成長するメディア
サイト制作に関してはザックリ説明しましたが、最後にこれからこのサイトに対する思いをちょっと書きます^ ^
トークンハウスのメンバーは色んな業種の方が居て、みなさん色んな国で活動してます
サラリーマン、ライター、ブロガー、デザイナー、エンジニア、ドクター、料理人、学生などなど
トークンハウスの創業者のケンゴさん・ダイスケさんが“価値観や雰囲気がコミュニティと参加者の双方で一致しているか”を面談で確認しているので、色んな方々が居ますがみなさんの価値観は似ていると思いますし、実際にそう感じてます
なので、メンバー同士でプロジェクトを進めたり仕事に繋がったりしやすいです
今後も色んな国で色んなメンバーが色んなジャンルで活躍していくかと思います
その中で、このコミュニティメディアがメンバー同士がCatch upできる場や、アウトプットする場、発信する場になっていったら最高だな〜と制作者の１人として思ってます
上の３つはTwitterなどのSNSでもできますが、みんなの集まる場所がWeb上にあるのってクールじゃないですか^ ^
このサイトを見て、「お、なんか楽しそう！」と思った方、ちょっとでも気になった方は、是非お問い合わせ・参加申込みしてみてください^ ^
先程書いた通り、メンバーには様々な専門の方がいるので面白いですよ^ ^
みなさんあったかくて本当に良いコミュニティです
ここまで読んでいただきありがとうございました！
僕たちFumpはWebサイト制作・デザイン・コーディング・写真撮影の仕事を随時募集しています^ ^
SNSのDMでも何でもかまいませんので、気軽にご相談ください^ ^
では〜〜
