合同会社ひめぽーと は、愛媛の店舗、生産者様のホームページ作成・制作・管理、ネットショップ作成・制作・管理、パソコン関連サポートなど、バックアップ致します。

カテゴリー: ホームページ作成

掲載日: / 更新日:
カテゴリー: ホームページ作成

ホームページを作成するプラットホームの選び方


専門の担当者のいない企業・店舗のホームページについて

専門の担当者をアサインできない企業・店舗様が自社や自社製品のホームページを構築する場合、外注するのが最も確実な方法ですが、費用削減、人材育成など様々な理由であえて、自社内で作成する場合のどのようにすれば良いでしょうか?

目的を明確にしましょう。

何のためにホームページを作成しようとしているのか明確にして、ゴールを明確にしましょう。

  • 会社の名刺・看板として
  • 新製品の広告塔として
  • 人材募集・協業者募集の案内

別に広告を出す等、誘導は別でパンフレット的なレベルであれば、不慣れな担当者でも実現できる手段はあります。

それ単独で集客を考えているなら、かなりハードルが高くなり実現性は低くなります。但し、店舗販売のローカルビジネスや、極めて特殊で競合他社がいないビジネスであれば、実現性は高くなります。

社内で実現性が低い目的・ゴールの場合は、教育期間・費用などトータル的に検討して、外注をご検討されるのが良いでしょう。外注する場合も対応範囲で2万円台から数百万(本格的?ホームページの場合、60万~150万程度)の費用と様々ですので、管理する人件費・工数を考慮すると外注に委託する方が費用を抑えられるかもしれません。(内容にもよりますが、弊社の場合だと作成費+年間のサーバレンタル費・管理費を含めても10万円前後だったりします。)

お気軽にお問合せ下さい
(ご要望の内容如何で、愛媛県以外の事業者様も対応させて頂きます。)

予算と期間は?

ホームページを作成するには公開するための場所が必要です。契約プロバイダーでホームページが作成できる場合にはそれを利用する方法もありますが、使用できるToolが自由度がなかったり、営利目的で使用は制限されていて、独自ドメインの使用や広告の非表示には有料サービスの利用が必要だったりします。

最近では安価なレンタルサーバーや格安でホームページを立ち上げられるサービスがあり、ホームページ専門のサービスを利用する方がより本格的なホームページは作成しやすいと思います。人件費を除き、作成費・維持費を0円とするならば広告が控えめで見栄えも良いAmeba Owndがおススメです。(独自ドメインは将来的な会社の財産となります。年間数千円なので必ず取得しましょう。)

(ドメイン取得は、こちら ↓)

但し、いくつか単独では機能不足(問合せフォーマットがないなど)もありますので、他のサービスを利用して補うテクニックが必要だったりはします。予めビジュアル素材(写真など)や記載すべき内容が明確であれば、作成期間も極めて短期間で公開できるでしょう。(事前準備が十分できていれば、1日で公開も十分可能です。)

月々1,000円前後であれば、選択肢は相当に広がります。Wix(無料サービスもありますが、本格的利用には有料サービスが必要)やGoopeなど初心者でもホームページの作成が容易なサービスが利用できます。WiXはレゴブロックのようにパーツを並べて自由度に構築できます(別記事で書きましたが、頻繁に保存しましょう。折角の苦労が一瞬で消えますので)。飲食店などローカルビジネスにはGoope(グーペ)がおススメです。

グーペの場合、ページを追加したいなどの場合に階層メニューが作成できないなど窮屈に感じる場合があります。

そんな場合は、低価格のレンタルサーバを使ってbaserCMS(4.0以降)で構築されると本格的なホームページが意外に簡単に作成できます。baserCMSは日本語のコーポレートサイト用に開発されたCMSですので、大変日本語にフレンドリーで4.0になって大変洗練されていますし、比較的軽いので月額100円の超低価格のレンタルサーバーでも運用できます(SSLが使用できない、高トラフィックは不可など制限はあります。)ので、リスクも低いといえます。セキュリティ対策ももともと十分考慮されている上に世界的にはシェアが低い(日本語専用なので)こともありターゲットとされる可能性も低く比較的メンテナンスも楽だと思います。

◆とにかく安い。時間帯で重い場合もありますが、連続運用の信頼性は十分

◆比較的安価で安定した性能が好評で、シマンテックグループのSSL証明書【0円】

◆お値段は少し上がりますが、安定した高性能が好評

CMSといえば、Wordpressもお手軽で、テーマの範囲でとりあえず立ち上げるだけであれば、担当者不在でも不可能ではありません。しかし、セキュリティ対策を怠ることができないので、しっかり面倒を見る必要があることと、さすがに100円サーバー(Lolipopのエコノミープラン100円プランではそもそも動きません。)では重く実用的ではなく※、ある程度の快適な運用には経験と知識が必要となりますので、専任者がいない場合は、お勧めできません。

