かっこいいデザインのサイト

ワードプレスでかっこいいデザインのサイトを作る方法

私のサイトは見ての通りデザインに凝っているわけではありません。しかし、かっこいいデザインのサイトへの「あこがれ」はあります。例えば、

博報堂のサイト

こちらは博報堂さんのサイトです。シンプルですがレイアウトや細部のデザインにこだわりを感じます。このサイトもワードプレスで制作されています。

ビジネスに用いるサイトの場合、サイトのデザインが会社のイメージに影響しますので、サイトのデザインについても気を配る必要があります。

そこで、かっこいいデザインのサイトを作る方法を考察しました。

目次

1.クオリティの高い写真を貼る

なるべく費用をかけずにワードプレスでサイトを制作する場合、無料のテーマを使用することになります。

無料のテーマで見栄えを良くしようと思ったら、写真(画像)の力を借りる必要があります。サイトにクオリティの高い写真を貼ることで、かっこいい雰囲気やおしゃれな雰囲気がでると思います。

ネット上にはクオリティの高い写真がそこら中にころがっていますが、著作権の問題があるので、勝手に使用することはできません。

(1)自分で撮影

自分で撮影した写真であれば著作権の問題が生じません。

写真を撮影するのが好きで、プロ並みの技術があるのでしたら、自分で撮影した写真を使ってサイトの雰囲気を作っていくことができます。

インスタグラムでは多くの方がクオリティの高い写真を投稿しています。コツさえつかめればスマホでもクオリティの高い写真を撮影できるようです。

スマホで良い写真を撮るコツってなに?プロが教えるスマホカメラの使い方

(2)フリー素材を使用

クオリティの高い写真を自分で撮影する自信がない場合は、フリー素材(無料で利用することができる写真)を使用することをおすすめです。

ネット上にはフリー素材を提供しているサイトが数多く存在します。

こちらは海外のフリー素材を提供しているサイト(Unsplash)です。クオリティの高い写真がいっぱいあります。無料で利用でき、商用利用も可能です。

実は、本ブログのヘッダー画像もUnsplashからダウンロードした画像を使用しています。

Unsplash

その他にもフリー素材を提供しているサイトはあります。写真ばかりではなくイラストを提供しているサイトもありますが、ご紹介しておきます。

かわいいフリー素材集 いらすとや

フリー素材のぱくたそ

写真素材なら「写真AC」

無料イラストなら「イラストAC」

これらは日本のフリー素材を提供しているサイトです。利用規約をご確認の上、ご利用してみてください。

なお、無料のテーマの中でも次のテーマは多くの方が利用している人気のテーマのようです。

  • Cocoon(コクーン)
  • Luxeritas(ルクセリタス)
  • Xeory Extension(セオリー エクステンション)

2.CSSを編集

サイトのレイアウトや細部のデザインをカスタマイズしようとすれば、CSS(Cascading Style Sheets)を編集する必要があります。

CSSはHTML要素をスタイリングするために使用されています。CSSを編集することで、ワードプレスのテーマ内の外観を変更することができます。

HTMLはサイトの外観の基礎を構築するために使用され、CSSはそれをより細かにスタイリングするために使用されます。

CSSはワードプレスのダッシュボードからも編集することができます。

ダッシュボードの「外観」→「テーマエディター」をクリックすると、次のような画面が表示されます。

テーマエディター

「注意!WordPressダッシュボードでテーマを直接編集しているようです。直接編集しないようお勧めします。・・・」

このような警告文が表示されます。素人がCSSをいじるのはテーマが大きく崩れてしまいそうで怖いです。

正直、私はCSSを学んでいないのでCSSを解説することができません。

Web開発やWebデザイナーを志す方、興味がある方は、HTML、CSS、JavaScript、PHPを学んでください。

3.有料のテーマを使用

ワードプレスでは、無料のテーマが数多く用意されていますので、自分の好みのレイアウトやデザインのテーマを選ぶことができます。

また、ワードプレスでは、CSSを編集することなく、サイトの外観をある程度カスタマイズすることができます。例えば、サイドバーやフッターにメニューやカテゴリー、アーカイブ、プロフィールなどを表示したり、反対に消去したりすることができます。

しかし、無料のテーマにも問題(というか気になること)があります。

無料のテーマのフッターには、「Proudly Powered by WordPress」という表記や、テーマを作成した作成者のクレジット(著作権者・原作者などの名前)の表記がされています。

ワードプレスの公式テーマには「Proudly Powered by WordPress」と表記されているだけです。この表記は「Remove “Powered by WordPress”」というプラグインをインストールして有効化することで簡単に削除(消去)することができます。

一方、ワードプレスの公式テーマ以外のテーマは、テーマ作成者のクレジットが表記されていることがほとんどです。このテーマ作成者のクレジットは簡単に削除することができません。

WordPressのクレジットやテーマ名を非表示または削除する方法

上のサイトでは、テーマのクレジット表記を削除する方法が記載されています。この解説のように、クレジット表記を削除するためには、ワードプレスのダッシュボードの「外観」→「テーマエディター」からfooter.phpを編集する必要があるようです。

これもCSSの編集と同様、本当に正しくできているか判断するのが難しく、素人には少し怖いです。

クレジットが表記されないようにする簡単な方法は、有料のテーマを使用することです。

ワードプレスの公式テーマ以外のテーマは無料版と有料版があり、無料版はクレジットを簡単に削除できないようになっていますが、有料版はクレジットを簡単に削除できるようになっています(またはクレジットが表記されない)。

有料のテーマはデザインも当然優れています。有料のテーマでは細部に技を使っているので、他の方のサイトやブログを見ただけで、なんとなく有料のテーマを使用しているか無料のテーマを使用しているかがわかってしまいます。

また、有料のテーマはさまざまな機能を備えていますので、デザインだけでなく、目当ての機能を備えたテーマを使うことができるのも、有料のテーマを使用するメリットです。

有料のテーマとしては、例えばこんなものがあります。

  • JIN(ジン)
  • SANGO(サンゴ)
  • AFFINGER5(アフィンガー5)
  • SWELL(スウェル)
  • 賢威(ケンイ)
  • THE THOR(ザ・トール)

これらのテーマは名前をよく聞くテーマです。多くの人が利用しているテーマですので、設定の仕方など、様々な情報を入手しやすいと思います。

4.Web制作会社に依頼

手間をなるべくかけたくないと思われる場合は、プロにまかせるしかありません。

費用はかかってしまいますが、Web制作会社に依頼すれば、好みのデザインのサイトを制作してくれます。

費用に関してはピンキリです。数万円から100万円を超える場合もあります。

Web制作会社の多くは、ワードプレスでサイトを作成してくれますので、サイトの立ち上げはWeb制作会社に依頼し、その後のブログの更新やコンテンツの追加などはご自身で行うことができます。

5.まとめ

最後に上記の方法の「デザインのかっこよさ」と「難易度」と「費用」をまとめました。

デザイン難易度費用
無料テーマ+写真★★
CSSの編集★~★★★★★★★★★★
有料テーマの使用★★★~★★★★★★★★★
Web制作会社に依頼★★★~★★★★★★★★~★★★★★
まとめ

カテゴリー「デザイン」の記事一覧

カテゴリー「情報発信」の記事一覧