1-1はじめに

デザインデータのダウンロードサイトを運営する

自身で自作した無料のデザインデータをネット上にアップするサイトの作り方を説明するサイトです。

作成したサイトを自身のポートフォリオサイトやフリーランスでの仕事受注への連携、アドセンス等の広告収入など幅広く応用できるかと思います。

無料ダウンロード素材って?

下記の画像データのイラストレーター素材を無料配布する場合に、画像とeps(またはai)の圧縮データを用意します。

dl

無料ダウンロード

上記のダウンロードをクリックすることでzipデータのダウンロードが可能です。

ワードプレスを使用してのサイト作成となります

デザインデータのダウンロードサイトはワードプレスを使用します。

ワードプレス

ワードプレスは、無料でブログサイトを構築することができ、カスタマイズ性も優れています。

管理画面もわかりやすく、専門的な知識がなくても容易にサイト運営を行うことが可能です。

運営サイトのご紹介

上記のサイトも全てワードプレスを使用して作成しております。

サイトオープンまでの流れ

1,レンタルサーバーを借りる

2,ドメインを取得する

3,レンタルサーバーにワードプレスをインストールする

4,記事を書いてダウンロードデータへリンクを設置する

大まかな作業はこれだけです。
もちろんサイトのデザインやSEO対策、アドセンス広告の設置などもやることはたくさんありますが、サイトオープンまでは1~2日もあれば簡単にできてしまいます。

自身のポートフォリオサイトの運営や個人的なブログとしても運用に当サイトの情報が役立てば幸いです。

次の記事

続いて「1-2レンタルサーバーの登録」です

1-2レンタルサーバーの登録

デザインデータのダウンロードサイトをつくるにあたり、サーバーと独自ドメインを用意する必要があります。

はじめにレンタルサーバーを借ります

サイトを運営するために必須なレンタルサーバーですが、当サイトはエックスサーバーを利用していますので、こちらをオススメさせて頂きます。

エックスサーバー

理由は多々ありますが、「ワードプレスを自動インストールしてくれる」のが嬉しいポイントです。こちらは1-4ワードプレスをインストールするの場面で詳しくご説明致します。

レンタルサーバーはどこの会社でも構いませんが、説明のしやすさからエックスサーバーの画面キャプチャを利用して進めさせて頂きます。

エックスサーバーの登録方法

エックスサーバーのサイトでお申し込みを行います。最大10日間の無料お試しがあるので気楽に初めれるのも利点です。

エックスサーバトップページのオレンジの「お申込み」ボタンより登録が行えます。

エックスサーバーの登録

一番安いX10プランがオススメです

プランはX10~X30までありますが、一番低い「X10」プランで充分です。申し込みフォームの一番最後に選択する場所があります。

サービス申し込みの手順は、申し込みフォームをクリックし、新規お申し込みを選択します。

初めて利用する方

 

利用規約及び個人情報の取扱いを同意し、新規サーバーのお申込みを行います。

新規サーバー申し込み

サーバーIDは重複がなければ自由に設定できます。
※ここで設定したIDのドメインを使用できます。(後に独自ドメインを取得します。)

お客様情報の赤色必須事項を全て記入し、「お申込内容の確認」ボタンをクリックします。

必須項目の記入

全ての記入が完了したら「お申し込みをする」ボタンのクリックで完了です。

約2~3時間以内にサーバー設定がされ、申込時のメールアドレスに連絡がくるのを待ちましょう。
※24時間以内と表記はありますがもっと早く設定がなされました。

 

レンタルサーバーはどこの会社でもOK!

申し込むレンタルサーバーの会社はどこでもOKです。エックスサーバーは月額1,000円程度と決して安いわけではありません。しかしながら、運用のしやすさ、サポートにおいてもレベルが高いです。

申し込みから支払いまでの間に10日間のお試し期間があるので、様々なレンタルサーバーを比較してみるのも良いかと思います。

申し込みの流れ

レンタルサーバー Xserver

続いてドメインの取得です

続いて「1-3ドメインを取得」です

1-3ドメインを取得

オリジナルのドメインを取得しよう

エックスサーバーで登録した場合、登録したIDの入ったサブドメインが割り振られます。

http://[登録ID].xsrv.jp

このサブドメインで運用も可能ですが、「ブランディング」や「SEO」などの側面から独自ドメインの取得をオススメします。

金額も.comや.netは750円程度から取得でき、維持費も翌年から年間で1280円程度とそこまで高くないので魅力的です。

コンセプトを決めよう

ドメインを取得するにあたって、サイトのコンセプトを決めなければなりません。

