さゆ
2022.02.22

マークアップ計画とお弁当。

今朝は
珍しく小学生の娘と保育園の息子の
お弁当日が重なって

旦那のも合わせると3つ。

いつもより気合を入れて
エプロンをつけました。笑

昨日の夜に準備しておいた
ポテトサラダや小松菜のお浸し、メンチカツを
大きさも形も違う3つのお弁当に詰めている時

さゆ

あれ?これなんか
マークアップする時と思考回路が似ている・・・

さゆ

もうこれ完全に職業病やん

と思いつつ
同じ食材でもそれぞれのお弁当にピッタリ収まり
また食べやすいように工夫しながら詰めていく作業が

コーディングをする前にデザインデータを見ながら
マークアップ計画を立てる作業となんか似てない?!って事に気づいて

このことをブログに書こう!って
ニヤニヤしながらお弁当作りを頑張ってました。笑

具体的に、
その思考回路とはどんなものかって言うと

お弁当を作るとき意識すること

  • 形はどうかな
  • 大きさは?
  • お弁当の深さはどのくらいだっけな
  • 食べやすくするにはどうしたらいいかな

と、まずはお弁当を確認した上で
どこにおかずを詰めていくのか
収まりが良く
見栄えも美しく
食べやすさ
も考慮して無意識に考えています。

コーディングの時に意識すること

  • 画像やテキストはどんな配置になっているかな?
  • どこで区切るのがベストかな
  • 共通のデザインはないかな
  • レスポンシブになった時どんな動き方をするかな

と、デザイン全体を一度よく理解してから

class名を決めたり(お弁当箱的な)
中のテキストや画像(おかず的な)

をどのように詰めたら(cssで)デザイン通りに再現できるかを考えています。

コードを書く時間より
私の場合はマークアップ計画にかける時間の方が長いかも。

結果
今ではその方がコードが書きやすく作業自体が効率的になったww

【お弁当作り】と【マークアップ計画】

この言葉だけを並べて比べると
何のこっちゃ??って話だけど

こんなにも似ていることに気づけた事に
ちょっと嬉しくなる今朝の出来事でした。笑

さて
カタカタはじめよーっと。

全体をよく見て、計画を立てる!!