- Home
- 【遜色なし！】完全0円でどこまでできるかやってみた！WordPressレスポンシブデザインサイト。
【遜色なし！】完全0円でどこまでできるかやってみた！WordPressレスポンシブデザインサイト。
- 2014/10/17
- WordPress, クリエイティブBLOG
- WordPress
- コメント：30件
WordPressはそもそも無料で使えるCMSのはずですが、レンタルサーバーの契約だったり画像編集ツールだったり写真や画像素材だったり、お金がかかるポイントがいくつもありますよね。
そこで、1円も使わずに完全無料でどこまでやれるかチャレンジしてみました。そしてできあがったのがこのサイトです！
全部無料。まったく1円もかかってません。
まあこのサイトの出来栄えは賛否あろうかと思いますが、今回私が伝えたいのは、WordPressはやり方次第でほんとにまったく1円もかけずに、かなりのサイトが作れちゃうよ！ということなんです。
では以下より、どうやって作ったのかを解説していきたいと思います！
なおちょっと長いので…
準備編はこちら
構築編はこちら
準備編
サイトの構築を始める前に、まずは以下の用意から始めましょう。
① WordPressの構築に適した無料のレンタルサーバーを選ぶ。
無料のレンタルサーバーというと海外の怪しいサービスを思い浮かべがちですが、ここでは日本企業が運営していて安全性が高いと言われているサーバーを挙げていきます。
WPblog
ネットオウル株式会社という会社が運営する無料レンタルサーバーサービス。WordPress専用であることが特徴です。
Xdmain
人気のレンタルサーバーサービスを運営するエックスサーバーが提供する無料サービス。将来的に本格的なホームページ運営を考えている方には都合がいいかも。
XREA.com
GMOインターネットグループのGMODigiRockという会社が運営している無料サービス。利用するには、同社とドメイン契約を結ぶ必要があります。
比較
| WPblog | Xdmain | XREA | |
|---|---|---|---|
| 広告表示 | あり | あり | あり |
| 容量 | 1ギガ | 2ギガ | 1ギガ |
| 無料ドメイン | あり | なし | なし |
| WordPress 簡単インストール |
あり | あり | あり |
結果、WPblogを選定。
今回はドメイン取得のお金がかからず、初心者に必要最低限の機能と容量のあるWPblogのサービスを使うことにしました。
② 無料のワードプレステーマを選ぶ。
無料でデザイン性の高いWordPressテーマは無数に存在します。「ワードプレス テーマ 無料」でググれば星の数ほど出てきますので、ここでは選ぶ基準だけ。
自分がどんなサイトを作りたいかに応じて、近い構造のものを選ぼう。
コーポレートサイトを作るなら、コーポレートサイト用のテーマを。ブログ系サイトならブログ系のテーマを。写真などのライブラリーサイトならライブラリー用のテーマを選ぶほうが、あとあとの作業が楽です。
できるだけ日本産のテーマを選ぼう。
デザイン性の高さだけで言ったら、正直言って海外のテーマの方があか抜けてます。色使いもレイアウトも。でも海外産のテーマは使い方がかなり特殊なものが多く、仕組みを解析するだけでも一苦労。ある程度WordPressに熟練していない限りは、使いこなすのは難しいです。
その点日本産のテーマは、固定ページや記事ページの使い方が変則的なものが少なく、丁寧なマニュアルが用意されていることが多い。よってまずは、日本産のテーマから始めてみるのが敷居が低くていいと思います。
レスポンシブ対応しているものを選ぼう。
いまどきはコーポレートサイトですらスマホ対応が求められます。よほどデザイン性が高くても、レスポンシブ対応していないテーマを選ぶべきではありません。
今回はGridster-Liteという海外産のテーマを使います。
上の話と矛盾してしまいましたが、0円でどこまでクオリティーを上げられるかというチャレンジでもあるので、あえて海外産のテーマを選びました。ライブラリー風ですが、動きが軽くていい感じです。
③ 無料の素材集サイトを選ぶ。
今回主に使うのは、以下の無料素材サイト。
ロゴマークの無料配布サイト・ロゴマルシェ
フラットデザインに適した無料背景素材サイトGraphicsFuel
ほかのアイコン、写真、ベクターは、以前まとめたこちらの記事 をご参考あれ。
プロも仕事で使っている無料のアイコン・写真・ベクター・その他お役立ち系素材サイトを一通りまとめています。これをフォローしておけば、当面はほかのものは必要ないかと。
④ 無料の制作ツールを選ぶ。
今回はPhotoshopとIllustratorの代替となるフリーソフトを用意しました。
※WEBの制作ではIllustratorがなくてもそれほど困りませんが、今回はあえてIllustratorの代替ソフトを使います。理由は後々出てきますが、ロゴマルシェのロゴを扱うにはベクターデータであるAIファイルが開けるソフトが必要だからです。
Phoshopの代替ソフト「GIMP」
写真のリサイズや色調補正、文字乗せなど必要十分な機能が備わっている、フリーのペイントソフトの定番です。
Illustratorの代替ソフト「INKSCAPE」
Adobe Illustratorと同じドロー系のフリーソフト。ベクター操作ができ、AIやEPSのファイルが扱える数少ないフリーソフトです。
準備編まとめ
以上で必要な環境ならびに素材、ツールは揃いました。
構築編
サーバーの契約からWordPressの構築まで、順番に進めていきたいと思います。
① 無料レンタルサーバーWPblogの契約とWordPressのインストール
申し込み
無料お申し込みボタンをクリック。
「会員登録フォームへ」をクリックし、メールアドレスを送信。そのメールアドレス宛に確認メールが届くので、その中の認証IDを入力し、「登録フォームへ移動」ボタンをクリック。
新規会員登録画面で必要事項を入力し、「確認画面」ボタンをクリック。あとは確認画面がOKであれば、申し込み完了です。
WordPressのインストール
確認画面をOKすると、こちらのメンバー管理ツールというページに自動的に飛ばされます。
その左サイドメニューの下のほうに「WPblog管理」というメニューがあるのでクリック。
初めて登録した場合は、WordPress(ワードプレス)一覧の中に「インストール済みのアプリケーションはありません。」と表示されているので、その下の「新規インストール」ボタンをクリック。
新規インストール画面に入力フォームが表示されるので埋めていきます。
- アプリケーションID：今回は無料のドメインを使用するので、http://❋❋❋❋.wpblog.jpというURLになります。その❋❋❋❋の部分がアプリケーションIDとなります。
- ブログタイトル：ブログのタイトルです。
- メールアドレス：登録時に入力したメールアドレスです。
- サイトアドレス：無料ドメインと使うので、「初期ドメインを利用」にチェックします。
あとは規約に同意し次へ進み、問題なければ「確定（アプリケーションをインストール）」ボタンをしてください。
インストールが完了しましたという通知画面とともに、管理ユーザ名とパスワードが表示されます。大事なのでメモしてから、「アプリケーション一覧に戻る」を押してください。
これでWordPressのインストールが完了しました。「ダッシュボードへ」をクリックすると、いよいよWordPressが使えます。
② 無料のWordPressテーマのダウンロードと組み込み
まずはWordPressにログインしてみよう。
先ほどの画面の「ダッシュボードへ」ボタンをクリックすると、WordPressの認証画面が開きます。先ほどメモしておいた管理ユーザ名とパスワードを入力してください。
これがWordPressのダッシュボード画面です。
無料のWordPressテーマを組み込む。
Gridster-Liteのダウンロードページでダウンロードボタンを押してください。gridster-liteというフォルダがダウンロードされます。
テーマをWordPressにアップロード。
続いてWordPressのダッシュボード画面で、左のメニューの中の外観からテーマをクリック。
上のほうにある「新規追加」をクリック。
さらに「テーマのアップロード」をクリック。
ファイルのアップロード画面が開きます。先ほどダウンロードしたフォルダを必ずZIP形式に圧縮してからアップロードしてください。
なお、フォルダの構成が間違っているとアップロードが失敗します。フォルダの第一階層に各種PHPファイルが入っている構造で圧縮してください。これ、よく陥る失敗です。
テーマのアップロードに成功すると、こんな感じで完了画面が出ますので、「有効化」をクリックしてください。
ダッシュボードの左上の アイコンにマウスを乗せると、「サイトを表示」と出ます。クリックすると、無事にサイトができあがったことが確認できます。これで無料テーマの組み込みが完了です。
この感じだとまだちょっとさみしいですよね。なので、これからデザインを強化していきます。
③ WordPressテーマの編集と記事の投稿
サイトのロゴマークを作る。
無料でロゴマークを配布しているサイトロゴマルシェ にアクセスしましょう。
ロゴスタイルで自分のサイトのコンセプトに合わせたロゴが探せます。今回は選んだ無料テーマがスタイリッシュだったので、スマートを選択。
こいつを選びました。
「ロゴをダウンロードする」をクリックすると、
aiという拡張子のファイルがダウンロードされます。これがIllustratorなどで扱うベクターデータです。
Illustratorの代替ソフトとしてインストールした「INKSCAPE」を立ち上げ、ダウンロードしたaiファイルを開きましょう。するとロゴデータがこんな感じで開きます。
文字ツールや選択ツールを使って、こんなふうに編集します。
INKSCAPEの詳しい操作方法は、ここでは割愛します。以下のサイトがかなり細かく親切に使い方を表記しているので、参考にしてみてください。
ここから少しコツがいります。
まずは選択ツール（左端にある黒い矢印）でロゴマークをすべて選択し、上のメニューのパスから「ビットマップをトレース」をクリックします。
続いてメニューの編集の「ビットマップのコピーを作成」をクリック。するとデスクトップにPNGという形式のファイルが保存されます。
※私の場合はPNGファイルがデスクトップに保存されますが、インストール時の設定で保存場所が変わるかもしれませんのでご注意ください。
こんな形でPNGファイルが作成されました。
今度はPhotoshopの代替としてインストールしたフリーソフト「GIMP」を立ち上げ、PNGファイルを開きます。
ロゴの大きさにちょうどいいように、画像サイズを変更します。メニューの画像から「画像の拡大・縮小」をクリック。
ダイアログボックスが立ち上がり、幅や高さの変更ができます。サイトにロゴを設置する位置を考え、ここは200pxにしておきます。
再びWordPressのダッシュボードに戻り、外観から「カスタマイズ」をクリック。
ロゴをクリックし、ロゴのPNGデータをアップロードします。
はい、サイトのロゴマークが表示されました！
ついでにもう一工夫。同じく外観のカスタマイズから背景画像をクリックし、無料背景素材配布サイトGraphicsFuelでダウンロードした好きな背景をアップロードします。
こんな感じで、一気に今風のサイトの雰囲気になりました！
記事を投稿する。
それでは、肝心要の記事を投稿していきましょう。
WordPressのダッシュボードの投稿から「新規追加」をクリック。
ちょっと小さいですが、これが投稿画面です。ここに作ったものが、サイトのコンテンツとして増えていきます。
投稿画面の右端に、アイキャッチという枠があります。ここに入れた画像が、その投稿ページの大きなビジュアルになります。
こんな感じですね。
あとは記事の本文などを入力していき、
できあがったら「公開」ボタンを押しましょう。
一つ記事ができました！
あとはこれを繰り返して記事を増やしていけば…
こんな感じでサイトができあがっていきます！
（記事投稿のところはかけあしで進めちゃいましたが、ここは普通に作れば問題ありませんので）
完成！ここまでで約3時間！
というわけで、こんなサイトができました！
まとめ
サーバーのレンタルからツールの入手、素材の調達まで、探せばいくらでも無料サービスがあるのがWordPressのいいところ。もっと時間を掛けて丁寧に作れば、もっとハイパーなサイトも作れると思います。
お金はないけどWEBサイトを作りたい方、WEBサイト制作のきっかけをつかみたい方は、ぜひトライしてみてください。WordPressの知識も深まると思いますよ！
プロフィール
- エスアイイーメディア事業部のマネージャーをしている窪田です。このメディア事業部サイトの管理人でもあります。普段は自社運営の求人サイトやブログ系サイトの企画・制作・運営をしたり、思い付きでサテライトサイトを立ち上げたりしています。サイトは主にWordPressを使うことが多いです。理由はめんどくさくないから。
関連記事
コメント
この記事へのトラックバックはありません。
この記事へのコメントはありません。