ホームページの制作はどの方法でいくか

Design Office Macsのサイトはこちら。

こんにちは。Isodaです。
今回はちょいと思考を変えて、テクニック集ではなく、読み物的なものを書いてみたくなりました。
秋なんですかねえ。
なんて言ってるうちに、いってみよう。

さて、ホームページと一口に言っても、今はいろんな制作方法があるんですね。
昔はエディタでタグをひたすら打ち込んで作っていた時代もあったんです。
それが進化して、winだとホームページビルダーとかの制作専門のソフトが出てきた。

今っていうと、代表的なのは以下の方法。
・HTMLとCSSを使って作る(Dreamweaver、ビルダーなど)。
・CMSを使って作る(wordpressとか)。
はたまた、フェイスブックなんかのSNS。
ブログで十分という方もあり。

どの方法で自分のサイトを作るのかはオーナーの自由だが、
商用で使うのなら、上記のHTMLとCSSかwordpressなんかの方法を使うのが無難でしょう。

フェイスブックもブログも表現や宣伝手段にはなるのだが、固定したページを見せるという点では少々弱いですね。
タイムラインでページが流れてしまうので、「企業概要」とか「製品情報」などの特定ページを見せずらい。

もちろんSNSで特定ページを先頭に常に配置っていう手法もあるでしょうけど、少々面倒くさい。

意外と若い人は一つ一つページを読んで、タイムラインで流れた所も探し出しますけど、少々年配の方はそんな面倒なことはしないですね。
なので、熟年層以上を対象としたビジネスだと見てもらえない確率が高くなる。

なので、BtoC(個人を対象としたビジネス)の若年層向けならSNSオンリーでも何とかなるかもです。
(一般の方は購買先の会社情報とかは気にしないので)

一方、BtoBビジネス(法人を対象としたビジネス)は自社サイトがないとまずいでしょう。

今や新規の取引先を調べる時は、まずネットですから、自社サイトが無いと経営大丈夫だろうかと余計な詮索されます。

法人相手のビジネスは、信用度を高める意味でも、他社広告なしの独自ドメイン(◯◯◯.comとか◯◯◯.jpなど)のサイトを持つようにしましょう。

そう考えると、理想は通常のホームページを1つ持つ。
プラスしてブログやSNSを使うという方法が、広告宣伝手法としてネットを活用するのには最適かと思うんですね。

でも、ブログなんかは比較的敷居が低いのだが、ホームページの制作ってのは結構面倒なんですよね。
そう、今は簡単に作れるんだけど、それでもちょいと「面倒」なんです。

なので、その面倒さを他人にしてもらうってのはアリでしょう。
もちろん、そこには有償である場合もあるし、PCの得意な人なら無料で作ってくれる場合もあります。

クオリティの高いサイトとなるとプロにお任せした方が手取り早いけど、個人や趣味のサイトなんかは、手作り感のある俺流のものでもいいんではないかと思う。

要は伝えたい事を伝えたい人に伝わればいい。
ホームページってのは、そんなもんです。

ただ、そこにオシャレ感とか、動きとか、クオリティの高さを要求したい時もある。
あと日々の時間に取られて、なかなか作る時間がない、なんて時もある。
そんな時はさっさとプロにお願いして作ってもらえばいい。

作れば反応はありますよ。世界中の誰かが必ず見てくれる。
作って損をするってことは、まずないです。

あっ、そうそう。ホームページ制作の何が一番手間がかかるかわかりますか?
写真やアイコンなんかの素材作りなんですね。

人は小さい時から文字は書いてきてるので、文章をちょこっと書くのは、そんなに大変ではないです。
もちろん、理路整然とした文章ってのはある程度の文筆力が要ります。

ただそれよりも写真を撮って、加工して、そこに文字を入れたり、対象物を切り取ったりってのが一番大変なんです。
あるいはイラスト画像を作ったりだとか。
難しい作業ではないんだけど、手間がかかる。

なので、プロに頼むと料金が発生しますが、
その大変さを代わりにやってくれる代金だと思えば何てことないです。

