googleDrive
2016年2月26日

私がOfficeよりGoogleDriveを選ぶ理由

みなさんこんにちは。仕事、はかどってます?

今回は日ごろ使っているであろう表計算やドキュメント、プレゼン資料作りのためのサービスをご紹介します。

もうすでにご存じの方も多いであろう、あのGoogleDriveです。

もうかれこれ20年近く、仕事効率を図るための表計算ソフトといえばエクセル、ドキュメントはワード、そしてプレゼン資料作りにはパワーポイントが主流でした。

今でもこれらのソフトを使いこなす猛者がたくさんいらっしゃるでしょう。

かという私も、某検定でExcel2級、Word2級というものを必要に迫られて取った経験があります。

PHP取得後だったのでエクセルはちょっとしたプログラム感覚で関数を覚え、ワードは「多少間違えてもいいからとにかく見た目通り完成させればOKな検定だなこりゃ」と、キーボードバシバシたたきながら、なんとかとった覚えがあります。

 

今ではそんな知識も半分以上忘れながらも、それらの知識をgoogleDriveで生かしてます。

 

あれ?

 

さて、検定まで取ったなぜ私がgoogleDriveを選んだのか、そしてどのようにして活用しているのかをここでお伝えしたいと思います。

 

GoogleDriveにした理由1:無料(ただし課金サービスあり)

 

一応、課金で保存容量が増えるというサービスがありますが、基本は無料。しかも、課金の有り無しに関係なく機能的な制限は全くといっていいほどありません。

(今後、多少変わる可能性はあるかもしれませんが。)

しかも容量制限は15Gと、文書を作るだけだったら、いったいどれだけの時間を費やせばいいかわからないほどの書類数が保存できます。

 

ちなみにこの容量制限、グーグルのフリーメールであるGmail、画像の保存や整理ができるGooglePhotoでも使用されます。ただ、それでも2年ほど使っている私でさえ1G超えるかどうか。

尋常じゃないほどのヘビーユーザーでない限りは足す必要もないかも。

 

でも、安かろう悪かろうじゃ?と思っている方もいるでしょう。

 

GoogleDriveにした理由3:officeと特別変わらない機能

 

GoogleDriveにはいくつかのファイル形式を扱うことができます。

 

文章ファイル形式の「goolgeドキュメント」

Document

表形式ファイルの「goolgeスプレッドシート」

スプレッドシート

プレゼンテーションを作るのに便利な「goolgeスライド」

スライド

ぶっちゃけると

 

「goolgeドキュメント」>ワード

「goolgeスプレッドシート」>エクセル

「goolgeスライド」>パワーポイント

ですね。

 

ああ、申し訳ないけどこれだけでも十分。

この3種類を主に、他にも様々な形式でファイルを作ることができます。

google以外の会社が独自の形式のファイルを作れるようにと、googledocumentのアプリとして、様々なサービスを提供しています。

 

それらの様々なサービスは、また気が向いた時にでも紹介するかな。

 

GoogleDriveにした理由3:クラウドだから進化が早い

 

さて、そんなGoogleDriveも、やはりオフィスにはかなわないところがありました。

 

「officeではできたのにGoogleDriveではできない!」

「GoogleDriveもまだまだだな。」

 

たしかにサービス開始時はとてもじゃないけど使いにくい。そんな印象でした。

ところが、どうも日がたつにつれどんどん使いやすくなっている。

officeでないとできなかかった機能が付きだし、今では遜色のない使い心地に。

 

これは、いわゆるクラウドサービスだからできる、リアルタイムな機能追加。

 

これによって、GoogleDriveの使い心地はどんどん良くなってきているのです。

 

GoogleDriveにした理由4:複数ユーザーによる同時編集ができる!

googleDrive2

さて、これまではofficeにできてGoogledocumentにはできなかった、それに追いついてきたということをお伝えしましたが、次はGoogledocumentの一番の魅力、複数ユーザーによる同時編集についてです。

 

これ、今回の記事の一番大事なところ。

 

GoogleDriveにはファイルを共有したいユーザーにファイルを公開、さらには編集させることができるのです。

しかも、ただ編集するだけではなく、複数のユーザーによって同時に編集ができる!

 

これを使えば、一つの書類をみんなで同時に作ることができるのです。

 

「このファイルのココのところは〇〇さんの得意分野だから作ってー!」

「この情報自信ないから書き直してー」

 

と言ったことが、「今保存して閉じといたよー」という会話なしに即座に編集できるのです。

 

officeでも最近そういったことができるようになっているようですが、やはりこの便利な機能を早くに作り出したのはすごい!

 

この機能を活用すれば、社内の書類を作るのもかなりの時間短縮にもなります。

 

「今度の週報会議、自分が担当しているところを更新しといてー」

 

この使い方をすれば、誰かが作業を終わらせるまで待たなくてもOK。

当社でもこれを使って日報を全員に書かせています。

今日やった作業一覧を同じファイルに書く。

それぞれがメールで報告するより断然早くなります。

具体的にはこのような感じ。

googleDrive3

これで途中に入っている、メールを編集する作業が格段に速くなるわけです。

 

仕事効率化にはもうすでに手放すことができない存在となったGoogleDrive。

officeとの違いはせいぜいボタンの位置だけのような感じになりました。

それぞれの使い方についてもまた、追って書いていくかもしれませんが、今日はこの辺で。

-9
2016年2月20日

Welcartを使ってLPにカートボタンを設置しよう!

 

 

こんにちは!

WEBデザイナーのWATANABEです!

最近のお仕事で、ワードプレスでランディングページを作成し、「購入する」ボタンを設置、

クリックするとカートに商品が入って注文ができるようにしたいとの依頼をいただきました。

 

そんな時に便利なワードプレスのプラグイン!

ブログ記事や固定ページにさくっとカートボタンを設置できる、

「Welcart(ウェルカート)」を使ってみました!

 

 

 

Welcartって何?

 

 

Welcart(ウェルカート)とは、Wordpressで簡単にネットショップを始められる便利なプラグインです。

 

名-7

 

無料のECサイトテンプレートも充実していて、そのまま使うだけで、

カッコいい通販サイトが速攻で出来ちゃいます!

 

導入方法も超かんたん。

 

プラグインから「Welcart」で検索し、インストールするとダッシュボードに下図のような

ECサイト系のメニューが表示されるようになります。

 

名称未-7

あとは、メニューに従って商品登録や配送の設定、決済方法などをどんどん設定していくだけ!楽天やyahoo!などを使わなくても、Wordpressで簡単に通販サイトを立ち上げることができます!スバラシー!

 

 

 

 

 

固定ページへカートボタンを設置するときは、ショートコードを使おう!

 

 

ECサイトを作る場合は、Welcartで配布されているテンプレートを使うと早いのですが、

今回はランディングページとなる固定ページに、カートボタンを設置します。

 

 

まずは、ダッシュボードの「新商品追加」から商品を登録~。

 

 

次に、ランディングページのhtmlを書き込んだ固定ペ―ジにカートボタンを設置したいわけですが、

welcartの公式で公表されている「カート投入ボタン」のテンプレートタグ、

 

 

usces_the_itemSkuButton($value)

 

 

これをそのまま固定ページ内に書き込んでも、カートボタンはちゃんと作動しません!

このタグは、登録した商品ページ(投稿ページ)に記述されることで、商品と関連付けされてるので

固定ページに書き込んでも、どの商品をカートに入れるのか判明できないのです!

 

なので、固定ページにカートボタンを設置するときは、こっちのショートコードを書きましょう!

 

 

[button_to_cart item="item_code" sku="sku_code" value="text"]

 

item_code : 商品コード
sku_code : SKUコード
value : ボタンに表示するテキスト( 購入する、カートに入れる 等)

 

 

商品コードとSKUコードは、商品登録の際に自分で設定するやつです!

 

 

