カテゴリー: 未分類

Hugoで静的サイトを作成する

こんにちは!今回はhugoで静的サイトを作成するために、やったことをメモっておこうと思います。

個人サイト作り直そうかなというツイートしたところ、友達のいけてるデザイナーから以下のようなリプライをもらいました。

で、いろいろ調べてみたらHugoよさそうだったので、Hugoをどのようにキャッチアップして、個人サイトの作り直しをしたかの備忘録をメモっておこうと思いました。

作り直したいサイト

個人的なプロフィールサイトを結構昔から運用しているのですが、HTMLやCSS全部ゼロから入力で作成&FTP通信経由でファイルを更新という20年前のインターネットをずっとやってました。

そんなサイトがこちら。 ちなみに、イラストは大学時代の友達のアーティストに描いてもらったものでした。

frsw.netのトップページ

今見たらCopyrightが2015年になってますね。古い!

Hugoのキャッチアップ

ひとまずHugoのページいって、About読んだり、Quick Start読んだりして、とりあえず動かして、Hello World的なサイトは作れました。が、そこであんまりよくわからんなという感じになってしまいました。

というのも、そもそもここ最近はずっとバックエンドよりの開発しかしてこなかったので、静的サイトジェネレーター(Static Site Generator)などのアイディア自体あんまり親しくなかったからです。ということで、そのあたりから解説してくれる本とか記事ないかなということで探して、以下の書籍を見つけたので一通り読んでみることにしました。

meganii (著) 『Hugoで始める静的サイト構築入門 静的サイトジェネレーターで作る自作サイト 』

この本の1、2、3章を読んで、ここ最近の静的サイトジェネレイターのパラダイムがざっくり理解できたような気がしました。

4章以降を読むと、色々なデザインのテーマを利用して使って簡単なサイトを構築できるようになりました。

詳細は上記の本を読んでいただけると良いかと思いますが、ブログ投稿などで有用な機能が多数提供されているように感じました。
時間あったら、このブログもHugoにお引越ししても良いかもしれません。

作り直し

方針

作業メモ

リポジトリ

静的サイト作成の初心者なのでとりあえず、Githubに「frsw.net-source-hugo」的なリポジトリを作成して、Hugoのプロジェクトのリポジトリとして利用することにしました。

デザイン

Hugo Themesでよさそうなデザインを探しました。その中で、Hugo Eurekaというデザインがよさそうだったので、利用させていただくことに。

すでに必要なHugoなどのインストールは終わっているので、まずは以下のコマンドでサイトを作成します。

サイト作成

# サイト作成
hugo new site . --force

# テーマ適用
hugo mod init github.com/wangchucheng/hugo-eureka.git

# 用意してくれたサンプルサイトの設定をコピー
curl https://raw.githubusercontent.com/wangchucheng/hugo-eureka/main/exampleSite/config/_default/config.yaml > config.yaml
curl https://raw.githubusercontent.com/wangchucheng/hugo-eureka/main/exampleSite/config/_default/languages.yaml > languages.yaml
curl https://raw.githubusercontent.com/wangchucheng/hugo-eureka/main/exampleSite/config/_default/menus.yaml > menus.yaml
curl https://raw.githubusercontent.com/wangchucheng/hugo-eureka/main/exampleSite/config/_default/params.yaml > params.yaml

# オリジナルのconfigファイルを削除
rm config.toml

あとは、サンプルサイトのテンプレートを見ながら、よしなにcontentフォルダ以下にページを追加していけばOKです。

今回は特にグローバルメニューとか作らなくても良いかもとなったので、contentフォルダは以下にhomepageフォルダを追加して、その中にいくつかのページを追加することで完成です。

完成

以下のようなページになりました。現代風でいいですね。

 

今回Hugoに変えたことで、今後ブログのポストのようなものもここに簡単に追加できるようになりました。

今後

ひとまず、このサイトを現在ホストしているところにポンと置くようにしました。

