第23回
LIGPR
やってみた

誰でも簡単にハイセンスなホームページが作れるサービスがあると聞いたけど、嘘だった。

紳さん


誰でも簡単にハイセンスなホームページが作れるサービスがあると聞いたけど、嘘だった。

こんにちは! ライターの紳さん(@shinsan_lig)です。

突然ですが皆さん

会社のホームページをハイセンスにしたくないですか?

それも簡単に。格安で。

 

2

「ウチの会社のホームページ、イケてないんだよな〜」

という悩みを抱えている方、多いですよね。なんせLIGはWeb制作会社ですから、その手の問い合わせや相談は毎日のように来るんです。

その中には、「とはいえ予算がないからプロには頼めない……。htmlやcssの知識がないから自分ではつくれない…」という深刻な悩みを抱えた方もいらっしゃいます。

 

 

3

どうします?

「htmlやcssの知識がなくても、誰でも簡単に無料でハイセンスなホームページが作れるサービス」があったとしたら?

使いますよね。100%使いますよね。

今回、僕がPRを引き受けたのはそんなサービスです。

 

ハイセンスなホームページをつくってみた

DSC000166

というわけで、実際にそのサービスを利用してハイセンスなホームページをつくってみようと思います。

とりあえずスーツに着替えて撮影にきました。

 

DSC000141

素材として使えそうな写真をいくつか撮影し、ついでに自分のイメージに合った動画も撮って準備完了!

 

 

 

完成したハイセンスなホームページがこちらです!

 

 

 

 

 

↓ ↓ ↓ ↓ ↓

 

 

 

 

 

int5

嘘つき……。

※画像をクリックするとホームページに飛びます

 

 

 

 

 

 

 

ドキドキ反省会2017

4

今回、僕が利用したのは「BiNDクラウド」というサービスなのですが、誰でも簡単にハイセンスなホームページがつくれるというのは嘘でした。

そしてどうやら、僕の作った渾身のサイトを見てBiNDクラウドの開発元・株式会社デジタルステージのコウさんという人が怒り狂ってる……。という噂が流れてきたので、話だけでも聞いてみることにしました。

僕に言わせれば、こんなソフトを開発したこの人がすべての元凶なんですけど。

 

5

shinsan1
コウさん、この度はPRに失敗して申し訳ありませんでした。
kou2
本当に、残念な結果になったと思います。
shinsan1
ところで僕がつくったホームページは何が悪かったんですかね。我ながら、改めて見てみると「汚水」を思い浮かべました。
kou2
テンプレート通りにやっておけば大した問題はなかったはずですが。どうしたらこんな、クソダサいサイトになるんですかね。
kou2
特にページ後半のグラデのところなんて吐瀉物みたいなデザインですよ。

 

6

shinsan1
へへへ。すごいでしょ、僕のカスタマイズの力。
kou2
褒めてません。
shinsan1
で、具体的にどこがダサくなった原因なんですかね?

 

capture1

kou2
まず、スクロールして左上にクソダサいタイトルロゴが見えた瞬間、ダメだなって思いました。
shinsan1
ロゴのハイパー感が気に入ってるんですけどね。
kou2
それから、せっかくのWebフォントが雰囲気に合ってなくて台無しでした。
shinsan1
う〜ん。フォントの良し悪しは僕にはよく分かりませんね。

 

 

takeuchi_hyper

kou2
あと、8bitカラーの文字色や気持ち悪いグラデーションの数々もヤバイですね。てゆーか、BiNDのカラーセレクトにはないはずなんですけどね。
shinsan1
テキストサイト全盛期の時代に生まれたんで……。頑張りました。
kou2
後半でMARQUEEを使って文字を流してますけど、「まだブラウザサポートされてたんだ」ってビックリしましたよ。逆にここだけは勉強になりました。

 

 

capture2

kou2
この東京五輪のボランティアコスチュームみたいなタイトルのデザインは大丈夫ですか。パクってない?
shinsan1
まったく意識してませんでしたが、偶然似ちゃいました……。反省しています。

 

 

capture3

kou2
このMSゴシックのワードアートみたいなやつとか、久しぶりに見ましたよ。なんなんですか。
shinsan1
ちょっと変化球が欲しかったので……。Wordでつくりました。
kou2
そんなことしなくても、BiNDクラウドのSiGNっていう画像編集機能で補えるんですけどね。

 

 

kou2
……てゆーか、わざとやってませんか?
shinsan1
う〜ん……。正直いうと、後半はわざとやってますね。
kou2
わざとなのかよ。開き直んな。

 

 

capture5

kou2
あと、この忍者ツールズのアクセスカウンターとか本当にいりますかね?
shinsan1
え、これはいるんじゃないですか? アクセスの量とか分からなくなりますよ?
kou2
BiNDでGoogleアナリティクスの設定ができるんですけどね。
shinsan1
これがないとキリ番ゲッターが困ると思うんですが……。
kou2
いつの時代の話ですか。

 

 

7

