カテゴリーアーカイブ サイト制作

著者:wpmaster

古いデザインを改修したい!サイトリニューアル成功への考え方

ホームページリニューアルにあたって、一番の理由としてあげられやすいのが、

「古いデザインをなんとかしたい」

というご要望です。特に作ってから、5年以上たってくると、ホームページのデザインは大きく変わります。それは、流行りの部分もありますし、ホームページを構築するにあたって必要なcssの進化によるものもあります。

しかしそれだけの理由でホームページリニューアルをすることは意味があるのでしょうか。

本当に、あなたのホームページが集客につながっていないのは、「デザインが古いから?

今回は、ホームページリニューアルのデザイン面について考えていきたいと思います。

続きを読む

著者:wpmaster

オープンソースCMSツール「concrete5(コンクリート5)」をインストールする!

前回のWepageの記事が好評だったので今日もweb制作に役立ちそうなwebサービスを紹介していきますよ!今回は前から気になっていたconcrete5(コンクリート5)を使ってみました!

concrete5とは無料で使えるCMSツールで、すご〜くかんたんに言うとWordPressをイメージして頂けると分かりやすいかと思います。細かく説明していくと「使い方」や「概念」など全然違うものなんですが、どちらも一長一短ありよく比較されているようです。
まず今日はインストールの手順までをご紹介していきたいと思います。

concrete5ってどんなサービス?

concrete5 Japan 日本語公式サイト
http://concrete5-japan.org/
1
アメリカのPorlandLabs Inc.にて現在も開発が続けられているオープンソースCMSで全世界の大手企業や有名大学、研究機関で利用されています。日本ではconcrete5 Japan ユーザーグループによって日本語化作業が行われているそうで、なんともありがたいですね〜。現在ではバージョン5.7がリリースされており以前の5.6にくらべインターフェースなど大幅にバージョンアップされています。

早速concrete5をダウンロード

2-1024x763

さっそくconcrete5のダウンロードページからファイルをダウンロードしてみましょう!
せっかくなのでここでは最新のバージョン5.7をダウンロードしてみます。

 

3

ダウンロードが終わったらファイルを解凍して中身を確認!concrete5関連ファイル一式が入っていますね。無事にダウンロードできたらこのファイルを自分が使っているサーバにアップします。ファイルのアップはftpクライアントを使用して行いますが、私のおすすめはFileZillaです。FileZillaがいかにおすすめかはまた別の機会にお話しすることにします。

 

4

こんな感じでサーバにアップが完了しました。WordPressよりもファイル数が5倍くらい多く、アップするのに少々時間がかかりますが、焦らずお茶でも飲んだりテトリスをしたりしながら気長に待ちましょう。

データベースの作成やPHPの設定

無事にファイルのアップが完了したら次にデータベースの作成やMySQL、PHPの設定を行います。私はさくらインターネットを利用していたのでこちらの内容を参考にインストールを進めました。
http://concrete5-japan.org/help/5-6/install/hosting/sakura/

ロリポップなどでもconcrete5の設置方法の説明が乗っていますので自分が利用しているレンタルサーバーで確認してみてください。
https://lolipop.jp/manual/blog/concrete5/

正直、設定はそんなに難しくないと思いますがWordPressと比べると若干めんどくさい感じがしました(汗)

思わぬ落とし穴!!

5
データベースの作成も終えインストールを完了させる為に先ほどアップしたサーバにアクセルするとインストール可能かどうかをチェックしてくれます。問題が無ければ「インストールを続ける」を押してインストールを完了させます。

・・が、しかしエラーが出てきてインストールができない!うーん、困った。。。WordPressでは全く起きたことのない未知との遭遇。しかし、何の事は無くエラー内容もちゃんと表示されていて今回はパーミッションエラーだったらしく正しいパーミッションを設定することでインストールが無事にできました(笑)

人間不思議なもので未知の体験に遭遇すると、頭にマニュアルが無い為かどうしていいのかわからずパニクってしまうものです。。。

インストール完了

6
インストールが無事に完了すれば上記のような画面が表示されます。これでconcrete5インストール完了です!あー長かった。。インストールするだけで一日かかってしまいました。正直、途中でもうWordPressでいいと何度思った事か・・・

