省力でWebサイトの見た目を、プロ顔負けに！

こんにちは toiee Lab 西です。

先日、toiee Labのミワから、「Webサイトのデザイン」について質問攻めにあいました。

彼女は、友人からサイト作成を依頼され、作ったそうです。しかし、素人の域を出ないデザインにしかならず、相談してきました。

目標とする参考サイトを見つけていたので、そのサイトを真似ることから、始めようと彼女に伝えました。

真似るためには、「ブラウザの「要素の検証」という機能を使って、CSSを編集すると簡単だよ」と伝えました。

すると、彼女は夢中になって作業に没頭し、あっという間にサイトを作り上げ、納品していました。納品したサイトは、依頼主からも大好評だったそうです。（納品したサイトを見た別の友人からも、サイト作成を依頼されたそうです）

今日は「省力でWebサイトの見た目を見違えさせる方法」についてお伝えします。

サイトを作る時に、かなり役立つ知識です。

「サイト作成をしている」「興味がある」という方は、ぜひご覧ください。

真似してみよう

早速、要素の検証の使い方を伝えていきます。

ここでは、「Google Chrome」というブラウザを使って、説明していきます。参考サイトは、カメラジを使います。

以下の画像のように見出しに下線をつけてみましょう。

まずは、Google Chromeで参考にしたいサイト開いてください。そして、そのサイトの画面上で、右クリック（Macの方は、二本指でタップ）を押してください。

その後、「検証」を選択してください。

そして、四角と矢印のアイコンをクリックしてください。

次は、真似したい見出し部分にマウスを合わせてみましょう。すると、見出しの周りが青や緑、オレンジの色に変わるので、クリックしましょう。

以下の画像のように、 <h2 class="has-text-align-center section-title">私にとってのカメラジ</h2> が選択できていれば成功です。

次は、画面の右下に注目してください。ここが見出しに設定されているCSSです。

この部分を全て選択して、コピーしましょう。

あとは、これをあなたのWordPressにコピーして、貼り付けるだけです。貼り付けると、このサイトと同じ見出しのデザインを実装できます。

WordPressに反映させてみよう

上記でコピーしたCSSをあなたのWebサイトに反映させていきましょう。

まずは、WordPressにログインして、外観 > カスタマイズ を選択してください。

次に、「追加CSS」をクリックします。

そして、.test {}と入力して、{}の間に、先程のコピーしたCSSを貼り付けます。以下のようなコードになります。

.test {
	border-bottom: 4px solid #000;
    display: inline-block;
    padding-bottom: 8px;
    letter-spacing: 4px;
    margin-left: 5px;
    font-size: 2.5rem;
}

上記のコードが入力できたら、公開をクリックしましょう。

最後に、どのページでも構わないので、見出しがあるページの編集画面を開いてください。

そして、「見出し」ブロックをクリックして、画面右側を下までスクロールして、「高度な設定」をクリックしてください。

「追加 CSS クラス」という項目があるので、そこに「test」と入力して、更新をクリックしましょう。

実際のサイトを見てみると、以下のように見出しに下線がついています。

簡単に見出しのデザインを真似ることができました。あとは、見出し以外の部分も同様に真似ていくと、デザインを素人からプロのステージに押し上げることができます。

もっと深く学びたいなら、亀田の動画を！

まずは、上記のことを試して感動して、遊んでみてください。いろいろと試すうちに、必ず壁にぶつかります。どうしてもHTML、CSSの理解が必要になります。私は、そうなりました。

もし、あなたも壁にぶつかったら以下の亀田の動画をみてください。

HTML、CSSのことについて、本当に分かりやすく解説されていて、絶対理解できると思います。身内びいきではなく、亀田のHTML、CSSの教え方は、本当に上手だと思います。

理解が進み、壁を突破できるはずです。

ビデオはこちら

※上記のURLをクリックすると、ログイン後、動画が表示されます。無料登録がまだの方は、こちらから登録をお願いします

見た目にこだわろう

最近は、Webサイト作成サービスが進化して、誰でも簡単にサイトを持てるようになりました。これについては、説明の必要がないほどに、周知の事実だと思います。

一方で、サイトは誰でも簡単に持てるようになった反面、似たような、個性のないデザインのサイトが世の中に溢れているという側面もあります。

サイトのデザイン（主に見た目の部分）を頑張っても、ビジネスの成果に直結する可能性は低いかもしれません。

ですが、人がそのサービス、会社に愛着を持つには、デザインは必要だと思います。ありふれた無味乾燥なものではなく、デザインによって、人格を与えることが必要なんだと思います。

今、私はデザインをそのように考えていて、とっても楽しいです。やりがいがある仕事だと感じています。

HTML・CSSを使えるようになると、楽しいデザインの世界が開かれます。ぜひ、興味を持った方は、この機会に学んでみてください。