今後はGithubアクションと連携して、Pushしたら自動でサイトに反映されるところまで作りたいと思います。

 

 

 

2022年のまとめ & 2023年抱負

こんにちはfurufuru(@rilmayer_jp)です。最近、会社で呼ばれているハンドルネームに変えました。

2022年の振り返り & 2023年の抱負をまとめたいと思います。

年末に扁桃炎で高熱を出してダウンしてしまったのでやや遅れ気味です。
振り返ってみると2022年は色々あったような気がします。

長くなってしまったので、概要を載せておきます。忙しい方はここだけ読めば良いかもです。

  • 2022年
  • 2023年
    • 引き続きプロダクトマネジメントの標準化を進めつつ、クロスセルを意識したレコメンデーションの検討を進める。
    • 英語は引き続き強化しつつ、デザインのスキルを本格的に身につけてみようかと思う。

はい、では振り返りスタートです。

2022年振り返り

振り返りのフレームワーク

そこからか?という感じもしますが、ここ数年間で導入している振り返りのフレームワークがあるので、振り返りがてら紹介しようと思います。

以下のようにいくつかの項目があり、それぞれについて振り返ってみるというものです。

  • 1. 年間目標:長期的にやりたいこと・ありたい姿と、そこから設定した具体的な行動計画がどうだったか
  • 2. マインドセット:自分が重要視しているマインドセットを年間通じてどの程度意識できたか
  • 3. スキルセット:すでにある程度身についているスキルに加えて、どの程度新たなスキルが身についたか
  • 4. イベント:カレンダーを見返しながらどんなことがあったかを振り返る
  • 5. 本・記事・映画・漫画など:振り返って今年の10冊をピックアップ

一部内容はブログでは公開できないですが、公開できるところは公開していこうと思います。

それでは振り返りスタートです〜。

1. 年間目標

ここ数年変わっていないのですが、長期的にやっていきたいこととして以下のテーマがあります。

良いものを作る。そのための仕組みを作る。その方法も作る。

このテーマから、今年の目標は「組織論や経営学を学び、今働いている会社のDiscovery体験の改善を組織的に進める」でした。

やったことベースでいうといくつかあるのですが、ここでは「体系的なプロダクトマネジメントの導入」について振り返ってみます。

体系的なプロダクトマネジメントの導入

2022年はうっすらとプロダクトマネージャーやるかもしれないという予感があり、やるならプロダクトマネジメントの導入をちゃんとやろうと思っていたのでそこが1つのテーマでした。

背景

会社で所属しているチームメンバーが徐々に増え、チームが会社で担う役割・期待されることも徐々に大きくなっているなか、自分達のチームを専任でみるPMが不在のため色々と不都合が生じていた状況でした。またチームメンバーからも「長期的なビジョンが見えない」や「外部チームとのやりとりでトラブルがある」などの不満も生じていていました。(この辺は後述の記事で語っています。)