どんなサイトにするか。それに合わせた名前からドメインを決めましょう。

当サイトの場合は「ダウンロードサイトの作り方」から「Download site」→「dl-site.net」としました。
本当はdlsite.◯◯としたかったのですが、すでに取得されていたのでdl-site.netとなりました。

ドメインを取得しよう

ドメインもどこの会社で取得しても大丈夫です。

ここでは、取得料金の安いお名前.comから取得する手順を説明致します。

→お名前.com

ドメインの空きを検索します

お名前.comのトップページの右上部分に取得したいドメインを記入し、検索を行います。
ドメインの検索

「tekitouni」と記入して検索を掛けますといくつかのドメインの取得ができるようです。しかし、複数のドメインはいらないので必要のないものはチェックを全て外しましょう。
※ここでは.comを選択

ドメインの選択

 

チェックを一つにしぼり、画面右のオレンジ色の「お申込へ進む」ボタンをクリックします。

ドメインの申し込み

お申込み内容ページで「Whois情報公開代行」にチェックを入れ、サーバー選択は「利用しない」のまま、初めてご利用の方「次へ進む」をクリックします。

Whois情報公開代行

必須項目を記入し、お支払いを選択することで申し込みが完了です。

しかし、ドメインを取得しただけではページに反映されません。取得したドメインをエックスサーバー(使用中のレンタルサーバー)で使用するために設定を行います。

 

ネームサーバーの設定を行う

お名前.comトップページの右上からログインし、ドメイン設定の管理画面に行きます。

ログイン

サイドのメニューバーに「ネームサーバーの変更」というメニューがあるのでそちらをクリックします。

ネームサーバーの変更

取得したドメインがでてくるので、チェックを入れましょう。

取得したドメイン

下へページを推移しますと、「ご登録情報に変更・相違はありませんか?」という内容がありますので青いボタン(登録情報は正しいので、手続きを進める)をクリックします。

登録情報は正しいので、手続きを進める

エックスサーバーのネームサーバーを利用するので、「他のネームサーバーを利用」を選択します。

他のネームサーバーを利用

エックスサーバーのネームサーバーは、ネームサーバー1から順に ns1.xserver.jp~ns5.xserver.jpとなりますので、空欄に記入し、「確認画面へ進む」→「設定する(次ページ)」で完了です。

ネームサーバーの変更

 

ネームサーバーの設定 | エックスサーバーマニュアル(外部リンク)

エックスサーバーでドメイン設定を行う

エックスサーバーのサーバーパネルからドメインの登録を行います。

会員IDとパスワードを入れて、ログインします。

ログインをする

 

インフォパネルからサーバーパネルへ移動します。
※サーバーパネルへ直接ログインも可能です。

サーバーパネルへ移動

サーバーパネルページの右上にあるドメイン設定をクリックします。

ドメイン設定へ移動

取得したドメイン名を空欄に入れ、ドメインの追加をします。
※.comや.netなどの選択も忘れずに行って下さい。

エックスサーバーのドメイン設定方法

設定が完了したら数時間待機です。
「ドメインの追加後、サーバーに設定が反映されるまで数時間~24時間程度かかる場合があります」という注意がきがありますが実際には3時間程度かなと思います。

設定が完了すると実際のURLにいくと下記のようなページになります。

サイトオープンの準備完了

次は超簡単!ワードプレスのインストール

続いて「1-4ワードプレスの自動インストール」です。

 

1-4ワードプレスの自動インストール

いよいよ、エックスサーバーでワードプレスをインストールします。前回の記事のドメイン設定同様にサーバーパネルへと進みます。

サーバーパネルへ移動

サーバーパネルページの設定対象ドメインを今回取得したドメインに設定します。

ドメインを合わせます

設定後、サーバーパネルページの中ほどにある「自動インストール」をクリックします。

ドメインを合わせます

ここのページで様々なシステムをボタンひとつでインストールすることができます。

「プログラムのインストール」タブをクリックし、ワードプレスをインストールしましょう。

ワードプレスをインストール

画面が推移すると、いくつか記入する事項があります。

インストールURL:どこにインストールするかを決めることができます。トップページは別にしたいい場合は右の欄を記入します。
※記載しなければ一番上の階層にワードプレスを入れることになりますが何かしらのディレクトリに入れることをおすすめします。
※下記の画像では「demo」としましたので、http://www.dl-site.net/demo/ がデータサイトのトップページになります。

ブログ名:サイトの名前です。(後に変更可能)
ユーザー名:ログイン画面で必要です。
パスワード:ログイン画面で必要です。
メールアドレス:確認などの連絡先となります。

demoサイトアップ