今回はインストールまでの手順をご紹介しましたが実際に使ってみるとWordPressと違って直感的にサイトを構築できるのでHTMLやCSSに詳しくなくてもサイトを構築できると思います。

この「直感的に」というところがconcrete5のミソで言葉ではとても説明しづらいのですが、とにかく使ってみないと体感できないかもしれません。実際に私が使ってみてconcrete5の良さやWordPressと比べてどうなの?という所を次回は記事にしたいと思います。

著者:wpmaster

Google日本語Webフォント Noto Sans Japanese を使う!

GoogleがWebフォントを提供していることは知っていたのですが今さらながら日本語フォントを提供していたことを知り早速入れてみたくなりました。
日本語のWebフォントは有料の物が多く、なかなか導入するのに躊躇してしまいますがそこは天下のgoogle様!無料ならばいつ使うの?「今でしょ!」ということで使ってみたいと思います。

Webフォントとは?

Webフォントを使うことでブラウザ上で任意のフォントを表示させることができます。
もう少し分かりやすく説明すると、これまではCSSでfont-familyを指定してもユーザーの環境にそのフォントがインストールされていない場合、制作者側が意図したフォントが表示されないという問題がありました。Webフォントを使うことでユーザー環境に依存せずにどんなフォントでも表示することができます。

Webフォントのメリット・デメリット

そんな最高に思えるWebフォントですが必ずしも良いことばかりではありません。
Webフォント導入のメリット・デメリットを挙げてみますと・・

メリット

もちろん先に述べたようにユーザー環境に依存せずにフォントが表示できる他に、通常のフォントにはないようなお洒落なフォントがたくさんあります。Webフォントを入れることでサイトがグッとお洒落になる事、間違い無し!

デメリット

その反面、有料のWebフォントを利用する場合は費用がかかりますし、サーバー上のフォントファイルを読み込むため、特に日本語フォントだと読み込みに時間がかかる場合があります。

日本語Webフォント Noto Sans Japanese を使ってみる

さて前置きが長くなりましたが、Webフォントについて一通りご紹介したところで早速、当サイトContentsBeatにも Noto Sans Japanese を入れてみたいと思います。

使い方はとても簡単で、googleが提供しているCSSファイルを@importで読み込みます。

@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

 

styleタグで直接読み込む方法もあり、HTMLの〜内で以下のコードを書きます。

<link rel="stylesheet" href="//fonts.googleapis.com/earlyaccess/notosansjapanese.css">

 

あとはCSSでNoto Sans Japaneseを適用させたい箇所にfont-familyを指定するだけで完了!下記、サンプルではbody全体にNoto Sans Japaneseを適用しています。

<style>
body {
  font-family: 'Noto Sans Japanese', sans-serif;
}
</style>

はい!設定はこれで完了です!とてもかんたんですね!

Noto Sans Japaneseを鑑賞

当サイトにも入れてみたのですが、正直どう変わったのか私もよくわかりません(汗)
そこでWindowsやmacでよく使われている他のフォントと比較してみましょう。

Noto Sans Japanese
ウチにとってこの9人は奇跡だったから
メイリオ
ウチにとってこの9人は奇跡だったから
游ゴシック
ウチにとってこの9人は奇跡だったから

どうでしょうか?更に「Noto Sans Japanese」はfont-weightも同時に指定が可能です。

.noto100 {font-weight:100;}  やり遂げたよ・・・最後まで!!
.noto200 {font-weight:200;} やり遂げたよ・・・最後まで!!
.noto300 {font-weight:300;} やり遂げたよ・・・最後まで!!
.noto400 {font-weight:400;} やり遂げたよ・・・最後まで!!
.noto500 {font-weight:500;} やり遂げたよ・・・最後まで!!
.noto600 {font-weight:600;} やり遂げたよ・・・最後まで!!
.noto700 {font-weight:700;} やり遂げたよ・・・最後まで!!
.noto800 {font-weight:800;} やり遂げたよ・・・最後まで!!
.noto900 {font-weight:900;} やり遂げたよ・・・最後まで!!

まとめ

いかがでしたか?Webフォントは回線速度などによっては表示速度が遅くなってしまうなどの問題もありますが、それ以上に魅力的な部分もたくさんありますので、導入の際は自分のサイトに入れる必要があるかどうか良く検討した上で使用するのがベストだと思います。