これで無事、固定ページにカートボタンが表示され、カートに商品を入れる事ができます!

あとはCSSで自分の好きなデザインにボタンを装飾しましょう~!

 

 

 

 

ウェルカートを使えば、ECサイトを持たないお客様でも、Wordpressでランディングページを作成し、

WEB上で商品販売から申込決済システムまで簡単に導入することができますね!

 

気になった方はお気軽にお問い合せ下さい(*´∀`)

 

 

animeImg
2016年2月12日

css3でアニメーションを実装してみた!

こんにちは、WEBデザイナーのANAです。

 

今回は、css3でアニメーションに挑戦します!

昨年、一昨年とフラットデザインが流行してから、背景一色のデザインが多く見られるようになりましたね♪
そこで、背景一色の静止画も素敵なんですが、ものによってはその背景が自動で変化すればもっと面白くなり、目を引くのになぁ~と思っていたところにcss3でアニメーションをしてみようということになったので、今回挑戦してみました。

 

code-1076533_640

 

 

CSS3 キーフレームアニメーションについて

ここでは、要素を少しづつ変化させるアニメーションをご紹介します。

css3の『animation』プロパティでは、キーフレームというものを設定することで細かい動きを付けることができます。

細かいとこまでってどこまでかって?
それがアニメーションの時間やタイミングまで、本来ならばJavascriptやjQueryを使って行うところまでcssでできてしまうんです~!!

感動!!( ;∀;)

 

anime2g

 

 

キーフレームって何?

css3はわかるけどキーフレームって聞いたことない!
キーフレームアニメーションってどういう意味?

と思っているあなた!

キーフレームとは、通過点のこと。

つまり、アニメーションの中で変化が定義されているフレームのことなんです。

各キーフレームで要素がどう変化するかは @keyframes という@規則で定義します。

 

ここで大切なのがアニメーションとそのキーフレームを一致させるためには、@keyframes 規則の名前と、要素に指定する animation-name プロパティの名前を一致させる必要があります。

 

この規則の名前は「@keyframes + 任意の名前」で宣言します。

キーフレームの情報を0%〜100%の%表示で書いていきます。

0%はアニメーション開始時、100%は終了時です。

css3でグラデーションを使用するときもこんな感じなのでなんとなくだけどわかりやすいですよね♪

ちなみにcss3でグラデーションのように、0%は from、100%は to という書き方でもOK!!

例えば、

@keyframes grade {
0% { background: #FF9999;}
50%{ background: #FFE599;}
100%{ background: #FF99FF;}
}

とこんな感じ♪

 

ちなみに、ChromeやSafari等のWebKit系ブラウザーでは、ベンダープレフィックス(-webkit-)が必要です。

@-webkit-keyframes grade {
0% { background: #FF9999;}
50%{ background: #FFE599;}
100%{ background: #FF99FF;}
}

ChromeやSafari向けになるとこうなります。

 

 

animation関連のプロパティについて

 

●animation-name

@keyframes で定義した名前を指定します。
これをちゃんと指定しておかないとアニメーションは動きません。
なのでここはしっかり決めておきましょう♪

 

●animation-duration

アニメーションを動かす時間の長さを「秒数+s」で指定します。

例えばこんな感じ

body {
 animation: grade 5s;
}

 

注意するべきが、この値が0だと実行されません。またマイナスなどの負の値を指定しても0として扱われてしまうので、実行されません。気を付けてください。

 

●animation-delay

ページ(要素が)読み込まれてからアニメーションを何秒からはじめるかの指定をすることができます。

これも上述したanimation-durationと同じ指定(「秒数+s」)の仕方になります。

 

 

●animation-timing-function

アニメーションをどのようなタイミングで出すか、どうやって進めるかを指定します。
ここで滑らかな動きなどを調整できます。

値は以下の通り~

  • ◆ ease-in
  • ◆ ease-out
  • ◆ ease-in-out
  • ◆ linear

 

 

●animation-delay

ページ(要素が)読み込まれてからアニメーションを何秒からはじめるかの指定をすることができます。

これも上述したanimation-durationと同じ指定(「秒数+s」)の仕方になります。

 

 

●animation-direction

animation-directionはアニメーションを繰り返す方向が指定できます。

  • ◆ normal … 通常の方向(初期値)
  • ◆ alternate … 奇数回で通常・偶数回で反対方向に再生(行ってきて行ってきてという具合)
  • ◆ reverse … 逆方向
  • ◆ alternate-reverse … alternate の逆方向

 

●animation-iteration-count

アニメーションの繰り返しを指定します。

ループにするにはinfinite を指定すれば無限にループされます。

 

 

●animation-play-state

アニメーションの一時停止や再生中(running)が指定できます。

 

 

●animation-fill-mode

アニメーションの再生前後の状態が指定できます。

  • ◆ none(初期値)
  • ◆ forwards … 再生後、最後のキーフレームの状態を維持する
  • ◆ backwards … 再生前、最初のキーフレームの状態を適用させる
  • ◆ both … forwards と backwards の両方を適用する

 

では、実際にcss3でアニメーションを実装してみましょう♪
背景色を変更していくアニメーションを実装します。

 

 

css3でアニメーションを実装!!

animation関連のプロパティを覚えたところで、実装してみます。

キーフレーム名を「grade」とし、0〜100%までで推移させる背景色を設定します。

 

@-webkit-keyframes grade {
 0% { background-color: #FF9999; }
 20% { background-color: #FFB973; }
 40% { background-color: #F0E1A8; }
 60% { background-color: #99CCFF; }
 80% { background-color: #FF99FF; }
 100% { background-color: #DFFFBF; }
}
@keyframes grade {
 0% { background-color: #FF9999; }
 20% { background-color: #FFB973; }
 40% { background-color: #F0E1A8; }
 60% { background-color: #99CCFF }
 80% { background-color: #FF99FF; }
 100% { background-color: #DFFFBF; }
}

ページ全体で色の変化を見てもらうためにbodyに、animationプロパティを指定します。

body {
 background-color: #FF9999;
 animation: grade 5s infinite;
 -webkit-animation: grade 5s infinite;
}

下記のリンクをクリックすると今回行ったアニメーションを見ることができますので、ぜひ見てみてください♪

 

一色の背景パターンのときなどに使用するといいアクセントにもなるし、ユーザーの印象にものこりやすくなります。ぜひみなさんも実装してみてください。

【URL】http://smile-design.bz/tight/grade.html

それではANAでした~(^^)/

blog2
2016年2月5日

とあるギャラリープラグインの修復記録 「Gallery by BestWebSoft」

数年前に作ったwordpress仕様のウェブサイトで、プラグインの調子が悪かったのでその解決を図りました。
そのプラグインの名は「Gallery by BestWebSoft」。

当時、クライアントの要望を聞いて、いろいろ探した結果見つかったギャラリー系のプラグインです。
使い方はそこまで難しくなく、アップロードした画像や、その場でアップロードした画像にtitleとAltとリンクを設定できるといった非常にシンプルなもの。
その表示法もシンプルです。


あれから2年、wordpressとプラグインがともにバージョンアップし、どうやらその過程でいくつかの問題が発生したようでした。
そのバグらしきものは、「画像の削除ができない。」
一見、管理画面では削除したように見えるのですが、どうも編集後のページからは削除されていない。
いったい何が起きたのか。

早速調査です。

https://wordpress.org/support/topic/error-when-trying-to-delete-images

02



|д゚)…
|д゚)読めん!



困ったときのgoogle翻訳。


01

こうして、


https://translate.google.co.jp/translate?sl=en&tl=ja&js=y&prev=_t&hl=ja&ie=UTF-8&u=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Ferror-when-trying-to-delete-images&edit-text=&act=url

03
よっしゃよっしゃ。


「イメージを削除しようとしたとき、私はエラーを取得しています。 私は、ギャラリーを作成した画像をアップロードし、ギャラリーを公開しました。 私は、画像を削除し、「更新」ボタンをクリックすると、私は次のエラーメッセージが表示されました」


「こんにちは、我々は、この問題を修正しました。 最新バージョンへのプラグインを更新してください。敬具、 支援チーム」


つまり、最新バージョンでは解決していると。
では、さっそく最新バージョンを入れます。


できました!

04


|д゚)…まっしろです。


おかしい。そういえば、ウチのコーダーが「できなかった」っていってたな。
そう、そんな問題がでたから私のところにこの話が来たのでした。


えーっと。
https://wordpress.org/support/topic/plugin-gallery-doesnt-work
https://translate.google.co.jp/translate?hl=ja&sl=en&tl=ja&u=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fplugin-gallery-doesnt-work
05
「私はこれをインストールしていると私は、ギャラリーページを作成し、それを表示すると、それは非常に奇妙な…のホームページと混合ギャラリーを示しています。
申し訳ありませんが、これは私のために動作しません。」


「最後のプラグインのバージョンでは、別の1にprettyphotoライブラリを変更することが駆り立てました。 フォルダをプラグインからファイルをテーマにギャラリーテンプレートファイルを交換してください。 これらのファイルは、「ギャラリー単template.php ‘と’ギャラリー-template.php」であり、それらは「ギャラリー・プラグイン/テンプレート」フォルダに配置されています。よろしく、オクサナ」


つまり、ダウンロードしたプラグインの中にテンプレートが入ってるよ。これ使ってね、ってことでした。


さっそくご指定のフォルダ、「gallery-plugin/template」の中を見てみると、ほうほう。
「gallery-single-template.php」と「gallery-template.php」が入っている。

この二つのファイルをテーマに入れ、ソースを調整。

06

無事表示されました。

そして、当初の問題であった削除しても消えない問題も解決しました。
めでたしめでたし。


ところでこの「Gallery by BestWebSoft」。有料版でまた便利な機能もあるようですが、今回は無料版で十分。
管理画面も英語のままですが、直感でわかる上にクライアントも使い慣れているようで、特に問題ありません。

07

ほいほいっと画像をアップして、小さめに表示する分にはなんの問題もありません。
いろんな画像をそろえて並べたい!ってときに便利ですよ。

blotop
2016年2月1日

まるで映画!動きが面白い&大胆なWEBサイト10選!!

こんにちは、WEBデザイナーのANAです。

 

今回はまるで映画!動きが面白い&大胆なWEBサイト10選をご紹介したいとおもいます。

 

今年は、ユーザーが使いやすいことはもちろんのこと、さらに進化したパララックスや、色使いがパステルカラーがトレンドといわれていますが、みなさんはどんなWEBサイトが好きですか?

 

昔のように最近はただ画面上に表示するだけではなく、見せるところはしっかりと見せつつもUX/UIを意識した体験型のWEBサイトが増えてきています。

 

ご紹介する10選の中にお気に入りのサイトが見つかるかもしれません♪

ぜひ見てみてください。

 

 

 

1.羽田ターミナル60周年を記念したサイト

 

1

【URL】http://haneda-terminal60th.jp/

 

歴史を感じさせるサイトのつくりになっています。

年代を円で表現し、私たちが普段利用している羽田ターミナルが歩んできた歴史をしっかり伝えています。

とてもユーモアのあるサイトです。

 

 

2.神戸市×攻殻機動隊新劇場版のコラボサイト

 

2

【URL】http://kobekokaku.jp/

 

士郎正宗さん原作の『攻殻機動隊』というアニメとこのアニメが舞台になった兵庫県神戸市のコラボサイトです。

数字が羅列する画面が終わるとまるでゲームのように3Dに世界に引きずり込まれます。

ナビゲーションも立体的で、ユーザビリティはしっかりしているのに、動きの多いわくわくするサイトです。

 

 

 

 

3.ANA×スターウォーズのコラボサイト

 

3

【URL】http://ana-planet.com/

 

自分が宇宙にいるような感覚を覚えるとてもクオリティの高いWEBサイトです。

自分の行きたい国をクリックすると場所によっては飛行スケジュールを見ることができます。

またスターウォーズファンにはたまらない、ゲームを集めるといったゲームも盛り込まれていた全体的に楽しめるサイトとなっています。

 

 

 

4.The Boat

 

4

【URL】http://www.sbs.com.au/theboat/

 

パララックスがここまで進化したのか…!とびっくりさせられるWEBサイトです。

スクロールしていくと物語がはじまります。まるで映画ですね…!すごい!

長いですが読める人は最後まで読んでみてください!

 

 

 

5.かまぼこのサイト

 

 5

【URL】http://kama1000.jp/

 

なんともユーモアのあるかまぼこのサイトです笑

見た瞬間からなんだか笑ってしまいました。とってもおもしろい笑

しかもキャッチフレーズなどの言葉のチョイスも私的にはすごく好きです。

インパクトのある言葉。

そして何より最初から最後までかまぼこ尽くしなのにかまぼこ感をまったく感じさせない面白いサイトです。

 

 

 

6.NHKスペシャル!新・映像の世紀

 

 7

【URL】http://www.nhk.or.jp/special/eizo/

 

このサイトも最初みて忘れられなかったインパクトの強いサイトです。

細かいところまで動画の配置にこだわってつくられているかなりすごくサイトだと思います。

NHKさすがですね。マウスの動きも使いやすいし、アプローチの仕方も抜群。

クリックしてみてみてください。

 

 

 

7.MUSIC FOR A  DYING STAR

 

6

【URL】http://almadyingstar.jp/

 

南米チリの砂漠にある世界21の国と地域が共同で作り上げた史上最大規模の電波望遠鏡「アルマ望遠鏡」のWEBサイトです。

幻想的で見るものを魅了します。思わず闇の中に吸い込まれてしまいそう。

ふわふわと漂う星になった気分です。

 

 

 

8.北千住デザイン

 

8

【URL】http://kitasenjudesign.com/

 

北千住をベースに活動するデザイン集団「北千住デザイン」のWEBサイト。

ユーザーインターフェイスはシンプルなのに、掲載されているコンテンツの数と多彩さが、見ている側を圧倒するびっくりするWEBサイトです。

これだけ掲載作品数があれば、制作者の得意分野や技術力も伝わってきますね~。感無量です。

 

 

 

9.田渕 将吾さんのポートフォリオサイト:s5-style

 

9

【URL】http://www.s5-style.com/

 

S5-Styleは田渕 将吾さんのポートフォリオサイトです。

サイトひとつを見せるにも細かくこだわっているWEBデザイナーらしいWEBサイトだと思います。

田渕さん自身、

  • Art Direction
  • Web Design
  • Frontend Development
  • Illustration

といっていてとにかくなんでもできる人なんですね~。尊敬します。

私もしっかりしたポートフォリオ作らなきゃ!

 

 

10.スイスの航空会社のWEBサイト

 

10

【URL】http://www.world-of-swiss.com/ja

 

も~う!どんどんスクロールしたくなるすごい面白いサイトです。これもパララックスが進化してますね。

こういったものを見るとWEBでできないものはもうないんじゃないかと思ってしまいます。

アプローチの仕方を変えれば、どんなことでもできそうですよね!

 

 

 

みなさんもおもしろいWEBサイトを見つけてみてくださいね♪

 

それではANAでした~!

blogtop2
2016年1月22日

起業してホームページを持とうかお考えの方へ~第4弾~

こんにちは、WEBデザイナーのANAです。


今回は起業してホームページを持とうかお考えの方へ~第4弾~『自分でホームページをつくるには』についてお話します。

 

Old rangefinder photo camera  http://barnimages.com/

 

 

起業をして、ホームページを検討している方で、『業者に頼むとどうしても高くつくし、自分でホームページを作ろうかな~』と考えている方もいると思います。

 



誰しもみんな、”お金をかけたくない”というのが、一番大きな理由だと思いますが、ホームページを自作するとどのくらいの時間や労力がかかるのか?

そして何より作ったホームページで売り上げを上げることが出来るのか?ということに着目してみました。

 

 

 

 

 

ホームページを自作するとどれくらいの時間がかかる?

 

 

Closed moleskine http://barnimages.com/

 

 

イチからホームページを自作する場合、ホームページをつくる作業に多くの時間がかかり、そしてそれ以外にも時間がかかります。

 

まず何より、たくさんの知識が必要になるので、それらを覚えなくてはいけません。

また、デザイン的にも標準クラス以上のものでなければ、仮にホームページをつくったとしても、第一印象でホームページにきたお客さんに逃げられてしまいます。

 

知識と技術をなんとか身につけて完成させたとしても、ほとんどの場合、出来上がりはプロが作っものに比べるとかなり見劣りするものになります。

 

http://barnimages.com/

 

 

実際にどのくらいかかるのか、「ホームページをつくろうと思っている!」という友人に話をもちかけてつくってもらいました。

 

友人はとてもこだわる人なので、まず写真撮影からはじめます。

その日は、それだけで終わってしまいました。

平日は仕事なので、お休みを利用して、ホームページの基礎知識を身に着けながら実際に自分で触ってみてつくってみたそうです。

 

Working with laptop http://barnimages.com/

 

 

とてもセンスのある友人ですが、デザインしている段階でまず1ページつくるのに20時間ほどかかったそうです。それからまた構想に悩み、いろんな競合サイトをみては路線を変更し・・・。

 

創っている時間、考えている時間、ホームページの素材を探したり、写真撮影している時間、すべてを合計して150時間以上かかったそうです。(概算ではありますが)

この結果的にホームページを作るには大体150時間くらいはかかるのではないかと思います。

 

さらに、お休みの日もホームページをつくる時間にあててしまったり、最初は順調にみえたホームページ制作も後半になると「妥協・妥協の繰り返しになってしまった…」と残念そうに言ってました。

 

1280

 

友人は最後までホームページを完成させましたが、プロの目から見ると1日で終わってしまいそうな、そんなに苦労してつくったものとは言えないものでした。


ちなみに、ホームページを作った時間が大体150時間で、これを時給1000円で計算し、150時間働くと、15万円です。

それだけの時間をかけるならば、プロに依頼するほうが賢明だと私は思います。

 

 

 

 

 

 

「なんとかホームページつくったのに、アクセスが全然ない!」

 

90

 

ホームページは形だけ作ればいいというわけではありません。

ドメインの取得や、サーバーの契約、更新作業、Googleアナリティクスを導入したり、ウェブマスターツールへの登録も必要です。

ホームページを作るにはHTMLやCSSだけでなく、もっともっと幅広い知識が必要なのです。

 

 

 

 

ホームページを自作することに時間をかけるよりも、大切なことがある

 

ホームページを自作するための知識や技術を習得するより、起業したご自分の得意分野でのスキルを上げることが大切なのではないかと私は考えます。

自分の強みを経験にしたほうがほうが効率がいいからです。

「餅は餅屋」という言葉がありますよね。

そうなんです。ホームページもホームページ制作会社に任せてしまうほうが、結果的にみるとお得なんです。

それでも、『どうしてもホームページを自分でホームページをつくってみたい!』とおっしゃるのならば、無料のサーバーを借りて、まず趣味のページを つくってみてはいかがでしょう?

 

0185

 

深く考えずに、好きなように5ページくらいのものを制作してみてください。



趣味なので誰にも見られなくても構わないですし、会社の信用を落としたりする心配もありません。

 

やってみてホームページをつくるのが面白く、もっともっと深く勉強したいと思ったら、自分の会社のホームページをつくってみるてもいいかもしれません。


もし、しっかりしたホームページをつくりたい、そして尚且つ、効果を上げたいのであれば、プロの仕事を活用すべきだと思います。

 

 

 

ホームページをつくるにあたって、どのように自社の商品やサービスをアピールするのが良いのか、ページ構成はどうするのがベストなのかなどのご相談もお受けいたします。

 

見積もりも無料です!

 

これからホームページを創ろうとお考えの方は、ぜひ一度お問い合わせください。
お問い合わせ

 

今回で”起業してホームページを持とうかお考えの方へ”は終了です!

みなさま、お付き合いありがとうございました。

 

4回にわたってお送りさせていただきましたが、みなさんのお役に立てたでしょうか?

これからもためになるお話をどんどんさせていただきたいと思います♪

 

 

それではANAでした~!

 

blogtop
2016年1月13日

起業してホームページを持とうかお考えの方へ~第3弾~

こんにちは、WEBデザイナーのANAです。

今回は起業してホームページを持とうかお考えの方へ~第3弾~『ホームページをつくることで効果はでるのか』についてお話します。

 

work-731198_1280

 

 

これから起業をする方も企業をしたばかりの方も、ホームページを作ることで一体どのくらいの効果が期待できるものなのか、気になるところですよね。

 

「ホームページを作ったけれど、アクセスが無い」
「せっかくお金をかけてつくったのに、ホームページへの宣伝広告費にまたお金がかかる」

 

などの悩ましい声もよくお客様から耳にします。

 

また、ホームページをマーケティングとして活用したいのに、
ホームページに人を集めるためのマーケティングやコンサルティングをしている方もたくさんいらっしゃるのが現状です。

 

でもお金をかけずにやる方法はあります。

 

ホームページをつくる上で必要なもの5つ

でもご紹介しましたが、その話はまた後ほど…。

 

 

ホームページをつくることで得られる効果は結論からいうと…

 

business-925900_1280

 

ずばり、結論から申しますと、ホームページで得られる効果は、

①業種
②競合性

に大きく関連してきます。

売上・集客の効果が出にくい「業種」「競合性」とはどういうことなのか

 

ここで仮定のお話。

郵便ポストの数より多いといわれている”美容室”。
特に日本で一番美容室が密集しているのは埼玉県の北浦和だといわれています。

 

例えば、あなたが「北浦和で美容院」を開くのでホームページをつくって集客をしたいと考えているとします。

その場合、まずGoogle、またはYahoo!で「北浦和 美容院」で検索し、
1ページ目にあなたのホームページが来るようにすることが一つの目標です。

「え、まずそこからなの!?」

とお思いの方もいらっしゃるかと思いますが、なんとこの場合1ページ目に出すことさえ至難の業なのです。

 

なぜなら、日本で一番美容室が密集している北浦和では「競合性」が高く、非常に難しいからです。

 

9690be70a8e686b4f4ab6eb7b2cd4be0_m

 

 

そういった現実での土地が商業的に激戦区の場所では、ネットの世界でも”検索キーワード”という点で、激戦区の場合がとても多いです。
そのため、ホームページをつくればすぐお客さんが来てくれる♪というのは難しいでしょう。

 

だったらホームページ要らないよ…

 

と思ったあなた、ちょっと待ってください。

ホームページをもっておくことでメリットとなることもたくさんあるんです! 

例えば、来店してくれたお客さんが、SNS(Facebookやtwitter)、RELEASEなどでお店についての記事を投稿してくれた場合。

 

ホームページをもっていれば、Facebookやtwitter、RELEASEなどでURLも一緒に載せてくれるかもしれません。

 

そうなればお店の場所やメニュー内容などの情報が多くの人に拡散されます。

 

訪れたホームページで、お店や会社の魅力が掲載されていれば、『行ってみよう!』という人が出てくるかもしれません。

 

ここでホームページがあるのとないのとでは、お店や会社のことが広がる範囲も、スピードも全然違ってくるのです。

 

では、逆に売上・集客の効果が出やすい「業種」「競合性」

 

競合が少なければ少ないほど、ホームページをつくることで大きな効果が得られることがあります。

例えば、「 博多で花火専門店」を開いたとしましょう。

特殊な業種であり、都会のど真ん中にはなかなかないお店です。
「花火専門店 博多」のキーワードで、GoogleやYahoo!に1ページ目に出ればいいので、先ほどの美容室とはちがいこれはかなり容易だと考えられます。

 

fireworks-227383_1280



もし、起業したあなたのお店や会社が、ネット上での検索キーワードで競合性も低く、希少なジャンルの業種であれば、ホームページをつくるべきでしょう。



ホームページを見てお客さんが「来店した」り、「電話やメールフォームでお問い合わせがきた」という流れができれば、それは成功しているホームページです。

 

まず、ホームページをつくったらこれをやってみよう!


もちろんお金をかければ、集客はできます。
Yahoo!やGoogleなどに広告を打ち出したりすれば、自然とつくったホームページを見る人は増えます。


しかしながら、それができない方が多いのです。
では、お金をかけずにホームページを知ってもらうためにはどうすればいいのか?

①ホームページをオープン(又はリニューアル)したことを人に伝える。
②FacebookやTwitterなどのSNSを使用して、つながりのある人に周知する。
これだったら無料で、しかもすぐにできますよね!

これをするだけでも、なにもしないのでは反応が全然ちがってくるんです。

 

writing-926116_1280


SNSや来店したお客さんなどに、口で呼びかけを行い、お礼の手紙やはがきに、
ホームページのURLを載せて出せば見てくれる人もいます。

効果が出ているホームページは”つくって終わり”ではなく、つくってからがスタートです。

 

ホームページをつくるにあたって、どのように自社の商品やサービスをアピールするのが良いのか、ページ構成はどうするのがベストなのかなどのご相談もお受けいたします。

見積もりも無料です!

これからホームページを創ろうとお考えの方は、ぜひ一度お問い合わせください。
お問い合わせ

 

次回は最後、④自分でホームページをつくるにはをご紹介します♪

それではANAでした~!

 

201601
2016年1月1日

あけましておめでとうございます。

旧年中は格別のご厚情を賜り、誠にありがとうございました。
皆様のお陰で無事に新しい年を迎えることができました。

 


私たち社員一同、「お客様に喜んで頂けるホームページをつくる」という基本に立ちかえって、地道に、ひとつずつ、目の前のできることから取り組んで参りたいと存じます。

 

 

本年も変わらぬお引き立ての程よろしくお願い申し上げます。
皆様のご健勝とご発展をお祈り申し上げます。

 

201601-2

デザインオフィスTIGHT(タイト) 社員一同

20151225
2015年12月25日

起業してホームページを持とうかお考えの方へ~第2弾~

こんにちは、WEBデザイナーのANAです。

今回は起業してホームページを持とうかお考えの方へ~第2弾~『ホームページを制作するのにかかる費用』についてお話します。

 

準備をかけて起業をしたのはいいけれど、集客に悩みを抱える方は多いと思います。
そして「集客するためにホームページつくろう!」と考える方も多いと思います。

 

では、そのホームページをつくる費用はいくらかかるのでしょうか? 

 

photo-1416339442236-8ceb164046f8

 

 

DESIGN OFFICE TIGHTでは、”まるごとパック”をおすすめしております。

パソコンはもちろんのこと、スマホサイトも一緒になったお得なプランです。
詳しくは、プランページをご覧ください。

 

 

さらにホームページの制作費用とは別に、レンタルサーバーと、ドメイン使用料金が年間約4000円ほどかかります。

「レンタルサーバーって?」
「ドメインってなんのこと?」

とお困りの皆さん。少し掘り下げてご説明いたします。

 

 

【仮定として】
・ホームページを『家』
・レンタルサーバーを『土地』
・ドメインを『表札』

とします。

説明

家を建てるときに必要になるのが、”土地”ですよね。
土地が無ければ、家を建てることができません。


ホームページも一緒です。
ホームページをつくるときには、家を建てるところでいう土地が必要になるのです。
これが『レンタルサーバー』。

 

 

 

次に家を建て終わったら、最後に「ここは自分の家だ!」という証として表札が必要になります。
表札がなければ誰の家なのか?、人が住んでいるのか・いないのか?がわかりません。

 

 

 

ホームページで表札の代わりをしてくれるのが、『ドメイン』というものです。
具体的にいうとhttp://〇〇〇〇.jpというものです。

ネットにアクセスしたことがある人なら一度は見たことがあると思います。

この『レンタルサーバー(土地)』と『ドメイン(表札)』がそろってはじめて、『ホームページ(家)』をつくることができるのです。

 

このようにしてホームページを作成していきます。
そして、ホームページを開設して1年ほどが経過しますと、安定した集客力がでてくることも稀ではないのです。マクロ視点で見ると、ホームページはかなりコストを抑えた広告としての威力を発揮するのです。


商品やサービスに”絶対”の自信があれば、ホームページをお持ちください! 

 

student-849821_1920

 

 

ホームページ制作費用ははっきり申し上げまして、お安い値段とはいえません。

しかしながら、もし起業したそのビジネスやサービスが 良いものであり、そして多くの人に喜ばれるあれば、ホームページにかけた費用は必ず回収できます。

ホームページをつくるにあたって、どのように自社の商品やサービスをアピールするのが良いのか、ページ構成はどうするのがベストなのかなどのご相談もお受けいたします。

見積もりも無料です!

これからホームページを創ろうとお考えの方は、ぜひ一度お問い合わせください。
お問い合わせ


次回は③ホームページをつくることで効果はでるのか、をお話させていただきます~!



それではANAでした!

 

blog.fw
2015年12月18日

WordPressに画像サイズを追加したうえで、 アップロードした画像もリサイズしたいのだが。

ワードプレスのメディア画像は設定からサイズが変更できるようになっているのですが、クライアントの案件がほとんどできている状態から画像サイズを追加しなきゃいけない事態が最近ありました。

すでに必要な画像は600枚近くアップロード済。この状況でこの修正はきつい。すでにメディアの設定で必要なサイズは変更済み。サムネイルも中サイズも大サイズも変更できない。さてどうしたものでしょう。

1.新しいメディアサイズを追加する。


mediasize

さて、WordPressではまず、アップロードするメディアサイズを変更することができます。上の画像はワードプレスの「設定」>「メディア」で観ることができるメディア設定。
通常WordPressでは切り抜きができる「サムネイル」、画像の縦横比はそのままに縮小した「中サイズ」「小サイズ」、そしてそのままの大きさ「フルサイズ」があります。
通常ならこのままでよさげですが、案件によってはこれでは足らない事態に。

そこで、新しいサイズを作るため、ワードプレステーマに入っているfunction.phpに書き足します。
1行。

add_image_size( ‘thumbnail2′, 400, 250, true );


これを足して、新たに画像をアップロードすれば、「thumbnail2」という名前の横400px、縦250pxの画像ができああります。最後のtrueは切り抜きをするかどうか。trueを入れれば切り抜き。しないときは何も書かなければOK。


2.アップロードしなおさずに、新しい画像サイズのファイルをワードプレスで作る。


さて、これで新しい画像が生成される準備は終わりました。
次はすでにアップロードされている画像の処理。アップロードしなおすとかなりの時間がかかります。めんどくさい。ここはボタン一個で勝手に生成してくれるなにかがないか、を探したいところ。

困った時のプラグイン。これです。

Regenerate Thumbnails


Regenerate Thumbnails


このプラグインはサムネイルを作り直すプラグイン。
ワードプレスの「プラグイン」>新規追加から「Regenerate Thumbnails」で検索しましょう。
その後「ツール」>「Regen. Thumbnails」から「すべてのサムネイルを再生成する」ボタンをおすだけ。

reg

 

これでめでたく新しいサイズの画像がすべて生成されました。なんとかなりましたね。

IMG_2230
2015年12月12日

2015年、忘年会しました。

こんにちは、DESIGN OFFICE TIGHTです。
先日、私たちの親会社であるスマイルホールディングスのスタッフ一同で忘年会を行いました~パチパチ!

つい最近、「もう2015年かぁ…」と思っていたのに
あっという間に1年たってあと3週間ほどでもう2016年がやってきます。

早い…。

 

ぼやきはおいておいて、今日はその忘年会の様子をお届けします~♪パフパフ!
(ほとんど食べ物だけどね)

今回忘年会の会場に選ばせていただいたのが、福岡市今泉にある「一伍屋 今泉店」さん。
【URL】http://orugento.com/ichigoya.html
いつもお世話になっています~。
ichigoya

ここでコースをいただきました!

全員そろったので、常務から一言いただき(省略)、かんぱーい!!
2015年もお疲れ様でした~☆わ~!

そしてブログに書くとわかっていながら、スタッフの写真を撮り忘れるという失態。
ということで、食べ物がほとんどです笑

まずはお通し~

IMG_2232

 

サラダ&お刺身
IMG_2229

IMG_2233

 

うまい~!
今回はスタッフ+パートナー(代理店)の方もいらしゃってたので、結構な人数でわいわい!食べ物がどんどんなくなります。

みんなしゃべりながら仕事のことや、プライベートなことをしゃべっています。
常に笑いが絶えない職場です(*´V`)がやがやしてる…