※ レンタル費が高いサーバー程、高速・高機能ではありません。遅いから高いサーバーへ移設しても必ずしも早くはなりません。(もちろん早くなる場合もありますが、ホームページから無駄を省いたり、CDNを利用するなど高速化する工夫をされる方が効果的です。)実はこのサイトも「PageSpeed Insights」の評価が50/100(立ち上げた直後はもっと良いスコアだった(-_-;))を切るほどになっていましたが、自作テーマに変更し、無駄を省いて、キャッシュや圧縮を利用することで85/100、サーバーのレスポンスが良い時には90 overまでに改善しました。(ちなみにフレームワークとフォント以外はCDNは使用していません….現在は、画像もCDN使用)

このあたりのWordpressサイトの高速化については、別途記載したいと思います。

掲載日: / 更新日:
カテゴリー: ホームページ作成

本サイトテーマで使用している超軽量なCSSフレームワーク Pure について


CSSフレームワークpureの概要

CSSフレームワークといえば、Bootstrapがまず思い浮かびますが、ご存知の通り他にも沢山の種類が存在します。その中でもpureはかなりサイズが小さく、その割に必要なフレームワークはしっかり押さえていて、使いやすいフレームワークになっています。

 

PUREの機能概要

BASE

Normalize.cssがベースになっていますので、別にリセットの用意は必要なくブラウザの違いによる表示の差分も最小限になるようにできています。

Hiding Elements

class=”hidden”; /* display: none !important;  */

 

Responsive Images

class=”pure-img”;/* responsive imge */

example:

<img src="/wp-content/uploads/2017/09/a0001_000375_m.jpg" alt="クリスマスの並木道" class="pure-img" />

 

クリスマスの並木道

FORMS

各種タイプのFormが予め設定されていて、「class=”pure-form”」と指定するだけでformが使用できます。細かいデザイン設定する場合は、デザイン設定用のclassを合わせて予め設定して、そちらでアレンジするだけです。

.pure-form input[type=”text”],
.pure-form input[type=”password”],
.pure-form input[type=”email”],
.pure-form input[type=”url”],
.pure-form input[type=”date”],
.pure-form input[type=”month”],
.pure-form input[type=”time”],
.pure-form input[type=”datetime”],
.pure-form input[type=”datetime-local”],
.pure-form input[type=”week”],
.pure-form input[type=”number”],
.pure-form input[type=”search”],
.pure-form input[type=”tel”],
.pure-form input[type=”color”],
.pure-form select,
.pure-form textarea 

コンパクトな 1 lineの入力フォームならこんな感じで簡単に記述できます。(「pure-button*」は後程記述する)

<form class="pure-form">
<fieldset>
<legend>A compact inline form/ログインフォーム</legend>

<input type="email" placeholder="Email">
<input type="password" placeholder="Password">

<label for="remember">
<input id="remember" type="checkbox"> 記憶する
</label>

<button type="submit" class="pure-button pure-button-primary">サインイン</button>
</fieldset>
</form>

 

 

A compact inline form/ログインフォーム

ラベル付き入力BOXを表示するようなFormの場合、calssに’pure-form-stacked’を追加します。

.pure-form selectがdefaultで、2.25emに設定されていますが、高さが足りないようなので、調整が必要かもしれません。ここでは、2.7emとしています。

こんな具合に

<style type="text/css"><!--
.pure-form select {height:2.7em;}
--></style>

<form class="pure-form pure-form-stacked">
<fieldset>
<legend>A Stacked Form/ラベル付きアカウント入力フォーム</legend>

<label for="email">Email</label>
<input id="email" type="email" placeholder="Email">
<span class="pure-form-message"> 必須  </span>

<label for="password">Password</label>
<input id="password" type="password" placeholder="Password">

<label for="state">都道府県</label>
<select id="state">
<option>愛媛県</option>
<option>高知県</option>
<option>香川県</option>
<option>徳島県</option> 
</select>

<label for="remember" class="pure-checkbox">
<input id="remember" type="checkbox"> 記憶する</label>

<button type="submit" class="pure-button pure-button-primary">ログイン</button>
</fieldset>
</form>

 

A Stacked Form/ラベル付きアカウント入力フォーム

必須

入力BOX表示位置を揃えたい場合は、calssに’pure-form-aligned’を追加します。そして、ラベルと入力フォームを’ class=”pure-control-group” ‘で括ります。

こんな具合に

<form class="pure-form pure-form-aligned">
<fieldset>
<div class="pure-control-group">
<label for="name">Username</label>
<input id="name" type="text" placeholder="Username">
<span class="pure-form-message-inline">必須項目</span>
</div>

<div class="pure-control-group">
<label for="password">Password</label>
<input id="password" type="password" placeholder="Password">
</div>