kou2
BiNDクラウドを使うなら、テンプレート通り文字と画像をあてていくだけで良かったんです。それでハイセンスなホームページができたはずなのですが、残念です。
shinsan1
ふ〜ん……。
kou2
「コーディングはできないけど、Photoshopとかはちゃんと使える」というような方がいれば、イケてる画像素材を自分で用意することができるので有利ですね。
shinsan1
なるほど。そういうデザイナーっぽい人が会社にいると便利ですね。
kou2
そうですね。お金を掛けず、かなりハイセンスなホームページをつくることができるかと思います。
shinsan1
まぁ、今となってはどうでもいいことですけどね。
kou2
どうでもよくねーよ。

 

 

 

8

shinsan2
(あれ? 今、気がついたけどコウさんって……)

 

 

 

9

shinsan2
(すごく……イイ匂いがする……。柔軟剤かな?)

 

 

 

10

kou2
このクソみたいなホームページを改善するとしたら……。
shinsan2
(あっ……!)

 

11

kou3
おっと、すみません。手が触れてしまいましたね。
shinsan2
こ、こちらこそ、すみません。

 

 

 

12

kou1
で、こことかも少しスッキリと見せて……。
shinsan2
(えっ!? なにこの、距離感!?)

 

 

 

13

shinsan2
(もしかしてこれ、個人レッスン始まっちゃったのかな……?)
kou1
〜で……、〜とかも……、〜した方が……
shinsan2
(ドキドキし過ぎて、言ってることが頭に入らないよぉ……)

 

 

 

14

shinsan3
(こんなPR……初めてかも……)

 

 

 

ちなみにほぼカスタマイズなしで作ったホームページがこちらです。

↓ ↓ ↓ ↓ ↓

 

capture
※画像をクリックすると生まれ変わったホームページに飛びます

 

 

わりとマジですごいBiNDクラウド

capture12

そんなわけで、普通にやればハイセンスなサイトがつくれちゃう(むしろカッコ悪くするほうが本来は難しい)「BiNDクラウド」の使い方と特徴をちょこっとだけ説明します〜!

 

まずはプロモーションムービーをご覧ください。

Webの知識がゼロでもホームページがつくれるということがわかります。

 

しかもこのサービス、基本無料なんです!
(※初年度以降は月480円)

グワッハッハッ!! 嬉しすぎて、ついドワーフみたいな笑い声が出るわい。

 

使い方と特徴

capture11

まずはテンプレートを選びます。レスポンシブWebデザインに対応しているものがオススメです。

※レスポンシブWebデザインとは……PC、タブレット、スマートフォンなど、画面サイズが異なる様々なデバイスでWebサイトを表示した際、各々が最適なページのレイアウト・デザインに調整して表示する手法。本来、素人には無理。

 

何の知識もなくても簡単にレスポンシブ対応が可能なのは素晴らしい!

BiNDクラウドのスゴイところ その1
最初からレスポンシブに対応してる。

 

 

int0

BiNDクラウドの編集画面はこんな感じです。編集エリアがブロックごとに分かれているのがポイント。

テンプレートを選び終えたら、あとは超簡単。

最初から入っていた画像や文字を使いたい内容と差し替えて、レイアウト変更もブロックを入れ替えるだけ。

本当にそれでできちゃう。

テンプレートがそもそもハイセンスだから、素直に使えばデザインは崩れないようになっているんですねー。

 

int0

変更したいブロックを選んだら、各要素に画像やら文字やらを入れていきます。

各ソーシャルボタンの挿入も超簡単。SNSのアカウント情報を入れるだけで、一括でページに貼り付けることができます。

楽勝すぎぃ!

BiNDクラウドのスゴイところ その2
マジでhtmlやcssの知識が必要ないっぽい。

 

 

int1

ちなみに今回、トップ絵にイカれた感じのムービーを背景に設定したのですが……、

 

int2

これもYouTubeの動画のURLを入れるだけ。

挿入タグですらなく、URLです。 システムに甘えすぎ。

BINDクラウドのスゴイところ その3
全体的に「ゆとり」すぎて泣ける。

 

 

capture5

それと、BiNDクラウドのハイセンスさを際立たせているのが日本語Webフォント。GoogleのフリーWebフォントだけではなく、ライセンス契約しないと使えないはずのデザインフォントまで使うことができます!

マティスのような使いやすくて綺麗なフォントが簡単に設定できるんですね。普通に契約すれば結構、お高いのです。これはお得!

「ページ全体」「本文だけ」「タイトルだけ」など、フォントが反映される部分も好きに選び放題でした。

僕みたいにフォントを選び間違えないようにしましょう。

BiNDクラウドのスゴイところ その4
イケてるWebフォントの導入が簡単すぎて怖い。

 

 

int3

他にも、スライドショーやアコーディオンメニューなど、トレンド感を惜しみなく表現するための動的な要素を、JavaScriptの知識を学ぶことなく導入できました。

一つひとつの動きも色んなパターンから選べるので楽しいです。

 

int4

さらにさらに、オシャレな各種入力フォームも簡単に導入できます!

これなら、特に開発をしなくても問い合わせフォームを実装できちゃいますね。

BiNDクラウドのスゴイところ その5
デザインだけじゃない。システム的な要素も思いのまま。

 

 

もちろん、つくったホームページを取得したオリジナルドメインで公開することも簡単です!(それは有料)

他にも色々とスゴイらしいので、是非、実際に使ってみて確かめてくださいね〜

BiNDクラウドを始める

紳さん
この記事を書いた人
紳さん

メディアクリエイター

関連記事