魅力的なWebサイトを作ろう！Webサイト制作の参考にしたい記事まとめ

簡単60秒！あなたにピッタリの案件が届く 無料会員登録

Webサイトを作るとき、「どういったデザインにしよう」「どうすれば集客できるかな」など悩みは尽きないもの。初めてWebサイトを作るとなると、何から取り組めばいいか分からないという方も多いでしょう。
こちらでは、Webサイト制作のヒントとなる記事を紹介しています。Webサイト制作でお困りの方、この記事を読むとお悩み解決につながるかもしれませんよ♪

※尚、こちらはPR記事ではございません。編集部が独自にテーマを選び、サイト担当者に許可を頂いて作成している記事です。また、記載中の内容は、執筆時の情報になります。

意外と盲点。「改行のデザイン」でスマホサイトが大幅にレベルアップ！（BUROKI design）

PCだけではなく、スマホやタブレットでもWebサイトを見る機会が多くなった昨今、モニターのサイズに最適化された「レスポンシブデザイン」でサイトを制作することはWebデザイナーにとって必須になってきました。
今回ご紹介するブログの筆者BUROKIさんは、フリーランスのデザイナー。ベンチャー企業で活躍した後、現在は『BUROKI design』として多くのWebサイト制作やロゴデザインなどを手掛けています。

BUROKIさんのブログ記事《意外と盲点。「改行のデザイン」でスマホサイトが大幅にレベルアップ！》では、わかりやすいデザインだけでなく「文章」、つまりテキストに着目。レスポンシブデザインで制作されたサイトであっても、テキストの最適化ができていないWebサイトは多く、ユーザーに違和感を与えてしまうのだそうです。
BUROKIさんのこちらの記事では、「スマホの改行デザインの考え方」を丁寧に解説。PCとスマホでの異なる表示を意識したテキストのコーディングや、文字数によるテキストの調整など、BUROKIさん自身が実際に行っているテクニックを画像を用いてわかりやすく解説されています。

今やモニターのサイズもさまざまなものが出ており、一概に何が最適であるかとはいえません。しかし、「違和感なく内容にすっと入れるデザインこそが優れたデザイン」とBUROKIさんのブログでは最後に締めくくられています。こちらの記事を参考にページ全体のデザインだけではなく、文章など細かな部分にまで気をつかい、より良いWebサイト制作を目指してみてはいかがでしょうか？

■意外と盲点。「改行のデザイン」でスマホサイトが大幅にレベルアップ！　記事詳細
https://www.buroki-design.com/blog/design_thing/designthing0100/

良いデザインのWebサイトが果たして良いWebサイトなのか考えてみる。（Web屋フジサワ）

《良いデザインのWebサイトが果たして良いWebサイトなのか考えてみる。》というこちらの記事は、『Web屋フジサワ』の屋号で2019年にフリーランスとして開業し、Web制作事業を行っているフジサワさんが発信しているもの。
見た目が良いデザインが良いサイトとは言えないのでは…と、分業制のスタイルが一般的になりつつあるWeb制作現場の現状を交えつつ考察しています。
一般的にみて良いサイトを作るのではなく、「良いデサインのサイト」を制作するためにはどんなことに着目するべきか…記事を読み進めながら一緒に考えてみませんか？

『Web屋フジサワ』で手がけている事業は、主に「Web制作」と「似顔絵コンテンツ」の2つです。
Web制作ではディレクションやデザイン、コーディングをはじめ、CMS構築、ECサイト構築など、サイト規模を問わず受託しています。
似顔絵コンテンツ事業では、完全オリジナルの似顔絵を作成。ウェルカムボードや名刺など、制作から印刷まで仕上げています。そのほかに、動画制作（撮影と編集）やECショップ用の商品撮影などにも対応するなど、事業の幅を拡大中です。
フジサワさんがフリーランスになった日から今日までに書き綴られたほかの記事もぜひ参考にしてみてくださいね。

■良いデザインのWebサイトが果たして良いWebサイトなのか考えてみる。　記事詳細
https://webya.hallyrun.com/note/136/

alt属性とは？SEO対策に効果的な書き方【2021年最新版】（株式会社アクセスジャパン）

Webサイト運営に携わったことがある方は、一度は［alt属性（オルト属性）］という言葉を見聞きしたことがあると思います。

クライアントのWebビジネスをワンストップで支援している株式会社アクセスジャパン。同社が提供するサービスの一つに、定額型のホームページ制作サービス［ビズサイ］があります。
この記事では、ビズサイのお役立ちコラム内にある《alt属性とは？SEO対策に効果的な書き方【2021年最新版】》について紹介します。

alt属性は「検索エンジンに画像が何を表しているのかを伝える」ためのものですが、他にも以下のような役割も果たしてくれることから、ユーザーにも分かりやすいコンテンツづくりに役立つとされています。
・検索エンジンの画像処理に役立つ
・画像が表示されない場合にテキストが表示される
・視覚障がい者への補助テキストになる