写真もスマホで撮ってそのままアップするのはSNSとか趣味ならOK。
でも、プロは一眼レフで撮影してphotoshopで加工して、クオリティを高める。
手間暇かけていいものを作る。そこに少々の料金が発生する。そんな感じです。

サイトの作り方は、お教えしますよー。
あっ、時間があったらのお話ですが…。

追伸: スクールもやってますので、よかったらどうぞ。
TDデザインスクールのサイトはこちら。

お問い合わせページを作ろう

こんにちは。Isodaです。
今日の熊谷は暑いですね。久々の真夏日なんじゃないですか。
車を路上にちょっと停めておくだけで、車内に入ると暑いのなんのって。
エアコンを全開にかけて、窓もフルオープンじゃないと走れません。
今週末もこんな陽気で、お出かけ日和のようです。

さて、今回のお題は「お問い合わせページを作ろう」です。

お問い合わせページってのは、こんな感じのページのことです。

よくありますよね。
このページのメリットは、メールアドレスを掲載しなくていいところ。
それによって、スパムメールのうっとうしさから解放されますね。

使うユーザ側からしても、いちいちメールアドレスをコピーして、メーラーを立ち上げて、ていう手間が省けます。

さあ、いいことずくめのお問い合わせページですが、これを通常のサイトで作ろうとすると結構面倒なんです。

ところが、wordpressだとサクッと作れてしまう。
それにはwordpressのプラグイン機能を使うこと。
こいつを使って、パパッと作っちゃいましょう。

では、管理画面の
「プラグイン」「新規追加」をクリック。

 

「プラグインの検索」のところに、
「Contact Form 7」と入力してください。

で、「今すぐインストール」 「有効化」をクリック。

これで「プラグイン」のページに「Contact Form 7」が追加されましたね。

で、「Contact Form 7」の「設定」をクリック。

すると、こんな画面が出るのですが、まずタイトルを入れましょう。

ここでは「お問い合わせ」と入れておきます。
あとは、デフォルトでメールアドレスやらが入っているので、 このまま右側の「保存」ボタンをクリックしましょう。

すると画面真ん中あたりに、青ラインのショートコードが現れるので、これをコピーします。

 

さて、あとは貼り付けです。
とりあえず、新規でお問い合わせページが欲しいので、
左側の黒タブの中から、
「固定ページ」 「新規追加」をクリック。

タイトルに「お問い合わせ」を入力し、
本文欄に先ほどの「ショートコード」をペーストします。

で、右側にある「公開」ボタンをクリックしてから、
タイトル欄の下にある「パーマリンク」をクリックします。

 

すると、あらお見事。素敵なお問い合わせページが現れます。

右側のサイドメニューが邪魔だったら
「固定ページの属性」「テンプレート」「サイドバーなし」を選択して、
更新ボタンを押してください。

 

こんな感じでサイトいっぱいに広く使えますね。

ここで実際にメール送信ができるかチェックしてみましょう。
空欄にそれぞれ適当に入力して、「送信」ボタンをおします。

下のように、「ありがとうございます。〜」が現れたら成功です。

各自のメールソフトで、メールが届いているか確認しましょう。
メール来ましたか。

届いてない場合は、
「プラグイン」「インストール済みのプラグイン」
「Contact Form 7」「設定」で、
先ほど作った「お問い合わせ」をクリック。

「コンタクトフォームの編集」画面の
「メール」タブをクリック。

「送信先」の所に、あなた宛てのメールアドレスが書いてあるかチェックしましょう。
もし、違うアドレスが書いてあったら、書き直してください。

で、もう一度メール送信のテストをしてみましょう。
今度はバッチリじゃないでしょうか。

ここまで作り終わったら、メニューに追加しておきましょう。
「外観」「メニュー」をクリック。

「固定ページ」  今作った「お問い合わせ」にチェックを入れて、
「メニューに追加」ボタンを押します。

すると「メニュー」にお問い合わせが追加されます。
「メニューを保存」ボタンをクリック。

トップ画面を見てみましょう。

メニューも変わってますね。

こんな感じでお問い合わせページ&新メニューの完成です。
wordpressだとかんたんに作れて便利。
ぜひ皆さんも作ってみてください。

