みなさんこんにちは。
先日しもむらさんの「【Bootstrap入門】Bootstrapでレスポンシブなサイトを1時間で作る Bootstrap tutorial」動画を見て、自分はどれくらいで行けるかな？と挑戦したところ、結果5時間40分を叩き出して実力不足を痛感した朱夏です。
しもむらさんのyoutubeはこちら。
自分が作成したサイトはこちらになります。
まぁやってみて色々出来ることも増えたのでめっちゃ有益だったのですが、5倍以上は流石にかかり過ぎではないかと思っています。
どうしたらもっと早くコーディングできるかな？
何故、5時間以上もかかったんだろう？
何に時間がかかったか振り返ってみよう。
というわけで、反省会と題して作業の振り返りをやっていきます。
ざっくりとではなく、プロセスを細かく分けて洗い出してみたいと思います。
プロセスを分解
まず、今回のサイト作成作業を細かいプロセスに分解していきます。
- 開発環境作成
- ディレクトリ、ファイルの準備
- 画像素材の準備
- 参考資料準備（動画、公式ページ）
- コーディング
- ナビゲーション
- スライダー
- カラム表示
- Flex
- タブナビゲーション
- モーダル
- youtube埋め込み
- カード
- アコーディオン
- フォーム
- フッター
- プロフィール
- ポートフォリオリンク
- Twitter埋め込み
- 見直しと修正
こんなところでしょうか。
各要素についてよかった部分、悪かった部分を確認していきます。
開発環境作成
webサイト作成用のテンプレートとして、最低限必要なディレクトリ構成、ファイル構成を用意していたので、スタートしてすぐコードを書き始めることは出来た印象。
しかし、画像などの準備は順次必要になったらやっていく感じだったので何度もフリー画像のサイトと行ったり来たり・・・
また、しもむらさんのyoutube動画はもちろんのこと、Bootstrapの公式を開いておく程度の準備をしていました。
しもむらさんの動画は通勤中にさらっと見ていて、どんなものを実装するかをざっくり確認していたレベルです。
もう少し予習してから挑戦でも良かったかもしれません。
コーディング
ここからは、実装要素毎に行きます。
ナビゲーション
いつも使うBootstrapのナビゲーションバーなので、さっくり実装できました。
カラー変更程度なら殆ど手間取りません。
ここは特に時間がかかった印象はありませんね。
後半、要素を追加するごとにナビゲーションリンクを追加していったのでそこだけ手間だったかもです。
スライダー
スライダー自体の実装は3、4回目なのですぐだったのですが、使用する画像と画像の高さ合わせに試行錯誤して時間がかかってしまいました。
今回は唯一、スライダーの高さ固定でCSSを使用しています。
というわけで、スライダーは時間がかかった要素の1つです。
カラム表示
カラムを使って画像を3つ並べているだけですね。
レスポンシブ対応でスマホだと縦に並びます。
この部分は殆ど時間かからないはずだったのに、つい余分な要素を追加したくなってしまい時間がかかった次第です・・・
ツールチップの実装には追加でJavaScriptを書く必要があるのですが、それを忘れていて、気づくまで30分くらい時間ロスしました。
因みに、ツールチップというのは、マウスを合わせると出てくる吹き出しの事です。
Flex
ここでは一番大失敗した印象です。
実装したかったのは下の様な構成です（簡易イメージ）。
（PC）
文１｜写１
写２｜文２
（スマホ）
写１
文１
写２
文２
しもむらさんの動画ではこれを”flex-wrap-reverse”を使って実装していたのですが、何をとち狂ったのか”order”で実装できるのでは？と考え始めたのが地獄の始まりでした。
PC版の表示は問題なくできたのですが、レスポンシブで縦並びになってくれない事象が発生。
なんと、画面外の横幅にはみ出して折り返さない状態になってしまったのです。
結局”flex-wrap-reverse”で作り直して二度手間になるという失態です。
これは料理音痴の人と同じような失敗かも知れません。
独創的な味付けを目指して失敗するみたいな。
タブナビゲーション
ナビゲーションの亜種なのでそれ自体はそこまで難易度は高くなかったのですが、タブクリックで下部の表示を切り替えるところで若干手間取りました。
ここは初めての実装にしてはうまくいった方で、タブと中身の関連付けに多少手間取った程度です。
可もなく不可もなくといった感じでしょうか。
モーダル
ここは同じパターンを繰り返し書く部分なので、１つ作って複製すればすぐできます。
しかし、複製作ってから全体の表示バランスが気に入らなくて修正を加える度に、複製した全てのモーダルに修正をするというとても手間な作業は発生してしまいました。
youtube埋め込み
ここは特に何も語ることは無いですね。
youtubeの機能で埋め込みのコードを生成して、それを張り付けているだけですので。
カード
リンクカードについては、ほぼそのまま実装しています。
この辺で日付変わって焦り始めた記憶があります。
ここもまぁ、特に時間もかかっていないですね。
アコーディオン
アコーディオン機能で実装されたFAQです。
ここでの失敗は、アコーディオン機能内で関連付けに使われていたclass”accordion”を、ナビゲーションのリンクIDとして使用してしまっていた事でした。
これにより、想定していた動きをしてくれなくなったため、解決するまでまた２０分くらいのタイムロスでした。
フォーム
以前独学で作成したBootstrapのフォームがあったのでそれを実装させようとしたのですが、チェック機能を実装できていなかったので、結局作り直しをしました。
最初はなんとかチェック機能だけ移植出来ないか試行錯誤していたのですが、既にこの時点で２時過ぎだったこともあり断念しました。
フッター
以前作成した２作目のWordPressテーマから流用したのですぐ実装出来ました。
そこからポートフォリオのリンク、Twitterの埋め込みをして完成。
ここは特に躓くことは無かったです。
強いて言うならほぼコピペで終わってしまったので新しい学びが少なかったことですが、作業時間かかりすぎ問題からはずれていますね。
コーディングとしてはこんな感じです。
見直しと修正
ここに関しては後日公開前に手直ししているので、作成時間としては含まれていないですね。
ここも合計したら約６時間ほどになっていたかと思います。
各プロセスごとに振り返ってみました。
これらの良くなかった点から、反省点をまとめていきます。
反省点
各プロセスから、次回に活かすべき反省点を洗い出しました。
- 画像素材の準備不足
- 既知の問題を未解決（スライダーの高さ調整）
- 追加要素の実装でタイムロス
- 繰り返しパターン部分を複製後に修正をかけていた
- iPhoneの通知切り忘れ
実際の作業プロセスではありませんが、iPhoneの通知は作業中マジで邪魔でした（汗
通知を切っていたらもっと集中して作業に取り組めたはずです。
改善ポイント
書き出した反省点から、次回の課題としての改善ポイントを３つに絞って決めました。
- 事前準備はしっかりと(素材、ワイヤーフレーム、参考資料)
- 実装内容を事前に決める(あれこれ追加しない)
- iPhoneの通知を切る(重要)
次回はこれをベースに取り組んでいきます。
あとがき
一人反省会でした。
結局時間がかかっているのは技術不足な面を除けば、準備不足だったり、いきあたりばったりだったり、予想外の中断だったりするんですね。
今後の作業に活かせる基準を作り出せたので、やってよかったなと思います。
また近いうちに新しいサンプルサイトを作って公開します。
仕事の案件を受注出来るまではこうやって実績を作っていく感じですね。
今回はここまでです。
次回もよろしくお願いします。