<div class="pure-control-group">
<label for="email">Email Address</label>
<input id="email" type="email" placeholder="Email Address">
</div>

<div class="pure-control-group">
<label for="foo">任意のラベル</label>
<input id="foo" type="text" placeholder="Enter something here...">
</div>

<div class="pure-controls">
<label for="cb" class="pure-checkbox">
<input id="cb" type="checkbox">利用規約を確認しました
</label>

<button type="submit" class="pure-button pure-button-primary">送信</button>
</div>
</fieldset>
</form>

 

必須項目

‘Pure Responsive Grid’を併用することで、レスポンシブデザインに対応した入力フォームとなります。

このような具合に

<form class="pure-form pure-form-stacked">
<fieldset>
<legend>レシポンシブ 入力フォーム 用例</legend>
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-3"><label for="last-name">苗字</label> <input id="last-name" class="pure-u-23-24" type="text" /></div>
<div class="pure-u-1 pure-u-md-1-3"><label for="first-name">名前</label> <input id="first-name" class="pure-u-23-24" type="text" /></div>
<div class="pure-u-1 pure-u-md-1-3"><label for="email">E-Mail</label> <input id="email" class="pure-u-23-24" required="" type="email" /></div>
<div class="pure-u-1 pure-u-md-1-3"><label for="city">市町村</label> <input id="city" class="pure-u-23-24" type="text" /></div>
<div class="pure-u-1 pure-u-md-1-3"><label for="state">都道府県</label><select id="state" class="pure-input-1-2">
<option>愛媛県</option>
<option>高知県</option>
<option>香川県</option>
<option>徳島県</option> 
</select></div>
</div>
<label class="pure-checkbox" for="terms"> <input id="terms" type="checkbox" /> 利用規約を読みました </label> <button class="pure-button pure-button-primary" type="submit">送信</button></fieldset>
</form>

 

レシポンシブ 入力フォーム 用例

テキストベースの入力フォームのセットを’ class=”pure-group”‘で括ることで、サインアップフォームやモバイルデバイスに適した入力フォームとなります。

このような具合に

<form class="pure-form">
<fieldset class="pure-group">
<input type="text" class="pure-input-1-2" placeholder="Username">
<input type="text" class="pure-input-1-2" placeholder="Password">
<input type="email" class="pure-input-1-2" placeholder="Email">
</fieldset>

<fieldset class="pure-group">
<input type="text" class="pure-input-1-2" placeholder="A title">
<textarea class="pure-input-1-2" placeholder="Textareas work too"></textarea>
</fieldset>

<button type="submit" class="pure-button pure-input-1-2 pure-button-primary">Sign in</button>
</form>

 

To be continue  

掲載日: / 更新日:
カテゴリー: ホームページ作成

WordPressで最新記事のリンクバナーを設置する。


WordPressで最新記事へのリンクバナーを付ける

WordPressで最新記事を表示するのにphpで簡単に実現でき、その方法を紹介したページはたくさんあります。 しかし、サイドバナーなどで、最新記事への直リンクバナーを作りたい場合は、WidgetのTxtボックスでは、通常PHPは動作しませんから、テーマに手を加えるか、プラグインを利用することになろうかと思います。 しかし、直リンクバナーにそのまま実現してくれるプラグインは見つかりません (あるのかもしれませんが、見つけられませんでした)。 そうなると、自作プラグインもありなのですが、ここではお手軽に枯れたプラグインを利用させて頂くことにしました。 「Latest Posts Template Widget」 日本人の方が作られたもののようですが、大変シンプルなので、これをお手軽改造させて頂きました。 プラグインをインストールして、プラグインの編集で、Widget.phpを開き、 タイトル部分と<ul><li>の部分を削除しちゃいます。

<?php echo $args[‘before_widget’]; ?>

<?php foreach ( $posts_latest as $post ): setup_postdata( $post ); ?>

<?php echo preg_replace_callback( ‘/\{(.+?)\}/’, array( $this, ‘_parse_template’ ), $instance[‘template’] ); ?>

<?php endforeach; wp_reset_postdata(); ?>

<?php echo $args[‘after_widget’]; ?>

こんな感じにしちゃう(抜粋)と ウィジェットに追加して、「<div class=”yyyyyyy”><a href={permalink}>The Least xxxxxxxx</a></div>」 表示数1とすれば、最新記事へのバナーの完成です。 .yyyyyy { 必要なCSS } で装飾すれば、様々なデザインにも対応できます。   追伸: まじめに改造するなら、本来の使用方法にも対応できるように、 タイトル入力がある場合とない場合で処理を分けるようにすると良いかと思います。 タイトルが空白の場合は、タイトル枠を表示しない、 もしくは、タイトルと要素を個別にcssコントロールできるようにして、 あとはcssでコントロールでも良いかもしれません。

掲載日: / 更新日:
カテゴリー: ホームページ作成