お刺身が食べ終わったころに、「きのこの鍋」~♪
IMG_2231

だしが聞いててうまし!!

 

そしてメインは~!!

IMG_2238

肉!肉!!肉~!!!

IMG_2235

 

おどり豚のしゃぶしゃぶと、すき焼きのお肉です~(*´q`)

おいしすぎだ・・・。おなか一杯になりました!

 

最後に集合写真撮るはずだったのに忘れてた・・・。

2015年もグダグダですね笑


だけど、こういう忘年会という社員全員が集まる場では普段離せない人と話ができたりアドバイスをたくさんいただけるので、こういう機会に感謝しています。

おいしいものモリモリ食べて、たくさん飲んで、たくさん話して、2015年も楽しい忘年会を行うことができました!

残り少ない2015年!社員一同がんばって参ります~!(*´V`)

DESIGN OFFICE TIGHTでした!

40
2015年12月5日

起業してホームページを持とうかお考えの方へ

こんにちは、WEBデザイナーのANAです。


今日は、タイトルの通り、これから起業する方、最近起業した方にホームページの必要性を以下の4項目にわたってお話させていただきます。


①起業してホームページを持つメリット
②ホームページを制作するのにかかる費用
③ホームページをつくることで効果はでるのか
④自分でホームページをつくるには