WordPressで複数のサイトを運営するには?

こんにちは、Hokutoです。こちらでは初めて記事を書かせていただきます^^
これまでIT関連の仕事をしていましたが、今回はこちらのブログの執筆にあたり、Wordpressの再研究をすることにしました。

ということで、少し調べてみましたが、奥が深い!こりゃ一気に書き込んでいくのは無理だ。(笑)

少しずつ研究成果を公表していきます。

こちらを見てくださっている方には、Wordpressをいじる中で
「あぁあぁ゛〜わからない」って時、このサイトを見返して、
冷静さを取り戻していただければ嬉しいな、って思います。
前置きが長くなりましたが、いきましょう。
「WordPressで複数のサイトを運営するには?」について。

wordpressでは、マルチサイト機能というものを利用して、
複数のサイトを運営することができます。
前回の記事である程度サイトを形にすることができたと思うので、今度はサイトの充実にシフトしていきましょう。

たとえば、
「関連会社のサイトを立ち上げたい」
「スタッフブログも立ち上げてみたい」
「ECサイトも立ち上げたい」

そんなとき、単にリンクを分けるのではなく、マルチサイト機能を活用すれば、より良いサイト作成が可能になります。
方法は二つ。
① サブディレクトリ方式 と ② サブドメイン方式

サブディレクトリ式
http://www.△△△.com/1
http://www.△△△.com/2
http://www.△△△.com/3
「.com」のスラッシュの後に連ねることができます。
これをサブディレクトリ式サイトと呼びます。

サブドメイン式
http://www.△△△.com/
http://※※※.△△△.com/
http://●●●.△△△.com/
「www」の部分がそれぞれ、「※※※」、「●●●」となります。
これがサブドメイン式サイトとなります。

ーー違いはなんなのか?
サブディレクトリ式は、何パターン設定しても、
同サイト、一つのサイトとみられます。
つまり、作れば作るほど大規模サイトになっていきます。

一方で、サブドメイン式サイトは同じサイトとは見なされず、
それぞれが独立した別のサイトとして認識されます。

<具体例>
それでは、サブディレクトリ式のサイトから具体例をみてみましょう。

http://www.athome.co.jp

http://www.athome.co.jp/vox/

http://www.athome.co.jp/film/

アクセスして閲覧すると一目瞭然。
同一ドメインですが、全く異なるサイトのような見た目です。
このように別サイトのように運営することも可能なのです。

続いて、サブドメイン式の例。

http://www.yahoo.co.jp

http://auctions.yahoo.co.jp

http://weather.yahoo.co.jp/

ここまで大手さんが運営するサイトともなれば、サブドメイン式でも十分検索の上位表示もされるでしょうが、
もし、「会社のHPとスタッフのブログを立ち上げる」程度でお考えであれば、サブディレクトリ式の方をおすすめします。

サイト規模が大きいほうが、検索された際に上位表示されやすいので、せっかく作ったサイトをいろんな方に見ていただける可能性は高まるでしょう。

ということで、次回のテーマは
「サブディレクトリ式でブログを作成する方法」に決定。

近いうちに更新します^^

「サイトのタイトル」と「キャッチフレーズ」を変えてみる

こんにちはIsodaです。
スタッフのnaru君の書いた原稿にアクセスできず、今回はピンチヒッターで登場しました。
今後とも、ちょこちょこ代打で出ようと思っています。

昨日は熊谷も台風の影響を受けましたね。夜は結構、雨風が強かったです。
瓦大丈夫かいなーなんて思いながら床につきましたが、いつのまにか朝を迎えて、台風一過のいいお天気日和になっていました。
いつものことながら、台風が過ぎるとカラッと晴れてそこそこ気持ちいいものですね。
熊谷も久々の30度超えのようです。

さて、wordpressでの制作の方ですが、
いい按配でサイトの方も完成してきたのではないでしょうか。

前回はグルーバルナビゲーションでしたよね。いわゆる上部のメニューバーのことです。
では、今回はサイトのタイトルを変えてみましょう。

えっ、サイトのタイトルを変えていいのかって。
wordpressはインストール前にサイトタイトルを記述してからインストするのですが、意外と真剣に考えてなかったりするんですよね。