やったこと

  • 自分の役職をPMに変更:すでに半分PMのような動きもしていたのですが、実際の肩書きがエンジニアであったため個人的にもなかなか動きづらいところがありました。そこで会社と話して自身の会社での所属をPM組織に変更してもらいました。
  • 理想のプロダクトマネジメントを言語化:プロダクトマネジメントは初心者だったので、まずは型を身につけるために「体系的なプロダクトマネジメント」とは何かを言語化するために、書籍を読み漁って、社内ドキュメントとしてまとめました。以下、私のプロダクトマネジメントの骨子となっている書籍です。
  • プロダクトビジョンを作成:今までなかったので、まずはここから着手しました。「なぜプロダクトビジョンが必要か?」というところの明確化からはじめて、関係者と複数回の議論を経てビジョンを作成しチーム内外で共通認識を作っていきました。より背景を理解してもらうためにブログを書いたり(“Product Diseases” Mentioned in Radical Product Thinking)、ビジョンを伝わりやすくするためにデザイナーと一緒にイラスト化をしたりしました。
  • プロダクトの戦略を明確化&ロードマップを作成:「色々できるんだけど結局何やるの?」というチーム内外のメンバーの疑問に応えるべく、その辺りを明確化していきました。主にプロダクト(ユーザー体験がどう変わるか)がメインではありますが、そのために投資する技術(機械学習とか)やその時間軸、数年後にどんな状態になっているかなどをドキュメント化して社内で共通認識を作りました。
  • プランニングプロセスの明確化:今までチームの4半期ゴールはOKRというフレームを使っていたのですが、OKRの設定は特定メンバーがチームメンバーや上位意思決定者と話しながら「こんな感じやろ!」で設定していた属人化強めなプロセスでした。そこで「プロジェクト」という単位とその種類を明確化し、プロジェクトをどのようにチームの計画に載せるか、どのように優先度をつけるかを明確化してチーム内で共通認識を作っていきました。
  • 情報の透明化:基本的には会社レベルでの情報の透明性は非常に高い弊社ですが、情報にアクセスできるだけでは透明性が担保されているとは言い切れません。詳細を確認するために公開されているドキュメントを読み込んで重要な部分(自分達のチームに影響がある会社の意思決定など)を拾うのは難しい場合があります。さらに私としての透明性の重要な側面として「次の行動が誘発される」というものがあるため、開発者にとってそのような透明化を行うために以下2つの情報の透明化を図りました。
    • 社内情報:重要事項に絞ってアップデートあるたびにPMから細かく共有するようにしました。特に注意したのは情報を受け取るメンバーの驚きを最小化することと、情報の持つ意味(何がどのように自分達に影響するか)を丁寧に伝えることの2つです。
    • ユーザー理解:元々データを活用する文化はあったのですが、UXリサーチ等の定性的な情報にもアクセスできるようにしました。UXリサーチャーとチームメンバーを繋いだり、定性調査の結果をメンバーにシェアするなどしました。

変わったこと

色々やってますが上記の取り組みは結果が伴わなければただの自己満です。

実際のところどうだったかというと、少しずつ成果が出始めており、今年の後半ではチーム史上過去最高にKPIを向上させることができました。

とはいえ、チームメンバーがみんな本当に優秀なので放っておいても成果出るパターンだった可能性は大いにあるのですが・・・
あま、そこに少しは貢献できたと信じます・・・

色々やったのですがやりたかったことの60%くらいしかできなかったので、残りは2023年に頑張ることとします。

2. マインドセット

毎年そんなに変わらないのですが、今年大事にしていたマインドセットは以下の内容です。

この辺の詳細は昔noteで記事書いた(その中では「スタンス」という言葉を使っています。)ので参考にしてもらえると良いかもです!

大事にしたいマインドセット

  • いつでも大事にする : プライベートでも大事にしたい価値観
    • 集中:文字通りそのまま、一度に複数のことに同時には取り組まない姿勢。
    • 常軌を逸する:別に頭おかしいことをしたい訳ではなくて、常に常識を疑い続けて、おかしいと思ったらその常識から逸脱することを意識し続けるようにするという意味あい。
    • 好奇心に従う:好奇心が一番大事。
  • 組織でいるとき大事にする : 組織人として大事にしたい価値観
    • 客観的視点を伴った主体性:何事にも主体的に取り組むんだけれど、客観視点忘れない。
    • 機会開拓による自己革新:リクルートの昔の社訓「自ら機会を創り出し、機会によって自らを変えよ」的な意味合い。
    • あらゆる瞬間を最大限活用:限られた時間リソース有効活用するために、その時その時でできる限り考えて最良の行動をする。
    • 多様性を尊重し双方の長期価値を模索:自分と違うことを受け入れて、あらゆる関係者の長期的価値が最大化される道筋を考える。

どうだったか振り返り(いくつかピックアップ)