もし起業してホームページを持とうかお考えの方は、DESIGN OFFICE TIGHT(デザインオフィス タイト)にお問い合わせください。
お客様に一番あったプラン、価格でホームページを制作させていただきます。



起業している、またはこれから起業するけれど、ホームページを持とうか迷っている方は、下記フォームよりお問い合わせ下さい。 無料でご相談をお受けいたします。
【お問い合わせ】

 

では、今回はまず①起業してホームページを持つメリットについてお話いたします。


起業してホームページを持つメリットとは? 


起業家にとってホームページを持つことは、名刺を持つことと同じに値します。

もちろん、名刺に比べると少しコストはかかりますが、それを上回るメリットがたくさんあるのです。

2

ではそのメリットとはなんなのか?

1つ目、ホームページがあることでしっかりしてる会社だという信頼感を持ってもらえます
このご時世、ホームページを持っていない会社のほうが少ない中で、やっぱりお客様や会社にかかわる方からするとホームページを持っているのと、持っていないのでは全然信頼度が変わってきます。


名刺になどにも、会社の所在地、電話番号、FAX番号、担当のメールアドレス以外に、ホームページのURL(http://〇〇〇.com)が載っていることが多いですよね。


名刺を渡した相手に「ホームページはありますか?」と聞かれて、「ありません」というのと「ありますよ、名刺のURLにぜひアクセスしてみてください!」というのでは全然印象が変わってきます。


「この会社は、ホームページがないし、いざというとき大丈夫かな?怪しいところだったら・・・」
と考えてしまう人もいるのです。

ホームページがあることで信頼感が全然変わってきますよね!




OOK82_gurafuwoyubisasu20131223-thumb-1000xauto-16525

2つ目、宣伝や集客効果があり、売上げにつなげることができます。
これはホームページの最大の役割でもあります。
ホームページは24時間営業の会社の顔です。
いつ、どんな場所でもインターネットという環境さえあればたくさんの人が見ることができます。


何かのキーワードで検索したときに上位表示されると、1日にたくさんの人が、ホームページを見ます。
そこで、あなたの会社のサービスや製品を吟味してくれます。 
「ホームページを見て、興味を持ち、お店に足を運んだ。」
「素敵なホームページだったので、お話を聞くことにして、結果契約を結んだ。」
という話も少なくありません。


そのホームページにショッピングカート機能や、ご予約・お問い合わせフォームなどがあれば、電話対応などの手間も省くことができます。


 

photo_00984

3つ目、ホームページで自社の商品やサービスの説明をあらかじめしているので、商談が成立しやすくなります。ホームページを見ていない商談相手と、見ている商談相手とでは話の進むスピードが違います。


契約を結ぼうとしている相手も、自社のサービスや製品の特化してる部分やこだわりをわかって商談するので、通常よりも成立するスピードも商談時間も早くなります。
また、手始めの説明もお客さんが事前の知識として知っている場合が多いので、より深い内容の話をすることができます。



今回は「起業してホームページを持つメリット」についてお話させていただきました。
これからホームページを創ろうとお考えの方はぜひ、参考にしてみてくださいね♪


 

次回は②ホームページを制作するのにかかる費用をお話させていただきます~!



それではANAでした!


kyujin
2015年11月30日

一緒に働いてくれる仲間を募集!

こんにちはDESIGN OFFICE TIGHTです。

現在、DESIGN OFFICE TIGHTでは一緒に働いてくれる仲間を募集しています。


Webクリエイティブ職【デザイナー/コーダー】 
・インターネット総合メディアサービス企業として成長中!
・ホームページ受注件数前年比2倍。複数名の増員募集♪
・営業と密な連携。クライアント先での打合せで経験UP!
・残業ほぼなし。プライベートも大切にしながら働ける!

WEBにかかわる仕事をしている方、フリーで働いてる方はもちろん、
これから実績を積みたい方もぜひ応募してください!

求人に関する詳しい内容は、以下までお問い合わせください。
株式会社 スマイルホールディングス
〒810-0022
福岡市中央区薬院1-11-14 ノアーズアーク福岡薬院6F
TEL.092-761-8738 FAX.092-761-8758

採用担当:江藤

皆様からの応募お待ちしております!

 

それではDESIGN OFFICE TIGHTでした!

20151126
2015年11月26日

写真を油彩画や水彩画にできる、Topaz Impressionがすごい!

こんにちは、WEBデザイナーのANAです。
今回は写真を油彩画や水彩画にできる、Topaz Impressionをご紹介します。

WEBサイトを日ごろから見ている方は知っている人もいるかもしれませんが、水彩画や油彩画っぽいサイトを見かけることってありますよね?

そういったサイトはどれもおしゃれでかっこいいです。
ただそういった”画”、いったいどうしているのでしょうか?

実際の油彩画や水彩画を使用して創られているサイトももちろんありますが、Topaz Impressionというツールをしよう使用すれば、写真を簡単に水彩画や油彩画のようなタッチの素材を作ることができます。

私たちデザイナーは普段、Photoshopでも写真を手描き風に加工する技術をもっていますが、
短時間でクオリティの高いものができるかと言われればそうではありません。

やっぱり調整は必要ですし、あんまりいじりすぎるとおかしくなってしまいます。

だからこそ、こういったツールがすごく便利です。

 

 

Topaz Impressionとは?

ana1

先ほども説明しましたが、Topaz Impressionは持っている写真や画像を手描き風の油彩画や水彩画に簡単に加工することができるツールです。

 

彩画や水彩画にしたい画像や写真をを選択して、好きなフィルターを選べばOK♪
プリセットのフィルターでも充分ですが、ブラシを変更したり、色やキャンバスを変えたりして、細部まで調整できます!
ここがまたよいところですよね♪

 

 

どんな感じになるの?

下記の画像は実際に本サイトに載っているものです!
クオリティ高いですよね…

これでサイトをぜひ作ってみたいです♪

slide16bna

slide11bna

slide10bna

slide3bna

slide12bna

 

 

無料体験版を使ってみましょう!

Topaz Impressionは有料で、$99.99かかります( ;∀;)
便利なツールは有料ですね笑

でも30日間は無料で試せるので、どんなものなのか見てみたい、触ってみたい!という方は、ホームの「or start my free trial」リンクをクリックし、メールアドレスを入力すると無料体験版としてダウンロードできます。

ぜひ使ってみてくださいね!

それではWEBデザイナーのANAでした~(*’ω’*)ノシ

myojyowaraku
2015年11月16日

明星和楽2015に参加してきました!

こんにちは、WEBデザイナーのANAです。
今回は2015年11月14日に開催された「明星和楽2015」に参加してきました。
明星和楽はいわば「大人の文化祭」のようなもの。福岡のいろんな場所でいろんなことをしています。

 

明星和楽とは?

明星和楽とは「テクノロジーとクリエイティブに関わる人々が集まる」ことを目標に2011年に開始されたフェスティバルです。
無機質なテクノロジーではなく、「クリエイティブに触発され、感性を揺さぶるテクノロジー」を生むための環境を生み出します。「テクノロジーにはアートやクリエイティブなどは関係ない」と思われがちですが、人がテクノロジーに触れるきっかけを作るためには、まず、魅力的であることが必要となってきます。︎ 明星和楽では「テクノロジーをどうにか活用出来ないか?」と考えるよりも、「テクノロジーを魅力的に出来ないか?」というアプローチをとり、イベントを通して触れたくなるテクノロジーを作る為のマインドを育て日本、アジア、そして世界を盛り上げていく為の明日のスターを発掘・育成します。︎

いわば”テクノロジーとクリエイティブの祭典”ということ。


くわしくは
【公式サイト】http://2015.myojowaraku.net/
を見てみてください。

 

私が体験&参加してきた明星和楽2015

①360度ホラー体験
IMG_2181
岩田屋新館前にて行われていたイベントです。
11時ごろ行ったのですが、すでに体験中の男性が大きな悲鳴を上げていました。

RKBさんも来ていたようで、必死に男性を撮影中…

IMG_2182

結構大きな声で「助けてー!ごめんなさい!」と何かをかわす動きをしていました。
道行く人たちも大注目です。

この後実際に私も体験しましたがこれは悲鳴ものでした・・・。
夢に出てきちゃう!

1. オキュラスリフトとヘッドホン
視界を完全に覆うことで、360°の視覚体験が可能。ヘッドホンも装着することで、今までに味わったことのない映像への没入体験が可能になります。


2. 心拍数を測定
指先に器具を装着し値を測定。体験者の心拍数はモニターに表示され、恐怖が視覚化されます。

この二つで恐怖を直に装着している本人にも周りの人にも伝えます。
こういった発想がすごいですよね!おもしろい!笑
【360度ホラー体験公式サイト】http://360-horror.com/

②スタートアップトークショー
次はところ変わってIMSホールへ…

ここではいろんな催し物が開催されていました。

IMG_2183

タイムスケジュールはこんな感じ!
午後の部は結構大幅な時間の変更があってたけどね~。

私が聞かせていただいたのは
「スタートアップNEXTSTAGE〜成功に必要なものとは〜」
というもの。

起業したい方たちがメインで多かったようです。
トークをしている方々はお酒を片手に経営者としてのぶっちゃけトーク!
sayurin2

ゆるいんですが、内容はしっかりとしておもしろかったです。
経営者のリアルな声といった感じ。

福岡を拠点としている3社の経営者がトークセッションを繰り広げます。
・アンダス株式会社 代表取締役社長 前田哲郎氏
・株式会社Fusic 取締役副社長 浜崎陽一郎氏
・株式会社リーボ 代表取締役 松尾龍馬氏

この御三方が熱く語り合っていました。

とくに一番奥に座っている赤い皮ジャンのアンダス株式会社 代表取締役社長 前田哲郎氏はマーティングに特化した話をしていたのですごくおもしろかったです。

 


③世界一キュートなプログラマー Linda Liukas

次に聞いたのが世界一キュートなプログラマー「リンダ」さん!
写真を撮り忘れてしまったので、お写真だけ貼っておきます。

Linda Liukas. Photo: Maija Tammi

Linda Liukas. Photo: Maija Tammi

 

すべて英語でプレゼンテーションしていました~!
ところどころはなんていっているのかわかるんですが、途中からわけわかりません・・・。


なので内容は割愛させていただきます。
リンダさんの公式サイトです。ぜひ見てみてください。


【リンダさんの公式サイト】http://www.helloruby.com/

 

 



その他にもイムズホールで開催されているものをメインに参加しましたが、
今回はなかなか内容が深くて自分の勉強不足(デザイナーとしても社会人としても)を実感した1日になりました。

もっともっと視野を広げて、これから大きく成長できるようにこれまで以上に努力し続けていこうと思います。

今回参加できなかったかたは、またの機会に参加してみてください♪

それではANAでした~!

sayurin

より効果的なランディングページを作ろう!
2015年11月10日

より効果的なランディングページを作ろう!②~

こんにちは! WATANABEです。 今回は、前回の投稿の続きで
「より効果的なランディングページの構成②(後半)」です!

ランディングページの構成
ランディングページ(以下LP)の基本構成
※①~④についての詳細は前回の投稿をご参照下さい。



④実績・お客様の声

事実に基づいたデータで信用を得よう!
③のベネフィットのセクションでお話しさせて頂いたように、 ユーザーが求めている物は、目的である「ベネフィット」です。
(ベネフィット:商品を購入することによって得られる良い状態や体験)

これに対して、
企業が販売するのは、あくまでもその手段である「商品」

実績エリアでは、
売り手と買い手のこの意識の差を埋めるべく、
下記のような事実に基づいたデータを記載し、
信用できる商品・サービスであることをアピールします!

 

メディカルコート株式会社

メディカルコート株式会社様 URL : http://www.fleuri.cc/lp/a02/

[ 実績エリアに記載するデータの一例 ]


・販売本数〇本達成

・通販サイトなどののランキング受賞履歴
・芸能人の愛用情報や、雑誌の掲載情報



実態のある商品であれば、製造工程や原材料をしっかりと明記したり、
その道の権威のお墨付きコメントなどを載せるのもいいですね!

また、こういった数字などのデータ以上に、
近年ユーザーが重要視しているのが、お客様のレビューや口コミです。 自分と同じ悩みを抱えていた人が、
この商品を買って解決したのであれば試してみたいと思いますし、
買おうか迷っている、まさに今の自分と同じ境遇である人の「買ってよかった!」という感想ほど、
購入を後押しするものはありません。

楽天のお客様レビューなどはこまめにチェックを行い、
とても良い実体験による喜びの声を頂いた場合は、ぜひ積極的に使わせて頂きましょう!



⑤アクションボタン

思わず押してしまうボタンで購買率を上げよう!


これまでのエリアをまとめ、
実際に、購入やお申し込みなどのアクションをユーザーに求めるエリアです。
これまでの長い文章や写真でいくらアピールしても、
最後にこのエリアでコンバージョンに結びつかなくては意味がありません!
このアクションボタンもとても重要役割をもっています。


ボタン①
ボタン②






上のボタンを例にとってみてみると、どちらがクリックしやすいでしょうか?

ネットで買い物をすることを「ポチる」と言ったりしますが、
多くの方が、右の方が「ポチっと」押してしまうような印象を受けると思います。

大手ECサイトでは購入の前に「買い物カゴに入れる」というボタンが存在しますが、
「購入する」よりも「カゴに入れる」の方が、気軽にクリックできますよね! こういった文章や、
ボタン画像の質感の1つをとってもユーザーへの印象がずいぶん違います。

ボタンの色は、一般的にはグリーンやオレンジがクリック率が高いと言われていますが、
しかし、ページ全体の色と比べた場合、ボタンの色が埋もれてしまう場合もあるので

サイトの中で目立つような配色や、
若い女性向けの通販サイトであればピンク、
限定セールで緊急性を求めるものであれば赤・・・など
販売する商品によって適したボタンを配置するのがベストです!

LPというと縦長でスクロールして読む場合がほとんどですので、
ページを回覧している中で、
ユーザーの購買意思が決定してすぐ購入ページへ誘導できる様、
LP内の最初や、途中途中にこの購入ボタンを配置することもあります。


このように、LPの各セクションはそれぞれに大事な役割を持っています。

やたら長くて読むのが大変だったり、
強引に購入を促してくるページも多くありますが、

ユーザーの知りたい情報を解り易く伝え、
また、商品に対して興味のなかった人にも、
「こんなのあったんだ!欲しい!」「申込みしたい!」という気持ちに自然に誘導できれば
それが一番、買う側にとっても嬉しいLPであると考えます! デザインオフィスTIGHTは、
企業様にもユーザーにも嬉しいランディングページを考え、制作を手掛けています。

どのような情報を載せたらいいか解らない、自分たちだけで文章を考えるのは難しい・・・ という場合もお任せ下さい!

購入や成約といった目的地へ導くためのストーリー作りも、スタッフがお手伝い致します!
企業様、店舗様の広告に効果的な良いページを一緒に作りましょう! 詳しくはぜひ一度お問い合せ下さい♪

ランディングページ 料金プランページはこちら

より効果的なランディングページを作ろう
2015年11月6日

より効果的なランディングページを作ろう!①~

皆さんこんにちは!
WEBデザイナーのWATANABEです。

ネット広告や通販、SEO対策に効果的なランディングページ。
今回のテーマは「より成果をあげるランディングページの作り方」!

効果的な構成や演出方法など、ランディングページの詳細に迫っていきます!


※ランディングページって何?という方は、
前回の投稿「宣伝効果大!売上UP!ランディングページとは」をぜひご参照ください。

名称未設定-1

上図がランディングページ(以下LP)の基本構成です。


販売する商品やサービスによって細かい部分は異なりますが、
この基本構成に、商品毎のプラスアルファを付け加えていく形になります。

この基本構成をマネして作っていけば、 とりあえずそれらしいLPが完成します!

しかし、LPの最終的な目的は、「ランディングページとは」でもお話しした通り 、
コンバージョン(問合せ・資料請求・注文などのこと)を得ること!


短時間で訪問者の心をつかみ、コンバージョンを得る為には 上図のセクションそれぞれが、
とても重要な役割をもっています。 効果的な演出はもちろん、説明の流れなどももちろん超重要です!

それでは、1つ1つのセクションを見ていきましょう!


①キャッチコピー

印象的なファーストビューで興味をひこう!


(右)オーガニックサイバーストア URL : http://www.rakuten.ne.jp/gold/ocs/
(左)メディカルコート株式会社 URL : http://www.fleuri.cc/lp/a02/


画像のサンプルサイトのように、提案する商品を、解り易く簡潔に伝えるエリアです。
特別キャンペーンや激安セールなど、 訪問者が一目見て何のページが解るように、
文章は極力少なく簡潔・明快であることが望ましく、
印象的で「なんだろう?」と気を引くキャッチコピーが多く用いられます。

食品であれば、美味しそうな良い感じの写真をメインにドーンと載せるのもいいですね!

サイトを訪れるユーザーは、 自分の求めている情報がそのサイトに掲載されているかどうかを
7秒以内に判断すると言われています。

ページ開いた際に、 スクロールせずに表示される画面(ファーストビュー)が購入率アップのカギとなる為、
このセクションは、文章の演出やデザイン面においても LPの中で最も重要な部分であると考えます!

②気づき・共感

ユーザーの不安や要望に気づかせよう!

名定-2
ケヤキインターナショナル様 URL : http://www.store-mix.com/ko-bai/product.php?pid=1508921

まずお伝えしたいのは、
「ページを訪れる訪問者のほとんどが、最初は商品を買う気はない」ということです。


痩せている女性に、いくら「ダイエットに効くよ!」と説明しても、買わないですよね!?
どんなにいいものを薦めても、困っていない、必要としていない人には価値はありません。

}このように購入などのアクションに至らない最大の理由は
「困っていない」「必要としていない」ということです。

