PuzMol.com を作ったときのメモ

概要

  • 「ペーパークラフト分子模型 PuzMol」のサイト（ PuzMol.com ）を作った
  • 作ったときのメモを残しておこう

緒言

  • 去年から、PuzMol（パズモル）という、紙製の分子模型を開発している
  • PuzMol の情報発信として、note に専用アカウントを作っていた
  • １年前に puzmol.com というドメインを取得した
    • が、ずっと放置
  • 最近、ここや ラボのページ をリニューアル
    • → サイト構築に必要な知識を思い出した
      • → 覚えているうちに PuzMol のサイトを作ろう
  • 作成に２日くらいかかった

方針

  • note.com のようなシンプルで読みやすいデザインに
  • 読み込みを少なくしてサクサク表示
  • ロングスクロール型（one page 型） に
  • 情報発信の「基点」になるように
    • 基本的な情報の発信のみに役割を絞る
      • → 放置してもオーケー
    • 定期的な情報の発信には note のマガジンを利用
      • → コンテンツプラットフォームは強い

メモ

  • 忘れないうちに、利用したサービス / アプリ / などなどをメモ

Hugo

  • 静的 HTML ジェネレータ
  • shortcode が便利
  • だんだんと、まあまあ使いこなせるようになってきたかも

Xserver

  • レンタルサーバー
  • 独自のアクセラレータが強い
  • 速い・安定・快適

Cloudinary

  • 画像＆動画クラウドサービス
  • URL に埋め込むだけでサイズ変換できたり、便利
  • 高機能すぎて、まだまだ、十分に使いこなせていない

HeroTofu

  • フォームエンドポイント
  • マイナーなサービスだと思うけれど、個人的に好き
  • 無料版
    • 100 submittions / month まで対応
    • スパム対策（Google reCAPTCHA v3）
    • 今のところ、無料版でいい
  • 有料版
    • $9.99 / month
    • 他の同様のサービスに比べて安い
    • Slack とも連携

Lighthouse

  • Web サイトを診断する Google Chrome 拡張
  • 診断結果のご指摘にはできるかぎり素直に耳を傾けた方が良い
  • 適切な「評価」は、より良い開発の指針！

Lucide

  • オープンソースのアイコン集
  • シンプルなデザインが好き
  • PuzMol にぴったりのアイコン（hexagon）を発見！

Obsidian

  • Markdown エディタ
  • VSCode もいいけど、Markdown は Obsidian の方が好き
  • ボタン１つでデプロイするようにしてます

note

  • コンテンツプラットフォーム
  • デザインの参考に
  • 「PuzMol 通信」というマガジンを作った
    • → PuzMol.com と連携させよう

結果

PuzMol.com

Lighthouse の診断結果

  • 画像 / 動画コンテンツが多いので、performance の評価は渋い
    • が、動画は<video preload="metadata" ...なので、問題ないのかなと
  • 体感的にも、サクサク表示されていると思う

Todo

  • 画像 / 動画は、とりあえずのものを使ったので、あとでアップデートする
Posted :