◎ よかった

  • 好奇心に従う:忙しかった割には結構興味を広げられた1年だった気がします。
    • 美術(史・哲学):美術史学んで、画廊に行って絵画買うなどしてみました。
    • 外交史:仕事で使う交渉術から派生して、外交による国と国のパワーバランスの保ち方など学んでみました。
    • 倫理学:倫理学の基礎を学んでみました。応用として技術者倫理も学びました。
    • 刑法:漫画『ハコヅメ』読んで興味が出たので、基本的な内容を学んでみました。
  • 機会開拓による自己革新:PM始めたことで、考え方や行動が変わり自己革新できたかもと思います。

× ダメだった

  • 集中:全然集中してなかった1年だったように思います。来年はもっと集中を意識したいですね。。
  • あらゆる瞬間を最大限活用:これはあまりできなくて、後で考えればいいかと後回ししてしまったり、自分で作ったタスクの制限時間などなかなか守れなかったところがありました。来年は頑張りたいところです。

3. スキルセット

今年は「英語」と「PM」のスキルを伸ばしていきたい年でした。

英語

仕事でドキュメントを大量に書くので、英語力がしょぼいと伝わらなかったりドキュメントそのものの信頼性が下がってしまうため、ライティング力を少しだけ強化しました。

主にやったのは、英作文の添削サービスに、日記やブログなどの下書きを英語で書いて添削してもらうというものでした。

個人的には結構効果があったかもと思い、今後も継続して英文作成の能力を上げていこうと思いました。

PMスキル

書いておきながら、PMのスキルをズバリこれといった形で列挙するのは結構難しかったです。個人的にはPMの能力はマインドセットによる部分が大きい気がしており、それ以外は知識でカバーできるところも実は多いと思っています。ですが、それでも特に伸ばしたいと思っていたスキルが「交渉力」でした。

交渉は「相手と自分の利害を調整して、双方の納得できる落とし所を作る」ことだと思っているのですが、PMをやると意外と(意外じゃないかも)交渉を行うシーンが多く発生します。

そのため、いかに短時間で相手の要望を許容しながらこっちの要望を飲んでもらうかに苦心することになります。できればWin-Winが良い訳ですから、それをできるようになる必要があり、うまくできてこそ良いPMと思いました。と言うことで、本を読んで実際の交渉シーンでセオリーに従ってみたり、相手のコンテクスト考慮しつつ通したい内容を盛り込んだ提案をしてみたり、時には妥協してみたりしながら交渉力をつけてきた1年だったと思います。

来年も引き続き、Win-Winな結論を導き出せるPMをやっていきたいと思います。

4. イベント

主な出来事をピックアップしました。

5. 本・漫画・記事など