WordPressのローカル開発環境を簡単に構築する方法


WordPressのローカル開発環境を簡単に構築

WordPressのホームページを作成したり、テーマ作成も実際のレンタルサーバー上でできなくもないですが、運用中や移設準備中だったりすると、ダーミーサーバーを構築して試したりとなります。 そんな時にやっぱりローカルで適用予定のサーバー上と同じことができれば、リスクなしにいろいろトライでき、ほぼ完全な形でサーバー上で公開できます。 ローカルでWordpressを動かすとなると様々な先人たちが比較的簡単に構築できるツールを公開して下さっていますが、ある程度専門的な知識を要求されたり、サーバーごとのリビジョン違いなどへの対応となるとなかなか難しいと思います。最近では、展開するだけでサーバーが構築できるinstantwordpressが登場してお手軽に試せますが、残念ながら、これはリビジョンが固定となり、2017年8月時点でphpは、最新の7ではありません。

そこで、おススメなのは、Windows版は最近リリースされたばかりですが、「Local by Flywheel」。これがなかなかの優れものです。このソフトをインストールして構築したいサーバー名と環境を選べば自動でローカルサーバーを構築してくれます。複数構築ができるので、サーバーごとに構築することで、いつでもネット上のサーバーと同じことを試すことが可能となります。 ホームページ作成・修正にあたり、ローカル画像・ファイルは、(書き換えてくれるようですが、念のため)相対パスで記載することだけ注意しておけば、Wordpressのプラグイン「All-in-One WP Migration」を使って、Export/Importで簡単にローカル環境とインターネット環境が相互に適用できます。  

掲載日: / 更新日:
カテゴリー: ホームページ作成

ロリポップ レンタルサーバーが無料の独自SSLを提供開始


ロリポップが無料の独自SSLを提供開始!

待ってました!
実は、最近重くなったので、サーバーごと引越しを検討していました。どういうわけか、動作が重かったのも急に改善されたようで、高速を謳っているZ.comと性能差は感じないレベルまで回復しています。暫くは引越しは見送りとなりそうです。

いつもロリポップ!をご利用いただき、ありがとうございます。
ロリポップ!では本日より、無料独自SSLの提供を開始いたしました!
それを記念して、10日間限定の【全プラン初期費用無料キャンペーン】を開催中です。
詳細はこちらをご確認ください。
訪問者も安心できるホームページをお得につくるチャンスです♪

「Let’s Encrypt」なので、個別認証のSSL認証ではありませんが、手軽にSSL化できるのは大変ありがたい。

問合せページや、現時点でのSSL差別化の動きには十分なSSL化が無料でできるのは大変うれしい。他社も無料・格安提供を始めているのでいずれはとは思ってましたが….

早速、主なページや、お客様のページもSSL設定をしました。

ん~、完全に対応させるには、最低限以下の設定が必要なので、まだ完全に安全表示は一部だけ.....

SSL化にあたりやること

  • WordPressの設定(WordPress アドレス (URL)、サイトアドレス (URL))の変更。変更すると一度Logoutさせられるが、慌てない。ただ、ミス修正は直接変更が必要になるかもしれないので、DBの修正箇所くらいは事前に確認しておくと安心です。
  • 301の対応、SEO対策ですね。

RewriteEngine On RewriteBase /
RewriteCond %{HTTP_HOST} ^himeport.co.jp
RewriteRule ^(.*)$ https\:\/\/www\.himeport\.co\.jp\/$1 [R=301,L]
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{SERVER_NAME}%{REQUEST_URI} [R=301,L]

こんな感じ、下の2行が今回追加。これで、httpでアクセスが、httpsに

  • 画像やリンクで、httpsでないものは、httpsへ変更。

(ほとんどの画像はあらかじめ相対アドレスにしていたつもりですが、漏れがいっぱい。外部リンクはダメなのがいっぱいなのでどうするか検討中。)

まぁ、こんなところで、最低限、問合せページと出来れば導入ページはグリーン▲(保護された通信・安全な接続)にして体裁を整えましょう。

ECショップ・モールも、BASE、Yahoo、楽天、ポンパレとSSL化しています(Amazonは以前から)。この流れ乗り遅れると気が付けば訪問者が1/10なんてことになるかも

同じドメインでメールを使わないWordpressだけなら、SSL化100円のこちらもおススメです。Wordpressで必要なことはすべて料金内で設定済み、あとは中身を作るだけ。メールも使うなら、Z.comのレンタルサーバーも契約してこちらでメールを使用することになります。このレンタルサーバーは企業向けクラウドサーバーの延長線の感じで、こちらでWordpressなど様々なAppを動作させることもできますが、すべて自身で設定が必要となりますので、やや専門的な知識が要求されます(ロリポップの自動で7世代バックアップが当たり前となった私的にはバックアップが一番問題で、当面はロリポップへ定期バックアップで運用予定。将来的には事務所のファイルサーバーに….)