上記内容を記入し、確定をクリックするとさらに確認ページへ推移します。

確認ページでは「MYSQLデータベース名」等の情報が記載されていますので、のためメモしておきましょう。

さらに「インストール(確定)」ボタンのクリックで完了です。

ワードプレスのインストール完了

 

WordPressのインストールが完了しました。という文章の下のリンクがログインページになります。先ほど設定したID(ユーザー名)とパスワードでログインが出来るかと思います。

1章はここまでです。

いよいよ記事のアップです

続いて「2-1ワードプレスで記事をアップ」です。

2-1記事を書こう

ワードプレスをインストールしたては、「Hello world!」のページがあります。

Hello world!

単純にHello world!が記事のタイトルでそれ以下が本文になります。

この記事は削除してしまいましょう。

投稿しましょう

ダッシュボードの左メニュー、「投稿」→「新規追加」で記事作成画面になります。

右上のビジュアルモードは直感的に記入できます。テキストモードはhtmlコードで記入が可能です。

まずは、ビジュアルモードで記入してみましょう。

「投稿」→「新規追加」

 

画像を本文に追加しましょう

メディアを追加ボタンメディアを追加ボタンを押します。画面が切り替わるのでアップしたい画像を画面上にドロップします。

画面上にドロップ

 

ドロップするだけで画像はサーバーにアップされるので、右下の青い「投稿に挿入」ボタンをクリックすれば本文に追加されます。

青い「投稿に挿入」ボタンをクリック

 

ダウンロードデータをアップしましょう

ダウンロードさせるデータをzipなどの圧縮ファイルにまとめ、画像のアップと同じようにメディアの挿入画面にドロップします。

zipファイルの追加

star.zipファイルがアップロードされました。このzipファイルのURLをコピーします。

ファイルのURL

赤枠部分のURLにアクセスすれば、今アップしたzipファイルをダウンロードすることができます。

この段階では投稿に挿入はしません。

文章にリンクを設置しましょう

【素材ダウンロード】という文章を書き、選択した状態で鎖のアイコンをクリックします。

選択した状態で鎖のアイコンをクリック

 

URL欄にコピーしておいたURLをペーストし、リンクのチェックを入れ、青い「リンク追加」ボタンを押せば完了です。

リンクURLを記入

 

最後に公開ボタンを押しましょう。

公開ボタン

 

下記のデモページのようになっていればOKです。

デモページ

次の記事はカテゴリー分けです

続いて「2-2カテゴリーわけをしよう」です

2-2カテゴリーわけをしよう

カテゴリーをつくる

記事にカテゴリーをつけてわかりやすく分類する必要があります。

ダッシュボード左のメニューの「投稿」→「カテゴリー」を選択します。

「投稿」→「カテゴリー」

名前の箇所に追加したいカテゴリー名を記入し、下にある青い「新規カテゴリーを追加」ボタンを押せば完了です。

新規カテゴリーを追加

投稿した記事にカテゴリーをわりふりましょう

ダッシュボード左のメニューの「投稿」→「投稿一覧」を選択します。

「投稿」→「投稿一覧」

編集する記事を選びクリックします。(記事の内容の変更も同様の方法です。)

編集する記事を選びクリック

 

記事編集画面の「カテゴリー」に先ほど追加したカテゴリー名が追加されているのでそちらを選択し、青い「更新」ボタンを押せば完了です。

カテゴリー名が追加

投稿画面でカテゴリーを追加する

わざわざカテゴリーページに行かなくてもカテゴリーの追加ができます。

「+ 新規カテゴリーを追加」をクリックすると記入欄が表示されますので、
記入後「新規カテゴリーを追加」で完了です。

新規カテゴリーを追加

カテゴリーの順番を変更したい

カテゴリーの表示順を変更するには「5-3ワードプレスのカテゴリーを並び替えるCategory Order」の記事を参考にしてください。

次の記事は固定ページの作成です

続いて「2-3固定ページをアップしよう」です

3-1テーマを変えてデザインを変更しよう

簡単にデザインの変更が可能です!

ワードプレスにたくさんの「テーマ」が存在します。テーマとはデザインのテンプレートとして捉えて頂ければわかりやすいと思います。

かっこいいデザイテンプレートがたくさんありますので納得いくまで探してみるといいと思います。PHPの知識があればそこから自分用にカスタマイズもできます。

テーマを探す

ダッシュボードの左メニュー、「外観」→「テーマ」を押すと現在使用しているテーマなどが表示されます。

外観→テーマ

2015年9月段階では、「Twenty Fifteen」のテーマが初期設定になっています。