今年の10セレクトは以下の通りでした。必ずしも今年出版と言うことではなく、今年心を動かされたり、お世話になった本からピックアップしています。(※アフィリエイトリンクです)

  1. (本)『ラディカル・プロダクト・シンキング イノベーティブなソフトウェア・サービスを生み出す5つのステップ』ラディカ・ダット (著), 曽根原 春樹 (翻訳, 監修), 長谷川 圭 (翻訳):今年最も読み込んだ一冊。「アジャイル活用してKPIをガンガンあげていくだけだとダメな気がする」という私のモヤモヤに1つの答えを与えてくれました。同じ課題感を持ってる人は一読をおすすめします。
  2. (漫画)『左利きのエレン』かっぴー (原作), nifuni (漫画):活動のエネルギー源。連載開始から毎年お世話になってますが、今年で完結となり寂しさもありますが、素敵な作品を描き切っていただき感謝です。毎話泣きそうになるのはなぜでしょうか。私が天才になれなかったからか…
  3. (本)『ドキュメント トヨタの製品開発: トヨタ主査制度の戦略,開発,制覇の記録』安達 瑛二 (著):こちらの本もたまに読み返すのですが、今年は特に読み返しました。私のPMとしての振る舞いは、この本で描かれるトヨタの「主査制度」をかなり参考にしています。本書冒頭の”主査は直属の主査付を除く製品開発チームのメンバーへの人事権も命令権も持たず、「説得・調整する権利」だけを持つので、主査は「なぜそれが必要か」、「なぜその成功確率が高いと予想できるか」をひたすら説くしかない。” という一節がこの主査制度の一面をよく表していてとても好きです。
  4. (記事)「【すずめの戸締りネタバレあり感想】これは、「秒速原理主義者〈ラディカル5センチメーター〉」の見つけた「世界の秘密」についての記録だ:かくいう私も秒速原理主義者でね。『君の名は。』から『すずめの戸締まり』までの新海監督の作品の変化で、私が感じていた感覚を見事言語化してくれた記事でした。置いて行かないでくれよ…
  5. (論文)Farzad Eskandanian and Bamshad Mobasher. “Using stable matching to optimize the balance between accuracy and diversity in recommendation.” Proceedings of the 28th ACM Conference on User Modeling, Adaptation and Personalization. 2020. :今年は自由研究として経済学(マーケットデザイン)の推薦システム応用を検討していました。私が主に関わっているフリーマーケット分野では出品者・購買者がいる中で、必ずしも購買者の効用だけを最大化すれば良いとは限らないと感じており、そこに対して考えるヒントをくれたのがこの論文でした。ゲール-シャプレイアルゴリズムが好きだったのもあり、私としては非常に面白い内容でした。
  6. (本)『ふだんづかいの倫理学』平尾 昌宏 (著)
  7. (本)『経営戦略 – 論理性・創造性・社会性の追求 第3版』大滝 精一 (著), 金井 一頼 (著), 山田 英夫 (著), 岩田 智 (著)
  8. (漫画)『チ。―地球の運動について―』魚豊
  9. (本)『HEALTH RULES 病気のリスクを劇的に下げる健康習慣』津川友介 (著)
  10. (漫画)『らーめん再遊記』久部緑郎 (作), 河合単 (画), 石神秀幸 (協力)

その他

  • ボードゲーム … 2022年後半にハマりました。一緒にやりましょう。
  • ウィッシュミーメル(サンリオ)… 2022年一番の推しです。
  • 入浴 … 引っ越してちゃんとしたお風呂がついた家に来たら入浴が楽しくなりました。来年はバスソルトとか手を出したい。
  • 健康 … 体重が増えた。。痩せたい。。

2023年の抱負

2023年のテーマ

2023年も引き続き、良いものづくりをしていきたいと思います。2021年は「技術力とは何か?」の言語化を進めて、ある程度自分なりの答えを持つことができました。2022年は「Discovery体験とは何か、それを実現する良いものとは何か?」、「組織における良いものづくりとは何か?」を問うてきたように思います。

2023年は以下のようなテーマを深掘っていこうと思います。

[その1] ハッとする商品との出会いを実現するレコメンデーション

従来的なECにおけるレコメンデーションは最終的なビジネス目標として「購入してもらえる商品を推薦」できたら基本的にはOKなのですが、「購入してもらえる商品」の内訳は大きく分けて2つあります。1つは「特にレコメンデーションしなくても買ってもらえる商品」で、2つめは「レコメンデーションしなかったら出会えず、購入することもなかったであろう商品」です。ここでは後者のタイプの商品を「ハッとする商品(そしてそれが購入につながる)」と定義します。