また、alt属性と似た機能に［title属性（タイトル属性）］がありますが、title属性はあくまでも補助説明の役割を果たすものなので、SEO効果を上げたい場合はalt属性を活用する方が良いそうです。

alt属性の書き方にはコツがあり、ちょっとしたコツを掴むとSEO対策に効果的なalt属性を書けるようになります。詳しい記述の仕方については、コラムを読んで確認してくださいね。

ビズサイのお役立ちコラムでは、SEO対策はもちろんWordPressやホームページ作成ソフト、マーケティングなど、Webサイト制作に役立つさまざまな情報を発信しています。Webサイト制作や集客などで困っている方、ぜひビズサイのお役立ちコラムを読んでみませんか？

■alt属性とは？SEO対策に効果的な書き方【2021年最新版】　記事詳細
https://www.webdeki.com/column/819/

Webサイトデザインの為の「配色」の基本（株式会社みやあじよ）

Webサイトをデザインする上で、「配色」に頭を抱えるデザイナーは多いようです。配色はサイトのイメージを印象付けるだけでなく、見る人の行動や感情にも影響を与えることができるなど、Webサイト制作において重要な役割を果たします。

今回取り上げるのは、そんな配色に関するブログ記事《Webサイトデザインの為の「配色」の基本》です。こちらのブログは、Web制作会社である株式会社みやあじよが発信しており、企業情報はもちろん、Web制作などに役立つさまさまなチップスが記載されています。記事によると、Webサイトの配色を決めるためには、効果的な配色パターンを知っておくことが大切なのだそうです。

その配色パターンとして最初に紹介されているのが「70：25：5の法則」。使う色は多くても3色までとし、ベースカラー70%・メインカラー25%・アクセントカラー5%で配色のバランスを取る法則です。これら3つの各要素の役割を理解し、この面積比になるように配色することでバランスの取れた仕上がりになると記事には書かれています。
さらに記事には、発色方法や色の種類、トーン（色調）についても詳しく解説。画像を用いて一つひとつ丁寧に紹介されています。

記事には「色はプロのデザイナーも苦戦している」との記載もあり、プロであっても最後の最後まで色が決まらず微調整を行うことがあるのだそう。だからこそ、記事で紹介されているような配色の基本を身につけることはとても重要なことなのです。こちらの記事を参考に配色を行いながら、良いデザインを目指してみるとよいでしょう。

■Webサイトデザインの為の「配色」の基本　記事詳細
https://myajo.net/tips/4452/

HTML/CSS で思ったとおりにレイアウトされないときの確認手順【初心者向け】（IchigiBlog）

HTML/CSSを書いているときに、「あれ、レイアウトが思ってたのと違う…」ということはありませんか？
頑張って書いたのに、意図しないレイアウトが表示されると困りますよね。特にプログラミング初心者の方や勉強中の方は、どこを変更すれば改善するかが分からず、心が折れてしまうこともあるかもしれません。
レイアウトが思うように表示されない場合、まずは落ち着いて自分の書いたHTMLを見直してみましょう。
この記事では、100名以上のプログラミング学習のメンター経験を持ついちぎさんのブログ『IchigiBlog』より、《HTML/CSS で思ったとおりにレイアウトされないときの確認手順【初心者向け】》という記事を紹介します。

いちぎさんは、まず以下の手順で確認することをおすすめしています。

1.全角スペースが含まれていないか確認する
プログラミング言語において、全角スペースはアルファベットや記号のように文字として認識されてしまいます。
全角スペースは見つけづらいですが、エディタの検索機能を使用したり、全角スペースを可視化したりなどの対策で簡単に探せるそうです。

2.HTMLの構文エラーが無いかチェックする
大幅なミスは目視でも気づきやすいですが、一文字だけのミスは目視で探すと大変です。チェックツールを使用すると、構文のミスを瞬時に探し出してくれます。

3.デベロッパーツールを活用する
デベロッパーツールはGoogle Chromeのブラウザ上で手軽に利用できるデバッグツールで、使いこなことで作業効率が大幅にアップするとのこと。Webエンジニアの必須ツールでもあるそうです。

記事では、全角スペースの見つけ方やデベロッパーツールの使い方、いちぎさんがオススメする構文チェックツールとその使い方を紹介しています。画像付きで分かりやすく説明されているので、詳しい内容が知りたい方はぜひ記事本文をチェックしてくださいね。

また、いちぎさんのブログでは、Ruby on Railsに関する記事を多く挙げられています。Railsでのエラー解決についてまとめられている記事もあるので、Railsを勉強中の方やRailsでお困りの方はぜひ参考にしてみてはいかがでしょうか？

■HTML/CSS で思ったとおりにレイアウトされないときの確認手順【初心者向け】　記事詳細
https://ichigick.com/html-css-fix-procedure/
■ブログトップページ
https://ichigick.com/

簡単60秒！あなたにピッタリの案件が届く 無料会員登録