逆に言うと、人が「困っている」「不満がある」所には大きな市場があるといえます!

上記の女性の例でいえば、
「便秘で困ってませんか?」「肌のトラブルで悩んでませんか?」と言われると、
あてはまる(=困っている)人がかなり多くなるはずです。

他にも、 「最近疲れていませんか?」「こうなったらいいと思いませんか?」といった具合に
ユーザー自身も把握していなかった要望や不安に「気づかせ」
「必要かも」「あったらいいも・・」と、まずユーザーに気づかせ、思わせることが重要になります。

訪問者の中には、自分の欲しいものを検索ページに行きついた方もいますので、
そういうもともと興味のある方に対しては、
「こういう事で困っていませんか?」という投げかけをして、
「そうそう!そうなの!」とガッツリ共感を得ましょう!

③ベネフィット

買うのは商品ではなく、ベネフィット!


商品を購入した後、お客さんにどんな良いことがあるのかを分かりやすく説明するエリアです。

ユーザーは商品事態を求めているのではなく、
商品を購入することによって得られる良い状態や体験を求めています。
(この良い状態のことを、ベネフィットと言います)

例えば、健康器具を購入する人は、器具を「使うこと」が目的ではなく 、
それを使った結果の「健康になること」が最終目的です。

ユーザーはベネフィットを求めていますが、売り手が販売しているのはあくまでも商品。
健康は売る事はできません。
絶対健康になります!と謳うことはできず、保証もできませんよね。

ユーザーはベネフィットを購入する気でいるのに対し、 売り手は賞品を販売している・・・。

別のものを売り買いしようとしているから、
購入するときに不安を感じるし、 期待と違うと不満を感じたりします。

だからこそ、信用のおける会社から買いたくなるわけです。 この売り手と買い手の意識のズレを埋める「信用」。


この信用を得る為に、
ネット広告や通販の世界では、
商品の品質ですとか原材料の説明、購入者のレビューや口コミを用います。

この信用にかかわってくるのが、④番目のセクション「実績」です!

長くなってきたので、今回はここまで!
次回は④番目のセクションから詳しく解説いたします!( `・ω・´)/



デザインオフィスTIGHTは、
ランディングページの制作も数多く手掛けています。
どういった内容を載せたらいいか解らない・・という場合もお任せ下さい!

購入や成約といった目的地へ導くためのストーリー作りも、
スタッフがお客様と一緒に考えます!
詳しくはぜひ一度お問い合せ下さい♪ ランディングページ 料金プランページはこちら