著者:wpmaster

ホームページ制作の助成金・補助金をうまく活用!

最近では各自治体などがホームページ制作の助成金・補助金を出しているのはご存知でしょうか?

ホームページやサイト

ホームページやサイトをしっかりと開発することはビジネスに大きな役目をするのはすでに多くの経営者様も認識をされていることと思います。

しかし、しっかりとしたホームページを作るのにはある程度の費用と時間が必要になり、そこのコストを考えるとなかなか手が出せないと考えている方も多いのではと思います。

その際にホームページ制作、Web制作の助成金を使えば、コストの部分が圧縮することができます。

最近ではGoogleのスマホ対応を急ぐ必要もあり、資金繰りをうまく行う経営者様の中にはこのホームページ制作の助成金を活用された方も多いのでは?

今回は、国・自治体が発表しているホームページ制作の助成金・補助金についてその活用方法とポイントをご紹介していきたいと思います。
続きを読む

著者:wpmaster

ホームページ作成サービス「Wepage(ウィーページ)」使ってみた!

今回もweb制作に役立ちそうなwebサービスを紹介していきます!
それはホームページ作成サービス「Wepage(ウィーページ)」というサービス。実際に使いながらご紹介していきたいと思います。

Wepageを運営するのはアイモバイル株式会社は、Webマーケティングや広告の会社としても有名であり、日本国内でも大手と言われるようなインターネット会社さんです。最近ではこういった制作サービスを様々出しているのも特徴です。

そこが出す無料のホームページ制作サービスということもあり、これは期待!

それでは、登録から公開、修正まで使っていきたいと思います。



Wepage(ウィーページ)ってどんなサービス?

1
Wepage(ウィーページ)は2015年6月15日にサービス開始したばかりで主に個人間のコミュニケーションを主としたホームページ作成サービスのようです。

それでは早速サイトを見ていきましょう!サイトTOPには「かんたん3ステップでウェブサイトが完成!」と書いてあり・・「サイト名を入力」「サイトURLを入力」「お好みのデザインを選択」と3ステップでサイトが出来ちゃうみたいです。
それでは早速、会員登録してみましょう!

2
メールアドレス、ユーザー名、パスワードを入力すると仮登録完了メールが送られてきます。
送られてきたメールのアカウント本登録URLをクリックすると会員登録完了です。
これでWepageを使う準備はできたみたいなので早速ログインしてみましょう!

Wepageで簡単3Stepホームページを始めよう

3
ログインするとTOPページの説明通り「サイト名」「サイトURL」「デザインを選択」とを入力するようですね、今回は「ショップ」をテーマに作ってみたいと思います。サイト名とサイトURLを入力し、デザインを選択します。

 

4
デザイン選択ではあらかじめジャンル別にテンプレートが用意されており、今回はショップサービスから「花屋」を選択してみたいと思います。ショップ系のテンプレート以外は趣味のサイトなど個人向けが多い気がします。

そのためみんなで運営する社会人サークルや同人サークルなどでの活用幅が広がるかと思います。

えっもうホームページ制作完了!?

5
あれ?これでサイトが完成しちゃったのかな(汗)とりあえずサイトを公開してみましょう!

 

6
うーん・・・なんとなく出来てる?ただ少し物足りない感じがするのでちょっとカスタマイズしてみましょう!カスタマイズは直感的なインターフェースでサイトを見ながら該当箇所を編集していきます。

Wepageの修正能力は!?編集の使い方

 

7
例えば「当店について」を編集したい場合、クリックするとそのままテキスト入力ができます。お店の紹介文などを入れていきましょう!!

 

8
テキストのほかに写真もかんたんに追加することができ、Wepageで用意されている共有素材を利用することができます。犬の写真とか入れてみましょうかね。犬が好きなので。。その他のページもサクサクとテキストを入れていきましょう。

Wepageを使ってみてのまとめ

9
http://wepage.com/kitaflower

はい、完成しました!テキストや写真の追加もサクサクとでき、レイアウトの変更もドラッグ&ドロップでできるのでHTMLやCSS、jsの知識がなくても簡単にオシャレなホームページがサクッと作れそうですね!

