警察官を退職し、クオートワークスさんでWebデザイン勉強中のkinomiです。

今回のnoteでは、クオートワークスさんのブログ記事作成の経緯と学んだことについて記録していきます🌸
OGP画像については量が膨大なのでまた別の機会に、、

この記事を担当させていただきました！

Web制作会社についてほとんど知識がなかったため、このまとめ記事を作成したことで良い会社や実績がたくさん知れてめっちゃ勉強になりました、、

さらにデザイン要素についても多くのことを教えていただけたので記録していきます！

記事の特徴さらっと紹介👇🏻

・優良デザインのみ取り扱うメディアの掲載数でweb制作会社19社をまとめている。
→主観ではなく統計をとっているので信頼感◎

・「ギャラリーサイトで見たことあるわー」というサイトの制作元が会社別に見れる

・東京中心のデザインがかっこいい制作会社さんの実績、SNS、インタビューが見れる（今回の趣旨とずれてしまい、ご紹介できていない制作会社さんもたくさんあります💦）

・サイトのレビューもあり！（私主観）

おすすめのWeb制作会社のまとめ記事は他でも見たことがあるけど、「根拠を記載している記事は少ない」とムラマツさんが着目。

「根拠のあるおすすめの制作会社まとめ記事作ろ！」というところから記事の作成が始まりました。

また、私達デザイン初学者にとっても有益情報たっぷりです！
イケイケの制作会社さんと、素敵なサイトがいっぱいです🥰

まだブログ記事を読んでいない方は、ぜひ読んでみてくださいね！
(記事もOGP画像もムラマツさん達のお時間を頂き、修正を重ねて出来上がっています。読んでもらえたら皆が嬉しい🥹)

読んでいない方はこちらから読んで頂けます👍

4つのメディアを元に調査開始

調査元のメディアは、webデザインに精通された方々のまとめ記事やサイトです。

今回の記事のポイントは、単純にデザインに強い制作会社さんをまとめるのではなく、メディア掲載実績を根拠にすることです。

ということで、こちらのメディアに掲載されている実績のクレジットを確認し、集計する作業から始めました。

メディアに載っているものだけでなく、念のため制作会社さんの企業サイトの実績やXを確認して相違がないようにしました。
（が、間違いもあり一部訂正しています。申し訳ございません、、そのほか間違いがあればすぐに訂正させていただきます🥹大変お手数ですが、私かクオートワークスさんまでご連絡をお願い致します）

構成を考える

最初に思いついたのは、以下の2点です。

1.調査対象となったメディアについての紹介
記事の信頼性を高めるためにも、これらのメディアがどれくらい信頼できるのか内容を要約して書き出しました。

2.制作会社について紹介
読者の方に、各社の特徴がよく伝わるような紹介文にしよう！と思い、会社の設立年や代表者のプロフィールなど、できる限り詳細な情報を集めようと試みました。

ほかのブログ記事も参考にしました。
管理は全てNotionで行いました🗒️

ブログ記事を書き始める！でも、方向性がブレていた

構成が決まったら、いよいよ記事の執筆に取り掛かりました。
しかし、書き進めていくうちに、なんだか方向性がブレているような気がしてきました。

方向性が定まっていない

・タイトルで強調したいワードが入れられていない。優先順位はなにか考える。

・調査対象のメディアや制作会社の紹介に要らない情報が多い。肝心の「web制作会社の比較」という本来の目的からずれてしまっている。

文章や写真のレイアウト

近接
・同じグループがまとまっていない　

整列
・左揃えや右揃えなどバラバラ
・縦に並んだものがずれている

対比
・テキストの大きさを変えたり、マーカーを引くなどstrongポイントを正しく使えていない

反復
・セクションごとデザイン、余白やテキストの大きさなど、繰り返すもののルールがない
・他のクオートワークスさんのブログ記事とレイアウトやコンポーネントを合わせられていない。参考👇🏻

・①や、記号(✩など)や2バイト文字使わない
→文字化けしたり数字として認識されない可能性がある。参考👇🏻

・文章が定型的になりすぎ。自分この記事の読者だとして「面白い」「読み進めたい」と思えるか？客観的な視線で作る。
→こういうものがセオリーかな？みたいな記事では読んでいただく方には届かない。自分で読みたい記事にする。

まとめると「方向性」と「機能性」のツメが甘い

◼︎1番知ってほしい情報はなにか？
◼︎デザインは見た目と機能性の両立が必要

ムラマツさんからフィードバックをいただき、足りていないことを見直し、一度書いた原稿や写真も全て差し替えました。

ここで、作業に入る前に準備を入念にしないと作業時間が無駄になることがよーくわかりました…

参考👇🏻

反省している私のラジオ👇🏻

フィードバックを踏まえて構成から考え直した

反省点を踏まえて、記事の改善に取り組みました。

タイトルと文章構成の改善で、読者に響く記事を目指す

・ タイトルを変更。
「独自調査！メディア注目のWeb制作会社19選【東京中心2024年版】」として、記事の内容がより伝わりやすいタイトルに。

・各Web制作会社の紹介文はシンプルに引用し、メディア掲載されていたり最新の実績に絞ってコンパクトにまとめた。

デザインの統一感を大切にして、読みやすさを高める

文章や写真のレイアウトを工夫し、読者にとって見やすく、情報を理解しやすいデザインを心がけました。

近接
関連する情報をグループ化し、まとめて配置。

整列
左揃えを基本とし、縦に並ぶ要素の位置がずれないように調整。

反復
セクションごとに余白やテキストの大きさなどのルールを設定し、統一感を持たせた。また、他のブログ記事とデザインを合わせることで、サイト全体の一貫性を保つ。

読者目線でわかりやすく伝える

冒頭の文書などいわゆる営業感が出ないように、読者になった気持ちで「わかる！あるある！知りたい！」と思うような、正直でシンプルな文章を心掛けた。

いざ完成し公開！ブログ記事作成で学んだこと

たくさん反響をいただき大変恐縮です。
ムラマツさんのアドバイスがないと全く完成しなかった記事です。

今回の記事作成を通じて、以下のことを学びました。

方向性の決定の重要性

時間は有限。
時間を無駄にしないためにも競合の調査、優先順位を考える、コンテンツとデザインの方向性をしっかり固めていくことが大切だと身に染みて学びました。(フィードバックの繰り返しで、結果たくさん作り直しました🥹)

読者にとって価値のある情報を提供する

タイトルや文章構成を工夫し、読者が求める情報を的確に伝えることが大切だと感じました。

デザインの一貫性が読みやすさを高める

レイアウトやデザインのルールを守ることで、読者は情報を理解しやすくなるんだと実感しました。

やさしい言葉で伝える

難しい用語や長い文章は避け、読者が理解しやすいやさしい言葉で伝えることが重要だと気づきました。

機能と見た目は両立させることが原則

ただ「見栄えがいいから」という理由ではなく、
なぜここに強調が必要なのか？
見やすくするにはどうすれば良いか？

わかっていたつもりでも全然できていなくて。

ユーザビリティを考えて制作することの大切さについて気づきました。

ほかには、イケイケなWebサイトと制作会社さんをたくさん知ることができたので、少し目を鍛えられたかと思います！
今後も一歩ずつ成長していけるよう、頑張ります🔥
今回の記事を読んでくださったすべての皆様、ありがとうございました！

またね～。kinomi