掲載日: / 更新日:
カテゴリー: ホームページ作成

ホームページの管理会社変更する場合の確認事項と注意点

ビックリ価格で、素敵なホームページを持つなら、ひめぽーと

ホームページの管理会社変更について

ホームページやネットショップの運用管理を外部の会社に委託されている場合に、何らかの理由で、委託先を変更したいとき…..

  1. 契約書を確認しましょう。(重要

注意したいのは、解約条件と著作権です。万が一、作成物(ホームページ・ショップ)の著作権が制作会社(管理会社)にある場合は、現状のデータの利用は出来ないので新規に作成するか、著作権を持つ会社から譲渡(購入?)が必要になります。譲渡の場合は、もめない為に念書を交わすのが良いでしょう。あと、解約後のデータ、アカウントなどを破棄する念書も交わすと安心でしょう。

  1. ドメインの所有者を確認しましょう。(重要

もし所有者が制作会社(管理会社)である場合は、譲渡してもらうか、ドメインだけ管理してもらうことになります。基本的には、譲渡で、ドメイン管理会社(お名前ドットコムやムームードメイン)のアカウントと支払いは自身で行うか、新しい管理会社に委託するのが良いでしょう。

  1. ホームページのあるサーバーの所在・権利者を確認しましょう。(著作権がある場合)

制作会社(管理会社)の共有サーバー上にある場合は、新しいサーバーへのデータ移管が必要となりますので、現状のデータを入手しましょう。具体的に何が必要かは、新しい管理会社に事前に相談するのが良いでしょう。

単独レンタルサーバーの場合は、「契約サービスの譲渡」を行うことで、新規にサーバーを構築しないで、現状のままで管理会社だけを変更できる場合があります。新しい管理会社に事前に相談したうえで現状の管理会社に譲渡・移管を交渉するのが良いでしょう。

具体的な解約、管理会社の変更を現行の管理会社に伝えるのは、事前に変更先の管理会社と相談の上で伝えるようにしましょう。ドメイン・データともに新規に作成する場合はこの限りではありませんが、ある程度、認知度があるドメインであれば、極力ドメインは変えない(スラッグも極力合わせる)ようにするのが良いでしょう。

更新が遅いなどの理由で管理会社を変更される場合で、現行ページがHTMLでダイレクトに記述されているのであれば、変更の機に現状の資源を有効活用しつつ更新がやりやすいCMS(content management system)を導入することも検討されると良いでしょう。

掲載日: / 更新日:
カテゴリー: ホームページ作成

無料ホームページ作成サービス Ameba Owndを使ってみました


以下の条件を満たす、ホームページ作成サービスということで、「Ameba Ownd」を使ってみました。

作成したサンプルサイトはこちら

◇条件

  • 初期費用・月額無料
  • 商用利用可
  • ネットショップを設置できる
  • スマホ対応
  • 余分な広告の掲載が少ない
  • 独自ドメインが利用可能(設定が無料)

テンプレートをベースに機能ブロックを貼り付ける手順で作成していきますが、WIXほどの自由度はありません。

ただ、htmlも挿入可能ですので、アフィリエイト広告なのども簡単に入れられます。

使ってみて、以下が不足と感じました。

◇不足

  • 問合せのパーツがない
  • ショップ機能は最低限で、送料は固定となる。(=BASEで基本にAppカテゴリ管理追加)

BASEに入ってBASE App送料詳細設定を追加することで、地域別送料も設定できました。

  • Owndの広告が最上部とPoweredに入る
  • 段組みができない(大きなレイアウトは、テンプレートで決まってしまう。)
  • 独自ドメインでは、SSL対応できなくなる(BASEショップは出来る。)
  • すでにあるBASEとアカウントは共有できるが、商品は共有できない(NG

ショップ作成時にすでにOpenしているBASEショップのアカウントで連携してしまいました。すでに発売中の商品がOwnd側で見えないので問合せした結果、不具合が発生する可能性があるので、既存のショップとは別に新規アカウントで連携してくださいとのことでした。すでにBASEショップをお持ちの方は注意が必要です。

優れていると感じたのは、

◇特徴

  • 標準でAMP対応(但し、独自ドメインには未対応の模様)
  • SSL対応(Owndドメインの場合)
  • 簡単にスタイリッシュなページができる
  • BASEの商品ページより詳細な商品説明が作れる

 

結論:

ショップ機能は、詳細商品説明文はBASEに対して優れていますが、商品検索機能がないので、商品数が一画面に収まる程度の場合にしか実用的ではありません。

受注案件で作成した 農業法人 株式会社 FFT様のホームページ 赤の元気

上下とBlogページの下側に広告がありますが、見栄えも機能も必要十分な出来栄えと思います。純粋なホームページや商品数が1ページに収まるショップを構築する場合の事例となります。

先に記載したようにAmeba Owndでは、カテゴリ・商品検索が標準の機能としてはないので、カテゴリ・商品数が多い場合は、BASEが良いでしょう。また、ホームページとショップを二つ運用するのは、手間がどうしても増えるので、現状では、比較的ホームページ的な要素を盛り込みやすいテンプレート(例えば、「DEPARTMENT」)を使いBASEで構築するのが良いと思います。商品説明が弱い部分は集客対策も兼ねてBASEのBlogで補うことで対策できる(もともとそういう意図の作りになっている)と思います。

掲載日: / 更新日:
カテゴリー: ホームページ作成

無料で綺麗なホームページが作れるWiXを使ってみました


WiXは、無料で簡単にきれいなホームページができるそうです。

ん、確かに簡単にきれいなホームページができます。

作り方は簡単

  1. アカウントを作る
  2. テンプレートを選ぶ
  3. テンプレートに中身を入れていく
  4. 配置・サイズはつまんで簡単に変更
  5. 足らなコンテンツパーツは、アプリ追加で簡単
  6. 全部中身を埋めたら公開

作成にあたり、絶対やってないと後悔するのは、編集する度にセーブすること。勝手に再読み込みで編集途中のデータがロストすることが平気で発生します。実は、私はほぼ完成していたのですが、これで完成させる意思を消失しまいました。

WiXは、確かに簡単にきれいで、まるでデザイナーズのホームページができますが、余程のこだわりがない方でないと無料では使えないように思います。自前の独自ドメインを使用する場合でも416円/月が必要となり、これではWiXの広告が表示されます。個人利用でもコンボ814円/月が最低ラインのように感じます。

簡単で、きれいにできること以外にネットショップ機能が使えるのもWiXの魅力と思います。eコマース1641円/月が必要となりますが、完全にホームページとショップの一体化ができますので、格安感を感じます。

海外を対象としたページつくりには、外せないサービスと思います。ただ、海外のサービスですし、日本語のサンプルページでも少々重い感じがするので、国内向けに限定したサービスの場合は、カラーミーやBASEなどの国内のサービスをお勧めしたい。

掲載日: / 更新日:
カテゴリー: ホームページ作成

ネットショップ構築・運用にオススメツール

CLIP STUDIO PAINT

ネットショップ運用において、いくつかあると便利なツールがあります。

受注・発送業務において、効率化のためにCSVファイルの取扱いは不可欠です。しかし、CSVファイルをExcelなどで取り込むと、期待しない自動変換がされて支障が出ることが多々あります。CSVエディタを利用しましょう。

SmoothCSV

慣れるまで、多少使い勝手が悪いところもありますが、通常業務で必要な機能はすべて持っています。(カラーミーショップ、ポンパレなどの公式ページでも紹介されています。)

使用する上で、最初に使いにくいと感じるところとして、「セル内の情報が多い場合に見難い」ではないかと思います。列の幅を自動調整で表示される方法もありますが、注文データなどは横長となり都合が悪いです。そんな場合は、編集したいセル(複数セルも可)を選んで、「編集」>「選択範囲をテキストで編集」(Ctrl+T)とするとそのセルだけ別ウィンドウに表示してくれます。この機能を使うことで、商品情報の編集など、CSVファイルの取扱う業務全般で大変便利で強力なツールとなります。

ページ作成において、若干でもhtml/cssの編集は必要になるケースが多々発生します。楽天市場のrms、YahooショップのストアクリエイターProなども、多少のhtmlの補完・エラーチェックなどできますが、別途htmlエディタを使用して作成するのが便利です。

Crescent Eve

大変シンプルで汎用的なエディタとしても利用でき、プレビュー機能などもあり小規模な商品説明の作成には大変向いています。ただ、最小限の機能しか備えていませんので、機能不足を感じることもあるかもしれません。そんな場合は、次に紹介するNotepad++が使ってみましょう。

Notepad++

高機能で、動作も軽く、大規模なソースの記述も可能な優れたツールですが、オープンソースで開発されていますので、商用でも無料で使用できます。文法の補完・チェックはもちろん、プラグイン機能を使うことで、さらに多機能・便利に自分好みのツールにできます。タブ表示なので、CSS/html/javascriptなどを同時編集しながらデバッグなどにも便利です。

オススメのプラグインは、

  • Plugin Manager 名前の通りプラグインの管理ツールです。
  • Preview HTML 表示IEを選んでプレビューできます。
  • Quick Color Picker 画面に表示された任意の場所のカラーコードを取り込めます。
  • その他にも、converter、Nppftpなど様々便利なプラグインがあります。

その他にも、国産HTML/CSSエディタ StyleNote5(SN5)などがあります。機能が豊富で使いやすいと評判ですが、私自身が現状使用していないので、ここでは紹介だけに留めます。

ショップページ、商品ページ作成で、画像編集は不可欠で、商品画像、イベントバナー、説明画像などの作成、編集、縮小、色彩調整など必要になります。

有料ソフトであれば、illustrator/Photoshopがありますが、月額では低価格になりましたが、薄利なショップ運営には負担に違いはありません。また、少々専門的で直感で利用できるソフトではありません。フリーソフトならInkscape/gimpですが、Inkscapeは比較的使いやすいですが、まだ開発途上で機能不足や不安定な部分があり、gimpは操作に癖があり、Linuxでは軽いですがWindowsでは起動時時間を要したりで、この組み合わせは非常に強力ではありますが、ショップ運用のために覚えるには少々敷居が高いように思います。

そこでお勧めしたいのが(私自身が愛用しています)

CLIP STUDIO PAINT PRO です。漫画を描くためのソフトで有料ではありますが、この種類のソフトとしては低価格で、動作も軽く安定しています。このソフトの本来の使用用途とは違いますが、ショップ運用時に必要な機能は必要十分にもっています。レイヤーも使いやすいので、複数の画像と文字をレイヤーごとに作成しておくことで、簡単に画像の差し替え、文字の変更もできてしまいます。ポスターの作成などにも利用できますが、pdfは直接書き出せませんので、印刷を外注する場合、別のソフトでjpegからpdf変換が必要となります。(MS officeのPowerpoint / LibreOffice Impressあたりに貼り付けてpdfにエキスポートするのが確実でしょう。)

なにより、操作が直感的で、覚えることが負担にならないと思います。

illustratorから入った人には機能不足や使い勝手が悪いと思う部分があるようですが、難しいことを考えないで、紙に書いて重ねていく感覚で使えますので、パソコンは苦手という人でも使っていただけるのではないかと思います。アニメーション機能も追加されましたので動くバナーなども容易に作成できると思います。

欠点も多少ありますが、ショップ運用においては問題ないでしょう。

  • GIFが扱えないこと、GIFの代わりにPNGを使いましょう
  • illustratorのファイルが取り込めないこと(逆にベクターとラスターが混在して使用できる)

その他、画像を見たり、サイズ変更、切り出し、フォーマット変更など、気軽に行うのに便利なツールとして、IrfanViewが直感的で使いやすく良く紹介されますが、商用利用は無料ではありません。同様の機能を持っていて無料のソフトとしては、MassiGraがあります。IrfanViewほど直感的な操作性ではありませんが、慣れると使いやすいソフトだと思います。

その他、ftpソフトですが、以前は、ffftpが主流でしたが、最近ではオープンソースで頻繁に更新されセキュリティ対応も十分ということでFileZillaが良く使われています。

掲載日: / 更新日:
カテゴリー: ホームページ作成

2017年からは必須となる常時SSL対応ホームページ構築


2014年にGoogleが「httpsをランキング アルゴリズムでのシグナルとして使用する」とアナウンスされて、ついに本年度から本格化します。その流れに従い、Yahooショップや楽天市場などのモールも常時SSL化されます。

ローカルビジネスで地域検索で見つけて頂ければOKなホームページを除いて、Google検索を重視するホームページは常時SSL化を遅ればせながら、急がなければならない状況になっています。

弊社ホームページは、現在ロリポップ!のレンタルサーバーを利用しています。

【スタンダートプラン】

  • 独自ドメイン利用可/マルチドメイン100個まで
  • 30個までDB利用可のためWordPressはもちろんEC-CUBEで複数ECサイト作成も可能!
  • 独自SSL、SSH利用可!のパワーサーバーです!
  • 月額500円~  の【スタンダードプラン】は大容量の120GB!

弊社の運用実績から、非常に安定しており、性能改善も行われており、格安価格ですし、大変魅力的なレンタルサーバーとなります。しかし、残念ながら、現状は、常時SSL化にドメイン当たり別途2,000円/月(長期契約割引あり)必要となってしまいます。(年間契約で、常時SSL込みでスタンダードプラン2,170円/月~)

そこで、今現在、格安で常時SSLが導入できるレンタルサーバーをピックアップしてみました。(弊社が移行も視野にいれて検討しているサービス)

なんと年間4,680円(税別)で常時SSLホームページが構築できます。

■Z.comレンタルサーバーの各種プラン

  • 全プラン ~初期費用無料!!~
  • 【Zeroプラン】は月額290円で容量10GB  初めてホームページを作る方やコストを抑えたい方にオススメ
  • 【Zetaプラン】は月額680円で容量100GB  複数のサイトや法人サイトの運用にオススメ
  • 【Zeusプラン】は月額1,430円で容量なんと無制限!  動画や高画質写真など大容量ファイルの公開にオススメ
  • 【Z.com for WordPress】は月額720円で容量10GB  安心、高速なブログ環境をお探しの方にオススメ

■サービスの特長

◇Zero/Zeta/Zeusプランの特長

  • 訪問者の閲覧をより快適にし、離脱も防ぐ【超高速SSDストレージ】
  • 140種類以上のアプリケーションを1クリックでインストールできる【かんたんインストール】
  • 世界最高水準の技術をもって撃退する【迷惑メールフィルター】etc・・・

◇Z.com for WordPressの特長

  • インストール作業不要ですぐにWordPressが利用できる【自動セットアップ】
  • 何かあったときは1クリックで元に戻すことができる【自動バックアップ機能】
  • 本番とまったく同じ環境でテストすることができる【ステージング環境】
  • WordPressサイトの部分的なコピーも丸ごとコピーも1クリックで!【サイトコピー機能】etc・・・
  • セキュリティ対策もしっかり出来る【独自SSL】は月額100円!! 

高速性と高い技術サポートが評判のサーバが、常時SSL無料で月額900円(税抜)で使用できます。マルチドメインで運用ならこれで決まり

■エックスサーバーの特長

エックスサーバーは高速・多機能・高安定性のそれぞれの観点において、 下記特長を備えています。

▼ 高速サーバー

  • 高速性を重視し、最新16コアCPU(Xeon E5シリーズ) +192GBメモリ+RAID10を採用!
  • 快適232Gの国内高速バックポーン!
  • FastCGIやキャッシュモジュールに対応! PHP高速化や負荷軽減を図ることが可能!

▼ 充実の多機能 ・月額900円(税抜)から、大容量200GBからの高コストパフォーマンス

  • マルチドメイン・メールアドレス無制限!
  • 独自SSLを無料で利用可能!
  • 操作性を重視した簡単操作のサーバー管理ツール!
  • PHP7などの幅広い言語に対応!
  • SSHやcronによるコマンド、プログラムの実行も可能!
  • 人気のブログやショッピングカートを簡単インストール!

▼ 高い安定性

  • 安定のサーバー稼働率99.99%以上
  • お客様の大切なデータが消失してしまう可能性を大幅に 減らすことが可能な『自動バックアップ』機能に標準対応!
  • 初心者でも安心の24時間365日メールサポート!
  • 電話サポートあり!専任スタッフが対応

「プランS」(2017年6月30日までの期間限定)ディスク容量300GBで独自SSLも無料で上記の2サービスよりお得感がありますが、上位プランの様子からマルチドメインよりデータサーバ的な運用に向いていると思われます。

Yahoo! JAPANグループならではの高品質なサーバー環境で低価格&大容量。 容量、メモリ、CPUを自由自在に拡張OK。保守管理はファーストサーバにすべておまかせで安心です。

●Zenlogicの特長●

  • 初期費用:0円/月額:890円 【2週間無料トライアル付】
  • 最大ディスク容量2TB(2,000GB)
  • 電話&メールサポート無料
  • シマンテックグループのSSL証明書0円+無制限<Zenlogicだけ>
  • マルチドメイン、メールアドレス無制限
  • ビジネスに必須のセキュリティ機能標準搭載
  • 専門スタッフによる個別サポート、作業代行サービス
  • 継続的に機能強化・改善し、常に最新の環境をご提供

 

これまで上げた3件は、構築にはそれなりの知識と経験が必要ですが、こちらは簡単にホームページが構築できます。

兎に角、簡単に構築できて、常時SSLで2,000円/月。但し、テンプレート以上のことをするには知識が必要で、制約も多くなります。

ブログのように更新ができるお知らせ更新、 メニュー一覧やアクセスマップ、ネットショッピング機能など、 ホームページ作成に必要なコンテンツがあらかじめ用意されているため、 情報を登録すれば、すぐにオリジナルのホームページが完成します。 デザイン作成は、4,000通りものデザインパターンから、 イメージに合ったデザインを選択できるほか、 HTMLとCSSでカスタマイズすることも可能ですので、 初心者だけでなく、中・上級者の方も満足。 もちろんスマートフォン・タブレットも対応!

 

裏技的ですが、通販もされるのであれば、ネットショップでホームページを構築する方法もあります。

カラーミーショップなら、テンプレートをかなり自由に変更できますので、トップページをホームページの体裁にすることは比較的容易です。常時SSLは独自ドメインの場合、残念ながら、1,000円/月必要ですが、エコノミープランであれば、常時SSL込みで1,900円/月でショップ兼ホームページが構築できることになります。

但し、いくつか注意点があります。

  • エコノミープランだと自由ページが10ページまで(年ごとに増えて100ページまで)ですので、大規模なホームページの作成には向きません。
  • ホームページ化には、テンプレートを編集できるhtmlの知識が要求されます。
  • クレジット審査を受ける場合にショップとしての記載以外部分が不適切と判断されるリスクがあります。