ただWordPressのようにテンプレートのカスタマイズはできないようなので、見た目やレイアウトにこだわる方はちょっと不向きかもしれません。。。

友人とリアルタイムで共同編集ができたり仲間内だけの公開機能などもあるようなのでサークルや趣味のサイトに向いていると思います。

他の無料系サービスと比較するとメリットとしては、

  1. 共同作業がやりやすい
  2. 限定公開というクローズが可能!
  3. 無料で10サイト・100ページまで作ることができる!

というところがあげられると思います。

まだ始まったばかりのサービスなのでどれくらい伸びていくかも期待ですね♪



また次回も「使ってみた!」シリーズご期待くださいね!

著者:wpmaster

話題の中小企業向けホームページ制作サービス「ペライチ」

最近Web業界の中で少しずつ名前を聞くようになってきたホームページ制作サービスがあります。
ペライチ
それは、
「ペライチ」
というWebサービスです。
ペライチという単語からわかるように、1枚だけのホームページが簡単に作れるというサービス。

このサイトでもJimdoやWixなど様々なホームページ制作サービスをご紹介していますが、この制作サービスはどこがいいのでしょうか?

中小企業向け・個人事業主向けというのも売りになっており、気になるサービスです。
そしてニッセイ・キャピタルさんが4900万円の資金を出すほど将来性があるのかという点も気になりました。

それでは今回は実際に作ってみながらほかのサービスと何がいいのかを考えていきたいと思います。

続きを読む

著者:wpmaster

ホームページ更新の負担を軽減!CMSを導入しよう!

自社のwebサイトを更新しようとしたもののホームページ制作会社に制作してもらったホームページが、がっちがちにHTMLやCSSで作られていて、多少HTMLの知識はあってもどこを触っていいのかわからない・・ちょっと文章を変えたいだけなのに制作会社にまたお願いしなければいけない・・こんな悩みを解決してくれるのがCMSと呼ばれるものになります。

CMS導入で楽々ホームページ更新

そもそもCMSとはコンテンツマネジメントシステムと呼ばれるもので、通常のホームページ(静的webサイト)に対して、複雑なHTMLやCSSの知識がなくてもwebサイトの更新などを管理画面などから簡単に更新できるツールです。
レンタルブログサービスを想像してもらえるとわかりやすいのですが、ブログの見た目をかわいいものやオシャレなものにしたり、ブログ記事を投稿したりするようなイメージでwebサイトを更新、管理できます。

代表的なCMSツール

CMSもブログサービスのように各社から色々な特徴を持ったCMSツールが提供されています。こちらの記事「JIMDO[ジンドゥー]とは?SEO面・集客面での効果について」でご紹介したJIMDOもCMSのひとつです。今回は他にも有名どころのWordPress、Movable Typeなど、それぞれの特徴をご紹介したいと思います。

WordPress

WordPress
私もお気に入りのCMSで導入しているwebサイトも多く、もっとも有名なCMSツールのひとつだと思います。

WordPressの主な特徴

  • 無料で使える
  • テーマやプラグインの種類が多い
  • 利用者が多いので困ったときに何かと便利

WordPressというツールは無料で配布されているので利用するのに料金はかかりません!テーマはサイトのデザインを決めるテンプレートのようなもので種類もたくさんある為、お気に入りのデザインがきっとみつかるはずです。プラグインはサイトをパワーアップさせる機能で、例えばサイトの表示速度は早くさせたり、スパム対策など、こちらも種類が豊富にそろっています。
WordPressはカスタマイズ性も高く、企業などのホームページにも多く導入されています。また利用者が多く、いろいろな情報を掲載してくれているのが利用しやすいポイントでもあります。

Movable Type

Movable Type
こちらも有名なCMSでシックス・アパート社が提供するブログ形式でホームページを作成できるツールです。

Movable Typeの主な特徴

  • 有料
  • メーカーサポートが受けられる
  • サーバ負荷が低い