このままでも素敵ですが、新しくしたい場合は画面上部の「新規追加」をクリックします。

テーマの追加

ページ推移後、様々なテーマのサムネイル画像が表示されます。

特徴フィルターである程度の絞り込みをすることで希望のテーマを見つけることができると思います。

テーマの検索

どんなレイアウトが適しているか

ダウンロードサイトを作る場合に適したレイアウトはコレ!と一概にいうことは出来ませんが、やはりスタンダードな2カラム(右サイドにメニュー)がわかりやすいかと思います。

ダウンロードサイトを利用する方の多くは、「デスクトップPC」の環境で「デザインに関係する方」が大半になります。現在はタブレットやスマートフォン用のワンカラムサイトも主流になっていきていますが、「使いやすさ」や「馴染み」の部分から2カラムレイアウトがよいのかなと感じます。

もちろん提供するデータによって見え方は変わると思いますのでデザインと合わせて最適なテーマを探して下さい。

ちなみにこのサイトはどのテーマを使っているの?

このサイト並びに運営するデータサイトの多くが「Twenty Eleven」を使っています。シンプルでカスタマイズもしやすいため、とても気に入っています。(他を知らないという言い方もできます。。)

2カラムの運営サイト:注意書き・張り紙テンプレート【ポスター対応】

すぐに印刷ができる貼り紙データのダウンロードサイトです。カテゴリーが多いため、2カラムを採用しています。

注意書き・張り紙テンプレート【ポスター対応】
注意書き・張り紙テンプレート

1カラムの運営サイト:シームレスパターン|背景素材ダウンロードサイト

シームレスの背景素材を大きく表示させるためにワンカラムを採用しています。

【無料・商用可能】シームレスパターン|背景素材ダウンロードサイト|
シームレスパターン|背景素材ダウンロードサイト

カスタマイズの説明にあたり

デザインや機能のカスタマイズにあたり、「Twenty Eleven」のテーマを使用して説明をさせて頂きます。

続いて、「3-2外観のカスタマイズをしよう」です。

3-2外観のカスタマイズをしよう

ダッシュボードの左メニュー、「外観」→「カスタマイズ」を押すとページが切り替わります。

デザインのカスタマイズ

サイトデザインのカスタマイズは専門的な知識がなくてもある程度行うことが可能です。

テーマは「Twenty Eleven」での説明となります。

デザインのカスタム

サイト基本情報

キャッチフレーズは初期設定で「Just another WordPress site」となっているのでなんのサイトかわかる説明に変更しましょう。検索しそうなキーワードを盛り込むことで検索流入も少なからず変わるはずです。

レイアウト

2カラムの左コンテンツ、または右コンテンツ。もしくは1カラム(一列)の選択ができます。

ヘッダー画像

初期設定では8個の画像がランダムに表示されます。

推奨とされる1000 × 288ピクセルの画像を新規追加することでオリジナルのヘッダー画像に変更できます。

もっとカスタマイズしたい

運営を続けると最低限のカスタマイズでは物足りなくなってくるかと思います。

テーマの編集でスタイルシートやheader.phpなどをかきかえることで可能となりますが専門的な知識も必要となります。

※細かい設定は準備中です。

次はウィジェット(サイドやフッター部分)の変更です

続いて、「3-3ウィジェットの変更」です。

3-3ウィジェットの変更

サイドメニューやフッターを変更する

ダッシュボードの左メニュー、「外観」→「ウィジェット」を押すとページが切り替わります。

ウィジェットの変更

サイドバーやフッターに様々なウィジェットを追加することができます。

ウィジェットの変更

 

操作は簡単で必要なウィジェットをメインサイドバーにドラッグ&ドロップで追加できます。同様に必要なければ画面外にドロップすることで削除できます。

最低限いるものは?

ダウンロードサイトでは一般的なブログのように「いつ」追加されたかはあまり意味をなさないため、アーカイブ(月毎)はいらないかと思います。

検索とカテゴリーだけあれば充分かなと感じますが、寂しくなってしまうのもいなめません。

自由な内容を入れれるテキスト

テキストは自由な内容を挿入できます。

テキストで自由な内容を挿入

当サイトでは、タイトルに「運営サイトのご紹介」とし、内容に運営サイトへのリンクを設置しております。

運営者のプロフィールや広告バナーの設置も可能です。

人気の記事ベスト10を入れたい

ワードプレスには「WordPress Popular Posts」という便利なプラグインがあり、こちらを追加することで簡単に実装可能です。

5-4 人気の記事を自動で表示するWordPress Popular Posts」の記事を参考にして下さい。

次からは第4章 広告についてです

続いて「4-1広告の種類」です。