ウミ
クル

このブログを作成してみた感想

webデザインの勉強を初めたころから、アウトプットの場としてブログを書こうと考えていました。
Udemyで勉強している時もブログの記事になるようなネタを残し、一部は手っ取り早くQiitaに記事を投稿していたので、 ブログ作りにはそんなに時間がかからないだろう、と簡単に考えていたのです。
ところがいざブログを作ろうとすると、あれこれ悩んで手が動きません。
記事作成、サイト構成、ページレイアウト、コード設計、ブログ名、ロゴ、、、 一つに取り掛かると違うことが気になり、結局どれも進まずに時間が過ぎていく。まさに焦りの境地です。
そんな時に 「コーディングを助けるためにデザイナーができること」 という記事に遭遇。
想像力を働かせて次の工程に配慮しつつ、一つ一つの仕事を丁寧に進めることが書かれています。 web制作にとどまらず、全ての仕事に対して言えることかもしれないな、と深く納得しました。
一旦落ち着いて、自分の中にデザイナーさんとコーダーさんを置き、役割を分担してみる。 実務のように作業を切り分け、それぞれの関係性をみて計画を立ててみます。 すると分担がごちゃ混ぜの状態で、あれもこれも気になって全てが中途半端な状態から、ようやく抜け出すことが出来ました ! その後は、次工程に配慮しながら一つ一つ丁寧に、を意識するとスムーズに進みました。

このページでは、ブログ作成にあたって特に大変だと感じた点と、ブログを作って本当に良かったと思える点を書き出してみたいと思います。

ブログ作成で大変だった点

記事作成
世に公開される記事を書くって責任重大ですよね。なので調べます。よって進みません。
ようやく伝えたい内容の理解が深まってきても、今度は自分の文章に納得がいかずに、また止まる。 予想以上に時間がかかりましたが、「100点を目指さず、70点でGoでいい」という話を聞き、良しとしました。
ブログを公開した後に 「ビジネスに役立つ上手な文章の書き方11のコツ」 という記事に出会いました。 よくある文章に潜む、伝わりにくいポイントについて、秀逸な例文とともに詳しく解説している記事です。 伝わりやすくするための修正方法も丁寧に、具体的に書かれています。
今後はこの記事を参考にしながら、文章の練習をしていきたいと思います。

コード設計
クラス名はBEMの命名規則に則り、ファイルはSass the 7-1 patternに沿って振り分けをしたつもりではありますが、これがまた難しかったです。
コード設計をものにするには時間がかかりそうなので、今後練習を重ねて少しずつ理解を深めたいです。

レスポンシブ対応
デスクトップ版で完成したコードをモバイル版にも適用させていく中で、そもそもここはgridではなくflexだったのではという箇所がいくつか。。 モバイル用に修正したつもりがデスクトップ版にも影響が。。ということで画面を伸ばして縮めて、伸ばして縮めて。。頭がこんがらがりました。
また、どうしてもgridを使いたいところには機能クエリの@supportsでflexで代用としたのですが、gridの代用がflexでいいのか、どうせならFloatにした方がいいのでは。。 などなど、やはり独学では限界があると感じた箇所がいくつかあります。

ブラウザ対応
実際にIEでこのブログを見るケースはないと思いますが、それでも勉強の一環として主要ブラウザの対応をしました(Chrome/ Safari/ Firefox/ Edge/ IE/ iOS/ Android)。
ブラウザチェックをしてみて、まず驚いたことはローカルサーバー(VScode:Live Server)のChrome検証ツールでの確認があてにならない場合があることです。
ローカルサーバーでは問題なく見えていた背景画像が、iPhone実機(iOS Chrome)では正しく表示されませんでした。 (これはbackground-attachment: fixed; background-size: cover;を同時に設定するとiOSでは機能しないためで、 position: fixed;とした擬似要素::beforeに背景画像を置くことで解消しました。)
また、CSSだけでなくJavaScriptにもブラウザの互換性に注意しないといけないことに驚きました。ES6で導入されたアロー関数やfor...ofなどのメソッドがIEではエラーになります。
OSが変わればレンダリングエンジンも変わるので、表示のされ方に違いがでる可能性があるし、また、更新が終了しているIEではES6以降のメソッドが使えないことも、今では理解できるようになりましたが、 実際に体験してみないと気がつかないことが沢山ありました。

覚えることが多い !
覚えたらもっと良いサイトができるのにと感じたり、知れば知るほどweb沼が深くて焦ってしまう意味で大変な点です。
JavaScriptは全体像が掴めないほど大きく感じられるし、CSSもどんどん新しいプロパティが出てきます。WordPressは使えると就職に有利になりそうだし、、、など、 勉強を進めるとその世界が見えてきて、深すぎて怖いというのが今の気持ちですが、少しずつ前に進んでいくしかないですね。

ブログを作って良かったと思う点

サイト制作の一通りの作業を体験できる
情報設計、コンテンツ作成、デザイン、コーディング、サーバーアップ、更新作業、と一通りの作業を実際に体験することで、サイト制作への理解が深まりました。 問題が発生した時の調査方法、ググり方も上達したと思います。

実験の場として利用できる
新しく覚えたCSSのプロパティや、JavaScriptの動きの確認を実験的に試す場としても利用できるので、自分のブログを作って良かったなと思います。