Movable TypeはWordPressとよく比較されるCMSでまず大きな違いが有料ということです。現在はクラウド型で月額5,000円〜、ソフトウェア版で90,000円とお金がかかります。しかし!Movable Typeの大きなメリットはメーカーサポートが受けられるということです。WordPressは何かトラブった時に、自分でこつこつと調べたりコミュニティを探して質問したりと時間と労力がとてもかかります。Movable Typeは販売元のサポートが受けられるので的確に問題を解決することができると思います。
また静的生成というコンテンツ生成の仕組みでサーバ負荷を低くし、かんたんに言うと突然いっぱいアクセスが増えてもwebサイトが落ちる心配が少ないといった特徴もあります。

concrete5

concreat5
concete5はアメリカ生まれのCMSでWordPressやMovable Typeに比べると少しマイナーですが、こちらのconcrete5も多く利用されています。

concete5の主な特徴

  • 直感的な操作でできる
  • 企業のwebサイトに適している
  • 最初から機能が揃っている

WordPressやMovable Typeに比べwebサイトのデザインやレイアウトの変更などが管理画面から直感的な操作で行えるのが大きな特徴だと思います。説明書を読まなくても操作できる、といった感じですかね?また最近では企業などのwebサイトにも多く採用されていて、というのも例えば写真をたくさんみせるスライドショーや、今となっては必須な所在地情報に掲載するGoogle Mapの埋め込み機能、他にもお問い合わせフォームなどが最初から備わっているので、WordPressのようにプラグインを探して入れたりしなくてもある程度のことはこれひとつで出来てしまいます。

まとめ

今回は有名なCMSツールの特徴をご紹介いたしましたが、それぞれのCMSツールには一長一短があり、どれが一番良いかはケースバイケースです。私自身もそれぞれのサイトの特徴に合わせて使い分けるようにしています。これからCMSツールの導入を検討されていて、どれを選んでいいかわからない、CMSツールの導入の仕方などお困りでしたら、お気軽にお問い合わせくださいませ。

著者:wpmaster

レスポンシブデザインが簡単にできるBootstrap 〜入門編〜

みなさん「Bootstrap」使ったことありますか?

Web制作者はもちろんのことWebデザイン初心者でも簡単にキレイなサイトがつくれるフレームワーク「Bootstrap」をご紹介したいと思います。

いまでは、スマホ検索がPCでの検索を超えており益々レスポンシブデザインの重要性は高まっています。

Bootstrapのような便利なサービスを利用して、しっかりとレスポンシブ対応をしていきましょう。

 

そもそも「フレームワーク」とは?

骨組み、構造の意味。一般的には、システム構築するための基盤、あるいはサービスを提供するための基盤となるソフトウェアのこと。
引用:コトバンク

フレームワークで検索してみるとこんな文章が出てきますが、ここで紹介するフレームワークとは、Webサイトを制作するのに必要なレイアウトや、そこに入れるボタンなどのパーツを最初から準備してくれるもをフレームワークと呼びます。

Bootstrapとは?

Bootstrapとはフレームワークの一種で、自分でCSSをカリカリ書かなくてもBootstrapが用意してくれたCSSファイルにスタイルが定義されているので、それを読み込むだけで、Web制作初心者でもかんたんにキレイなサイトがつくれたる!といった仕組みになっています。
ちなみにBootstrapはあの有名なTwitter社で作られたもので、以前はTwitter Bootstrapという名前でした。

Bootstrapの使い方~入門編~

まずはBootstrapのサイトにアクセスして触ってみましょう!サイトにアクセスするとこんな感じです。

スクリーンショット 2015-10-20 1.30.14

画面の真ん中にある「Download Bootstrap」を押すとこんな画面になります。

スクリーンショット 2015-10-20 1.29.43

Downloadリストから一番左のBootstrapをダウンロードしましょう!そうするとbootstrap-3.3.5-dist.zipがダウンロードできるので適当な場所に解凍します。

解凍すると中にそれぞれCSS、fonts、jsフォルダがあり、CSSフォルダ内には既に定義されたcssファイルが入っています。

先ほどのページを更にスクロールするとBasic templateという項目があります。

スクリーンショット 2015-10-20 1.31.38

こちらにBootstrapをすぐに使うためのHTMLコードが記載されているので、こちらをそのままindex.htmlにコピーしHTMLファイルとして使用します。

スクリーンショット 2015-10-20 2.04.50

index.htmlを開くとこのような表示になりました!これでBootstrapを使う準備ができました!

