blog
ブログ

【WEB制作者向け】1年間で読んだ記事の中で良かった記事15選!

こんにちは、コーダーの大野です!!

気がつけば2020年、特に12月はあっという間でしたね。
早いもので、私個人としても入社してから1年が経とうとしています。

入社時にはコーディングの「コ」の字も知らなかった僕が、
今ではコーディング大好きマンになっています。

どのくらい好きかというと、休みの日でもコーディングの事を考えています。
3連休とかだと、2日目の15時くらいから

「あ、そろそろコーディングしたいな」と思い始めます。

気持ち悪いですね。
自覚はあるので、悪口を言うのはそこまでにしてあげてください。

さて、話は変わりますが、みなさんは情報収集してますか?

僕は情報収集にはFeedlyとTwitterを使っています。
Feedlyに予めサイトを登録しておいて、

毎朝チェック→気になったものを後で読むリストに保存→時間があるときにじっくり読む

といったサイクルを回しています。

Twiiterでは業務時間外に家とかでフランクに情報収集してます。

 

なので今回は、入社してから1年間で読んで良かった記事を紹介しようと思います!!

 

1.「Amazonのプライムビデオが難しい」というおかんの言い分を聴いてみた|Tsutomu Sogitaninote

リテラシーが高い、あるいは自分はリテラシーが高い自信がある人は、触って失敗しながら学習していく傾向があります。しかしリテラシーが低い、自信がない人はそうは行動しません。分からないものを触って確かめようとは判断せず、分からないものには触らないでおこうと判断します。なぜなら、分からないものを触ることで、元に戻れなくなったり、面倒なことが発生したりすることを恐れるためです。

この文章にとてもハッとさせられました。
リテラシーが高くない人でも使いやすいサイトをもっと心がけねばいけないなと思いました。

ウチのオカンも「iPhoneが難しくて使えない」とずっと言っていたので、
まずはオカンにiPhoneの使い方を優しく教えるところから始めようと思います。

 

2. [ホットリンクのサイトリニューアル戦略資料を公開(8,000字の解説付)|公式ブログ|ホットリンク]

ここまで情報公開するの、すごいですよね、、、、
僕はデジバンのWEB制作のプロセスしか、経験していないので、
他のWEB制作会社さんの資料を見ることはとても刺激になりました。
かなり話題になった記事なので、読んだ方も多いかと思いますが、
まだ読んでない方はぜひ読んでみてください!

 

3. 年末年始鬼フィードバックのすべてをお話しします。|行武亜沙美|note

モザパンで話題になった前田デザイン室のまえださんの鬼フィードバックの全貌が公開されています。
デザインって最大公約数を見つけることなんですね。
っていう一文があるんですが、とあるWEBデザイナーの方も
言ってたなあ、、、とふと思いました。WEBデザイナーさんの共通認識なのでしょうか。

 

4. 個人的に実践しているWebデザインガイドラインまとめ|TAKnote5. 僕がCSSを書く際に必ず意識している CSSのコーディングルール30条|TAKnote

TwitterのつよつよWEBデザイナーでお馴染みのTakさん、
以前、ブログでも紹介させていただきました。
Takさんはおそらく僕よりコーディングが好きです。尊敬します。

CSSのコーディングルール30条は有料noteですが、
買って損なし大満足です。むしろ激安。shame.cssの考え方は取り入れたいですね。

デザインガイドラインの方は一通り全部読むだけでも面白いです。

 

6. Webデザイナーも意識してほしいSEOのポイント7. 若者の“Webサイト離れ”が進む――知っておきたいSEO最新動向と対策ポイント5 | 【レポート】Web担当者Forumミーティング 2019 Autumn | Web担当者Forum

Googleは検索結果の順位付け方法を常に改善し続けているが、最近の動向で最もインパクトがあるとされるのが、2018年に導入された「モバイルファーストインデックス(MFI)」である。PC(デスクトップ)向けに表示されるURLではなく、モバイル向けのURLをコンテンツ評価の対象とするというものだ。

WEB製作者ができるSEO対策を紹介してくれています。
モバイルファーストインデックスと高速化への対応は必須事項ですね。

 

8. モバイルではメニューを画面下に表示すべき理由9. ハンバーガーボタン 何で作ってる?僕なりの作り方を解説してみる。 - Shibajuku

お馴染みのハンバーガーメニューのアクセシビリティについての記事です。
あなたのハンバーガーメニューは本当にユーザーが使いやすい設計になっていますか?
ハンバーガーメニューは上か下か問題は未だに決着しないようですね、、、、
個人的には、「WEBサイトは上、アプリは下」が多いように感じます。

 

10. 今後LIGが制作するWebサイトは、Internet Explorerの対応をやめます。

WEB製作者ならみなさんご存知のLIGさんから衝撃の発表がありましたね。

いままでInternet Explorerユーザーの閲覧体験を可能な限り担保するために、進化し続ける技術とブラウザとのギャップを埋めるための対応をしてきました。しかしながら、そのことが作業工数の増加・表現の幅が狭まる、などの原因にもなっていたのです……。

Internet Explorerをサポート外とできるならば、制作費用を抑えたり、よりリッチな表現を採用することが可能になります。

製作者のみなさんなら
「他のブラウザではできるのに、IEだけ実現できない!!!キイィぃぃぃぃ!!!!」
とハンカチを噛んだ経験があるのではないでしょうか。

IEの対応に割いていた時間を使って表現の幅を広げようということですね。
どちらにしても攻めた判断ですね。

 

11.【保存版】Webフロントエンド基礎力(初心者向け) - Qiita

めちゃめちゃ詰まってます。

 

12. Web制作をぐっと効率化する「スタイルガイド」の作り方とは? - WPJ13. CSSとSassのコーディングスタイルガイドを作ってみた - Qiita

スタイルガイドとは

簡単に言うとルールの事です。プロジェクトに関わる全員が共通認識をもって制作を進めるためのサイトデザインにまつわるルールです。

スタイルガイドには、静的なデザインカンプだけでは伝えられない、動作にまつわる具体的な指示、さらには実用できるHTMLコードやCSSスタイルなどの指示が含まれます。また、ガイドは随時更新され、作業が進むにつれ追記や変更が行われるのが通常です。

Sassでコーディングしている為、変数でフォントサイズや色を最初に定義するのですが、
どうにか効率化できないかなと思ったんですが、まずスタイルガイドを作った方がコーディングしやすそうですね。
レイアウトやアニメーション含め、マークアップの設計の方に集中できそう。
2個目の記事は完全にコーダー向けの記事ですが、最近BEMからFLOCSSになったので参考にしています。

 

14. 2019年が終わるまでにデザイナーが絶対に読むべきnote50選|タクノリ・アダチ|note15. UXデザインを学ぶデザイナーが絶対に読むべきnote厳選20本|タクノリ・アダチ|note

お時間がある方はこちらも読んでみてください!

番外編

フロントエンドの情報収集について - Qiita

「できる人はインプットがすごい」 何でもできる社長を見ていて気づいたことを描いた漫画が参考になる - ねとらぼ

 

さいごに

 

ブックマークは定期的に整理しましょう。

facebookでも情報を発信しています

facebookをフォロー
ブログ一覧に戻る