こうした「ハッとする商品」のレコメンデーションについて、私が考える難しさは主に以下の2点です。

  • 計測の困難性 … 2つのタイプの購入はアプリ上でユーザー行動を見分けにくいことに加え、そのレコメンデーションが購入の意思決定に貢献したかどうかを見分けるのは実は結構難しかったりします。昨今一般的になりつつあるアトリビューション思想では「その機能(やページ)が購入にどのくらいの貢献をしているか」という判断軸で、アプリ内のすべての機能を横断的に評価しようとします。しかし、これだと例えば「概念との出会い(その商品自体は購入に繋がらなくとも、その商品を通じて購買ニーズが顕在化するケース)」についての貢献をうまく計れず、いまいちレコメンデーションは役に立っていないという結論になりかねません。そうした誤った現状把握を避ける方法を探す必要があります。
  • 安心感のある商品とハッとする商品のバランス … 普段みなさんが使うアプリ(YouTubeやSNS等)を想像してもらえると良いかもしれませんが、例えばトップ画面に並んでいるアイテムが自分の好きなもの、自分と関連の強いアイテムであるほど安心感があるかと思います。私は「このアプリを開くと自分の好きなもので溢れているはずだ」というある種の安心感が、利用者にとって重要だと考えるのですが、一方でここまで話していたようなハッとする商品のレコメンデーションも大事だと考えています。そこで、この2つのタイプのアイテムの良いバランスが重要になってくるのですが、それはサービスの特性やユーザーのコンテクスト等によって変わってくるかもしれません。このような良いバランスでレコメンドすることがもう一つの困難だと感じます。

このあたりの解決が、2023年のメインテーマになりそうです。

[その2] Search & Discovery領域のプロダクトマネジメント標準化推進

2022年はプロダクトマネジメントを学んで実践する1年でした。

その中で検索・推薦を扱う領域におけるプロダクトマネジメントについて実践経験が蓄積されたような気がします。

そこでこの経験を活かして、以下の2点を進めたいと思います。

  • プロダクトマネジメントの標準化 … 個人的には普通に開発業務したいので、PM業務を誰でもできる or PM不在でも何とかなる状況を作りたいと思ってます。そのために、今のプロダクトマネジメントを標準化してプロセスの自分への属人化を剥がしたいと思います。
  • ツールの作成 … PM業務も定常的に発生する業務や、回数は少なくともほとんどのPMが必ず行うがあります。例えば、前者でいうとKPIの確認・プロジェクト進捗状況の把握などで、後者で言うとビジョンの作成などです。ここをもっと楽に短時間でできるようなツールを開発して、社内外の様々な人が楽できるようにしたいです。例えば、KPI監視のOSS作ったり、ビジョンをまとめるための一連のワークショップを形式化したりなどです。

マインドセット・マインドセット

  • マインドセット … 変わらず、2022年と同じ感じでやっていこうと思います。特に集中を意識します。
  • スキルセット
    • 英語:引き続き英語は強化したいです。目指すレベル感としては以下のところをやっていきたいですね。
      • 会話 → 採用面接で問題なくやり取りができる(アクション:週に1回以上英会話レッスンする。)
      • ライティング → 翻訳ツール頼らずにビジネス的に一意に意味の伝わる文章を書けて、他者のドキュメントを添削できる(アクション:月に1回以上英語ブログの添削を受ける。)
    • デザイン:より多くの関係者とスムーズにコミュニケーションが取れるように、アイディアやプロトタイプの精度高い具体的なイメージが作れることを最終ゴールとしてデザインの基礎を身につけようかと思います。(スクールに通うかも… 未定…)

まとめ(2022年&2023年)

2022年やったことと、2023年の抱負をまとめてみました。

まとめは、冒頭に載せているのですが、お気持ちとしては以下のような感じです。

昨年は会社だと成果が出始めたり、ずっと挑戦してきたけれど中々解けなかった課題が新しいメンバーのおかげで解けたりと風向きが少し上めな1年だったような気もします。一方で1月から2月あたりは忙しすぎて病んでた気がするので、連絡取りづらかったりでご迷惑おかけしました。。

2023年はちゃんと人間やっていきたい気持ちがありますが、それと同時に自分の興味あること深掘りたい気持ちもあるのでちゃんと人間できるか不安でもあります。定期的に人間性チェックできる仕組みなど導入すると良いのかもしれません。。

ということで、今年もどうぞよろしくお願いします。