Bootstrapを使うとキレイなサイトはもちろんのことレスポンシブデザインなどのホームページ制作もかんたんに作ることができます。

続きは実践編にてご説明いたします。

著者:wpmaster

JIMDO[ジンドゥー]とは?SEO面・集客面での効果について

Jimdo SEO

最近テレビCMなどを初めて、様々な方の目に留まるようになってきたJIMDO

テレビCMをみて、えっ無料でホームページを作れちゃうの?

と気になっている方も多いのではないでしょうか。

しかしJIMDO[ジンドゥー]の歴史は大変長く、

SEO会社やホームページ制作会社泣かせのサービスとして昔から知られています。

おっそんな会社を泣かせるほどいいサービスなのか!!

よし、初めて見よう!

と思った方は、ちょい待った!
続きを読む

著者:wpmaster

今さら聞けない!WordPressの使い方 〜初心者編〜

みなさんブログは既にご存知かと思いますが、どのサービスを利用していますか?メジャーな所だとアメーバブログやライブドアブログなど色々なブログサービスがありますね。しかしこのページを見ているということはご自身でブログを持とうと考えている方もいらっしゃると思います。そこで今回はWordPressというブログシステムをご紹介すると共に、使い方やメリット・デメリットなどを解説いたします。

そもそもWordPressって?

はい、お答えします。簡単に言うとWordPressはオープンソースのブログシステムのソフトウェアでサーバーにインストールする事で利用できるCMS(コンテンツマネジメントシステム)になります。
と、他のサイトでよく書いてありますが、噛み砕いて言うとタダで自分のブログ(またはサイト)が作れますよーと言う事です。※タダと言ってもレンタルサーバー代はかかりますが・・

b794029c49692a72630dd626568cb8c0_s

アメブロやライブドアブログと何が違うの?

アメーバブログやライブドアブログは利用者も多く様々な機能がついていて、とても使いやすいと思います。しかし、よく考えてみてください。これらはあくまでもアメーバやライブドアのブログサービスをレンタルしているのです。
例えば3年、4年と書き溜めた記事が明日もある保証はどこにもありませんし、ある日、突然サービス終了・・なんてことも100%無いとは言い切れません。その点、WordPressは自分でバックアップも取れるので大切な資産(記事)を守ることができます。

WordPressを使うメリットは?

まず初心者でも比較的導入しやすく扱いやすいという点があります。よくMovable Type(MT)と比較されますが、WordPressの方が利用者も多く初心者から上級者まで幅広く利用されています。
テーマやプラグインと言った簡単な設定をするだけでキレイなデザインのブログが作成できたり、専門知識がないとなかなか難しいSEOにも強いと言われています。
またブログ記事を投稿する際もアメブロやライブドアブログと変わらず簡単に投稿することが可能です。

逆にデメリットはないの?

なきにしもあらず、と言った所でしょうか。先に述べた通り自分でレンタルサーバーを借りる必要があります。また多少なりともWebの情報や知識が必要になります。例えばHTMLやCSS、PHPの知識がない方には少しハードルが高いかもしれません。
しかし、悩む必要はありません。わからなければわかる人にお願いすればいいだけのことです。

まずはWordPressを使ってみよう!

習うより慣れろ!まずはWordPressを使ってみましょう。WordPressを使う前にレンタルサーバーを準備しておく必要があります。レンタルサーバーはどこでも良いという訳ではなく、WordPressが利用可能なレンタルサーバーでなければいけません。最近ですとWordPressを簡単に利用できるように設定のしてあるレンタルサーバーも多いようです。

レンタルサーバーの準備が出来たらwordpress.org 日本公式ページから最新のWordPressファイル一式をダウンロードします。ダウンロードしたファイルを解凍したらサーバー上にフォルダをアップロードします。

つづいて・・と、このようにWordPressは初期設定に少々手間がかかるので挫折してしまう方も多いのではないでしょうか?正直、辛いのは最初だけです。設定さえちゃんと行えれば普通のブログと変わりません。むしろ使い勝手は断然WordPressの方がよいです。

ここまで読んで頂いて興味を持たれた方は是非、WordPress導入にチャレンジしてみてください。次回は導入方法について詳しく説明していきます。