tokikai Webポータルの要点｜仕様へのこだわりポイントまとめ

約1か月・約200時間で積み上げたtokikai Webポータル改修の学びを、
仕様へのこだわりを中心に要点のみで整理しました。

作り直しの判断から、思い通りにいかない壁との向き合い方、無理なく続けるための工夫まで、
舞台裏の試行錯誤を追体験できるようにまとめています。

動画での解説や関連作品はYouTubeチャンネル「時の行き交い - ソニリア」で公開中です。

【解説動画】 https://youtu.be/gbrJkFzmdFI
【Youtubeチャンネル】 https://www.youtube.com/@SoniriaYT/featured

この資料の転載・二次配布は個別の許諾を行っていません。引用は出典明記のうえ必要最小限にてお願いします。

#WebDesign #Howto #Portfolio

Transcript

1. tokikai Webポータル仕様 - こだわりポイントまとめ -
2. 今回の流れ 全体像と話す順番 動機・判断 作る苦労 続ける工夫 まとめ 2
3. 数字で見る「tokikai」 短期集中で積み上げた全量 期間 作業時間 規模 約1か月 約200時間 記述2.5万行 8/8〜9/13 集中投下 ＋画像78件分 3
4. 改修に至るきっかけ 背景 「技術」発信したかった 判断 増やす前にまず整理 ブログ ・現状の流用ではやや役不足 ・新規に増やせる下地でない ・そもそも束ねられていない 創作物 → 集約 世界観 4
5. 運用負担から見直し 残す所は残し変える所は変えた 裏側はそのまま 足回りは堅牢に 見える部分は刷新 ・本番の直書き運用を見直し ・将来の更新箇所は切り出し 見える部分は全改修 ・ページ構成からの再設計 ・スマホ画面も専用で設計 5
6. つなげる作業の重さ 情報アーキテクチャの再設計が核心 点在を辿れる形に 着想 → 深化 → 発展 ✓ 見通せる形に収めた ・「開発」より「配置整理」 ・ある関係を見える形にした 役割を壊さず収める ・発信、展示、世界観を両立 ・多すぎず少なすぎず整えた 6
7. ファーストビューへの注力 使用イラスト含めて1からデザイン 目指した見た目 左から右へ流して戻す ✓ 時間変化での印象づけ 視覚的な印象に残る表現へ こだわりポイント アニメーションでの視線誘導 7
8. 一から選び揃えた部品 見えない所ほどかかった調整 並行したデザイン選定 → ・ボタン単位で吟味して判断 ・視覚的な色味の調和を意識 → 断片化の修正・統一 → ・ページ単位で見た目の整え ・共通化で記述もシンプルに 8
9. 力ずくで仕上げた画面幅たち 配置案ないまま手探りで対応 ・作ったワイヤーフレームはPC版のみ ・レスポンシブ対応はPC完成後に着手 ・見て判断し直す繰り返しで形にした 390px 437px 768px 834px 1024px 1280px 幅ごとに配置と改行文言を目視調整 9
10. 期待通りに動かない「ブログ」 人力で確かめた修正の連続 ◆相互に干渉 技術録 活動記 ↔ 自由帳 独自の画面内構成 ・縦並び3系統による分割 ・動かすと他が乱れるバグ 更にスマホ版が別仕様 ・配置は縦積みで作り直し ・確認項目は二重に増加 10
11. 形に残らない負荷 3つの頭の切り替えの鈍さ 開発作業 画像制作 言語表現 仕組みへの抽象化 デザインの感性 具体に降ろす作業 場所・環境を変えて頭を整理 11
12. 壊さない進め方への意識 揺り戻し抑えた判断 「目的」に立ち返る ・目で確かめて採用する ・方向性は自分の判断で 判断 ↘ ↙ 実行 ← 主権は自分側に持つ 更新 壊れにくい工夫 ・環境を分けて手元での確認 ・累計で600超の試験自動化 12
13. 完璧を待たず進む心持ち 全体を見て切り上げ戻って直す まず一度出す判断 ・完璧より前進を選び進めた ・俯瞰して優先対象を決めた 局所最適に沈まない 出してから直す ・戻って直す前提で切り上げ ・育った目で一気に仕上げた 13
14. まとめ 情報を、届く形に 苦労は積み重ねて力に 時の行き交いの輪郭化 一人でも多くに届いたらうれしい 14
15. おしまい