で、作っていく過程でいいタイトルが浮かんだりするもんです。
なので、後からサイトタイトルを変えるってのは、結構あるんじゃないでしょうか。

まあ、クライアント様からタイトルを指定されて制作している場合は、勝手には変えられませんが、たまにタイトル変更の通知もくる時があります。
そんな時のために、知っといて損はないです。

まず「管理画面」から「外観」 「ヘッダー」 をクリック。

「カスタマイズ中」の左印「<」をクリックします。

すると「サイト基本情報」が出てきますね。

で、「サイトのタイトル」と「キャッチフレーズ」の両方を変えちゃいましょう。

 

タイトルを「くまがや商店」、
キャッチフレーズはサイトのURL「(仮)http://www.test.comcom」を入れてみましょう。
入れ終わったら、上の「保存して公開」をクリックします。

ついでにその下にある「サイトアイコン」も追加しましょう。
サイトアイコンとはブラウザ上のタブのところのサイト名の先頭に出る小さい画像のことです。
例えば、ヤフーなら下記の右上赤丸でくくった所。

 

縦横512ピクセル以上の画像を用意して、「画像の変更」ボタンをクリック。
あとは画面の指示通りにいけば、サイトアイコンの完成です。

今回制作した写真がこちら。

 

だいぶホームページっぽくなりましたね。
今回はここまで。

グローバルナビゲーションを作っちゃおう

こんにちはスタッフのnaruです。

