studio.tmk仕事の依頼
サイト運営

studio.tmkのつくり方：EmDashで自分の拠点サイトを立ち上げた

このホームページ「studio.tmk」は、CMSの「EmDash」でつくっています。キャッチフレーズは「つくる、書く、発信する。」。この記事では、サイトの中身とつくり方をまとめます。

note、Instagram、アプリ、学習サイトと、つくるものが増えるにつれて、活動がいろいろな場所に散らばっていきました。「結局どこを見ればいいの？」と思われないように、全部をひとつにまとめる場所がほしいと考えたのがきっかけです。

何を置くサイトか

目的は、note、Instagram「lost.ai.girl」、komalog、お金の勉強ノート、MINILABといった活動と、最新の記事に迷わずたどり着けるようにすることです。あわせて、おすすめと仕事の依頼の窓口も置いています。

技術構成

  • EmDash 1.4：Astroで動くCMS。管理画面から記事や活動を編集できます
  • Astro 7：サーバーレンダリングでページを表示
  • SQLite：記事や活動のデータを保存

コンテンツは「活動（projects）」「記事（posts）」「固定ページ（pages）」「おすすめ（affiliates）」の4種類に分けました。活動にはプラットフォーム名、紹介文、URL、並び順を持たせています。

デザインの考え方

デザインのルールはDESIGN.mdという1つのファイルにまとめました。

  • 配色：紙の余白と青いインクを思わせる、オフホワイト・ネイビー・ブルー。端末の設定に合わせてダーク表示にも切り替わります
  • 書体：見出しはOutfit、本文はNoto Sans JP
  • 導線：「仕事の依頼」ボタンは全ページのヘッダーとフッターに置き、どこからでもたどれるようにしました
  • スマホ優先：幅320pxから横スクロールが出ないようにしています

トップページの演出

トップの見出し「つくる、書く、発信する。」は、インクの粒が集まって文字になる演出にしました。指やマウスで触れると粒が散り、また戻ってきます。

動きはこのヒーロー部分だけに集中させ、ほかのページは静かに保っています。動きを減らす設定の端末やJavaScriptが使えない環境では、普通の文字のまま表示されます。

活動の一覧は、名前を大きく並べるインデックス形式です。項目にカーソルを合わせると、横に紹介文が出てきます。

確認しながら進める

変更内容はCHANGELOG.mdに記録しています。スマホとPCの幅、ライト・ダーク表示、キーボード操作を確認しながら、少しずつ直してきました。

自分の活動を一か所に並べてみると、何をつくってきたのかが見えてきて、次にやりたいことも整理できました。これからは記事を少しずつ増やしながら、新しい作品ができるたびにここで紹介していきます。

お仕事のご相談は仕事の依頼ページからどうぞ。