将来メタボ腹になりそうなので軽い筋トレを最近始めました。まずは3か月続けたいな。(`・ω・´)キリッ

これを読んでくれているあなたと同じようにnaruも記事を書きながらお勉強中です。|ω・)

さて、今回の内容ですが、前回の続きWordPressでのウェブサイトの作り方です。

まず目次。

  1. グローバルナビゲーション(サイトメニュー)の設定
  2. トップページの作成

1.グローバルナビゲーション(サイトメニュー)の設定

グローバルナビゲーション:

Webサイト内のページ上部の目立つところにあり、リンクを飛ばしているメニュー

ウェブサイトを訪れる人が見やすいようにグローバルナビゲーションと呼ばれるメニューを作成します。

以下はグローバルナビゲーションの例です。

さて、「管理画面」から「固定ページ」を開いて「サンプルページ」をゴミ箱に移動します。

この「サンプルページ」は文字通りお試しページなので消してしまって問題ありません。

 

次に管理画面から「外観 」- 「メニュー」を選択します。

メニュー構造の中の「ホーム」という項目は不要なので削除してください。(必要なら後で作ることができますのでご安心を)

前回の記事で作成できているはずの4つの固定ページが確認できたら「メニューを作成」ボタンを押してください。

また、「メニュー」内の順番を決めることができます。

それぞれの固定ページ項目を左クリックしながら動かせるので順番を変えたいときにやってみてください。

メニュー作成ボタンを押した後、下の画像のようにメニュー設定という項目が現れます。

「メニューの位置」「 メインメニュー」のチェックを入れて「メニューを保存」を押すと・・・

このようにグローバルナビゲーションが現れてよく見かけるウェブサイトに近づきました。

2.トップページの作成

まずウェブサイトを開いたとき最初に出てくるページ(フロントページ)を「トップページ」に変更しましょう。

上の写真のように、「管理画面」 – 「設定」 – 「表示設定」の「フロントページの表示」で、「固定ページ」にチェックを入れて、

「フロントページ」を「トップページ」に変更します。忘れずに変更保存ボタンを押してください。

次に、フロントページを表示させると、下の画像のように「トップページ」と表示されていて見栄えがわるいので消してしまいましょう。

「管理画面 」- 「固定ページ 」- 「トップページ」を開き、タイトル入力場所に<!–トップページ–>と入力します。

<!–消したい文字–>とすることで表示を無効化することができます。

しかしこのままだとグローバルナビゲーションのトップページが消えてしまうので以下の設定をします。

「管理画面」 – 「外観」 – 「メニュー 」のメニュー構造のトップページをクリックし、ナビゲーションラベルから<!– –>を消してメニューを保存してください。

これでバッチリ、グローバルメニューの完成です。
めでたし、めでたし。

 

今回の記事はここまででーす。

メニューバーを作ろう

こんにちは。naruです。

最近は雨続きで、たまにはパッと晴れないかなーなんて思っております。
あっ、今日はちょっと晴れたかな。。

さて、本題へ。
(今回は時間の都合で短めです)

*****

WordPressはブログとして使われることが多いので、

企業用のウェブサイトを作るなら不必要な機能やウィジェットを削除します。

外観 – ウィジェットからサイドバーの中身を全て削除。

 

 

● TOP、事業内容、運営者情報、お問い合わせのページを作成

初めに考えた構成のように固定ページを作っていきます。

「固定ページ」 – 「新規追加」から「TOP」、「事業内容」、「運営者情報」、「お問い合わせ」の4ページを作ります。

表示するとこのような感じになります。

簡単に作成できるので4ページ作ってみましょう!(・ω・)ノ

詳しいやり方は次の記事で説明します。

wordpressの「テーマ」を設定してみよう

こんにちはスタッフのnaruです。

昨日は台風が日本を縦断しましたね。

夜は結構、雨風が強かったです。いやー、屋根が飛ばされないで良かったー。

さて、今回のテーマは「wordpressのテーマを設定してみよう」です。

その前にまずこちら。

****

2、ウェブサイトをどんな構成にするか考える

今回は「固定ページ」のみの構成でウェブサイトを作ります。

ところで、「固定ページ」って何でしょうね。

WordPressは、もともとブログ製作用に開発されたシステムなので、皆さんがよく見るブログ風のページを作るのは得意なんです。

でも今回はホームページ風のデザインでいきます。

それには「固定ページ」ってやつを使って編集していくんですね。

****

WordPressには2種類のページ作成方法(固定ページ、投稿ページ)があります。

固定ページ:いわゆるホームページ風になるページ

投稿ページ:ブログの記事作成などに使用するページ

Yahoo!ニュースのページは固定ページ、それぞれのニュースの詳細ページは投稿ページです。

 

今回はブログ風ではなく、普通のホームページ風のサイトを作るので、「固定ページ」で作っていきましょう。

ページ数はあまり欲張らずに4ページ(今のところです。増える場合もあり)でいきましょう。

 

 

さて、各ページの位置関係は下図のようになります。

 

トップページを作って、他の3ページにはトップからのリンクを貼ります。

・事業内容

・運営者情報

・お問い合わせ

こんな感じで作っていきましょう。

 

3.テーマ選び

作りたいイメージに合ったテーマを選びます。

wordpressでいうところの「テーマ」ってのは、簡単に言うとページデザインみたいなもんです。

テーマは色々な種類があり、ユーザーは好きなテーマを選択することによって、希望のページデザインを作り出すことができます。

また、テーマは一度作ったらおしまいではなく、飽きたら途中で変えることもできるので便利ですね。

ちなみにnaruのおススメは、こんな感じ。

  • 日本語に翻訳されている
  • 比較的シンプルで扱いやすい
  • WordPressの公式にあるテーマ

初心者にはこの3つを兼ね備えたテーマが良いと思います。o(・ω・´o)

****

私はGoogleでまず「WordPress  テーマ  日本語」 と検索し、上の3項目を満たすテーマを探しました。

するといろんなテーマが出てくるんですね。

その中で気になったのがこれ。「Sydney」ってテーマです。

 

今回は、このテーマを使うことにします。

テーマは管理者用ページから、「外観」「テーマ」で設定できます。

ちなみに、この「外観」「テーマ」 「新規追加」で、ネット上にある様々なテーマをインストールできます。

それでは「Sydney」を設定してみましょう。

まず、管理者用ページから、「外観」「テーマ」 「新規追加」で下記の画面を開きます。

 

お次に、下記の赤枠のところに、「Sydney」と入れて検索してみます。

 

「Sydney」の画面が出てきたら、「インストール」を押して、終わったら「有効化」を押しましょう。

 

これでテーマ「Sydney」の設定が完了しました。

今回はここまで。

 

 

WordPressでホームページを作りましょう

DesignOffice Macsのサイトはこちら。

 

こんにちはスタッフのnaruです。

今回はボスのお頼みでひょんなことからこのブログを書くことになってしまいました。(@_@;)

のんびりやっていければいいかなーくらいに思ってます。(・∀・*)ノ

さて、今回の内容ですが、WordPressでのホームページの作り方です。

WordPressってご存知ですか?

フリーソフトで無料、日本語解説もネット上に充実。

至れり尽くせりのCMSです。

ちなみにCMSとは、コンテンツマネジメントシステムの略で、 全ての操作を一括でできる総合開発環境のことです。
専門知識がなくても誰でも簡単にホームページの更新・管理できちゃうシステムなのです。ヽ(*´∇`)ノ

 

そいでもって、今回はこのWordPressでブログではなく、ホームページを作っちゃおうって企画です。

ブログを作るのはWordPressは得意なんですね。インストールしてそのまま表示すれば、自然とブログサイトが作れちゃいます。

ただ普通のホームページの場合、ブログのように自動で情報が流れるサイトは使い勝手がわるいですよね。

トップページの宣伝とか、会社情報とか、固定したページでいろんな人に見てもらいたい。

そこで、みなさんがよく目にする通常のホームページを、このWordPress作ってみようって訳です。

 

じゃあ、まずはインストールからって話なんですが、さすがにインストからはちょいと大変かなあ‥。

「WordPress インストール」で検索すると、いろんな方がインスト方法を書いているので、そちらを参照してください。

ちなみにロリポップってレンタルサーバーがあるんですが、そこでホームページを作れば、WordPressも簡単にインストールできます。お勧めです。

※レンタルサーバーってのは、ホームページなんかをネットに置くのに使う場所です。写真置いたり、動画置いたり、いろんなことに使えるスペースです。
レンタルサーバー屋さんから有料で借りましょう。

それじゃあ、ここからはWordPressをインストールして、管理画面をいじるところから始めましょう。

では目次。

***************************

  1. 検索エンジンで表示されないための設定
  2. ウェブサイトをどんな構成にするか考える
  3. テーマ選び
  4. 不必要なウィジェット(機能)を削除
  5. TOP、事業内容、運営者情報、お問い合わせページを作成

***************************

 

それじゃあ、1セクションづつやってみましょう。

まずはこれ。

1.検索エンジンで表示されないための設定

早速WordPressでサイト作りを始めたいところですが、初めに設定しておくと後々助かることがあります。

それはウェブサイトが完成するまで検索エンジンに発見できないようにする簡単な設定です。

検索エンジン:Yahoo!やGoogle、Bingなど。ホームページの情報を収集してデータベースに登録するシステム。

製作途中の中途半端な状態のサイトを検索エンジンに見つけられてしまうと、その状態を全世界に発信することになるので印象がわるくなってしまうのです。

まずは、WordPressの管理画面を開きましょう。

ここから「設定」 – 「表示設定」を開き、「検索エンジンでの表示」という項目の

「検索エンジンがサイトをインデックスしないようにする」という項目にチェックを入れて変更を保存してください。

これで制作途中の見られちゃイマイチのサイトを世界に発信しないで済みます。

ちなみに、このチェックボックスはウェブサイトが完成したら忘れずに外しましょう。

でないと今度はあなたの作ったサイトが、なかなか検索エンジンに掲載されないってことになります。

 

さて、どうでしょうか。結構簡単にできたんじゃないでしょうか。

それじゃあ、今回はここまで。続きは次回のお楽しみ。

 

 

ホームページの作り方 WordPress編

 

Design Office Macs のトップページはこちら。

こんにちは。MacsのIsodaです。

今回からホームページの作り方を簡単に書いていきたいと思っています。

まずはWordPressで作ってみましょう!!

*********************

ここのブログをメルマガ発行サイトの「まぐまぐ」より、
ほぼ月刊で発行しています。

「まぐまぐ」での発行タイトル
「ホームページ制作のここだけの話」

読者登録をして頂ければ、自動でお手元に届きます。
ご希望の方は下記よりご登録ください。