HTML&CSSがわからなくても大丈夫！ 初心者でもwebサイトが簡単にできる「Blocs」の感想
どうもKai Hajimeです。
先日紹介した「Blocs」のトライアル版で自分のブログの紹介サイトを作ってみました。今回はその感想などをおすそわけしたいと思います。
前回の記事はコチラです。
「Blocs」はその名の通りブロック（部品）を組み合わせてwebサイトを組み立てます。まるでレゴで好きなモノを自由に作るように簡単にwebサイトを作成することができます。
皆さんご存知だと思いますが、まずは一般的なwebサイトがどのようなカタチで構成されているか僕なりにまとめてみましたので本題に入る前にご覧ください。
「そんなの知ってるわ！」と言う方は飛ばしてください。
一般なwebサイトの構造
通常、webサイトは大きく分けて「ヘッダー」「ナビゲーション」「コンテンツ」「フッター」というカタチが一般的です。
「ヘッダー」
基本的に企業のロゴやブランド名、ブログタイトルやロゴなど、実際の店舗の看板の役割です。
「ナビゲーション」
webサイト内の各コンテンツを閲覧・移動するための案内板です。デパートの入り口や各フロアにある地図みたいなもんです。
オマケにナビゲーションから一気に目的のコンテンツに飛べるようリンクが貼られてるモノがほとんどです。
ナビゲーションは用途にあわせて様々な種類があり、サイトのデザインによってどんなナビゲーションを採用するかでデザインも変わってきます。
「コンテンツ」
webサイトのメインとなる情報がある場所です。デパートでいうと各フロアのショップ、商品といったところ。
「フッター」
基本的にはメインのコンテンツを補足する内容・情報があるところ。
著作権、利用規約、プライバシーポリシーなどですね。個人ブログだとSNSのリンクなどでしょうか。
これらに加えてメインコンテンツの横に「サイドバー」を設けて２分割（もしくわ3、4分割、、、あまり見かけませんが）し情報を整理するという、最近のブログによく見るカタチもあります。
「Blocs」では残念ながら現在のバージョンでは「サイドバー」の機能はありません。今後のアップデートで実装されることを祈って首を長くして待ちましょう。
※「Blocs」で作ったサイトをスマホで観覧することを前提にされているのであれば、時代はレスポンシブルデザインが主流となっており、「サイドバー」が無いのは理にかなっているとも考えられます。
少し長くなりましたが、これら「ヘッダー」「ナビゲーション」「コンテンツ」「フッター」「サイドバー」がwebサイトを構成する主な要素です。
「Blocs」では大きく分けて３つだけ
「Blocs」でwebサイトを作る際の構造を、超簡単に説明すると以下のような構成になります。
A 上の「NAVBAR」
B 真ん中の「BODY」
C 下の「FOOTER」
たった３つです。
この３つ、A、B、Cの中に「サイドバー」を除く、「ヘッダー」「ナビゲーション」「コンテンツ」「フッター」を「BLOC」という各スタイルを持った「箱」としてはめ込みます。
まず、「BLOC」という箱をはめて全体像をざっくり作ります。
写真はあらかじめ準備された「BLOC」をはめて、そこに背景画像や文字をいれています。
画像の選択や文字など編集は画面左側の編集スペースで簡単にできます。
次に「BLIC」という部品をいれて機能を足していきます。
「BLOC」という箱の中に「BLIC」という部品が入れ子状になっているイメージです。
写真は僕のブログの過去の記事をコラム風にレイアウトしたものです。
「view more」からリンクで飛べるように設定してます。
このリンク設定も画面左の編集スペースで簡単にできました。
画面中央にあるのはあらかじめ準備された部品たち「BLIC」です。
「BLIC」には見出し<h1>〜<h6>、様々な表記スタイルをもつテキスト類やMediaと称される画像やビデオ、アニメーション効果、カルーセルというスライド式に画像を表示する機能、ボタンやアイコンなどなど、他にもかなり種類がデフォルトで用意されています。
「BLOC」の中に自分がレイアウトしたい部品「BLIC」を自由に配置して編集することができます。マニュアルはありませんが直感的に操作できました。
英語ですが、見るだけでも理解できるようにわかりやく説明されている動画がありますのでご覧ください。
僕も仕事から帰宅してのスキマ時間でブログの紹介ページを作ってみました。
navi、header部分にはブログへのリンクを、body部分にはブログの過去記事をコラム風にはめ込んだり、ギャラリーやスライド、自己紹介やSNSへのリンクを設定してみました。
footerにはBlocsのサイトのリンクを設置したりと、簡易的ですが自分のブログの紹介記事が初心者の僕でもざっと３時間程で完成しました。
過去記事や各リンクへの設定も簡単でした。
早いのか遅いのかはさておき、あまり悩むことなくサイトができたので現時点では満足しています。
コチラです。
注意点、補足
作業の途中で迷わないためのゴール設定をしましょう
簡単です。しかし、行き当たりばったりだと、どうしても右往左往してしまいます。
これはWebサイト製作だけでなく、他の製作物でも同じです。
僕はブログを書くの下手くそです。一つの記事を書くのにかなりの時間がかかってしまいます。
世の中には行き当たりばったりでも、読者にわかりやすく充実した内容を書く人たくさんいると思います。
たいていの方は展開を考えたり、自分なりのフォーマットをもとに文章を書いていると思います。
服飾デザイナーも建築家でも小説家でも、モノづくりをする人は実際の作業前に必ず自分なりの設計図を準備すると思います。
今回僕は何も考えずに作業を始めたので開始当初は
「あ〜でもない、、、こうでもない」と時間を無駄にしました、、、
そんな回り道をしないように、簡単なスケッチでも良いので自分なりの設計図をノートなどに書きましょう。
最終的に「自分がどんなサイトをつくりたいのか？」というゴール、出来上がりの絵があるとが効率的に作業が進むので製作時間を短縮できます。
ここまでやる必要はないけどカッコイイサイトの設計図
「Blocs」の操作・編集はもとてもシンプル
あらかじめ準備された各要素（BLOC）に各機能（BLIC）を割り当てて編集していくだけです。
カスタマイズしないのであれば、複雑なコードを書く必要は一切ありません。
ただ、どうしても新しく使うアプリケーションでは毎回仕方ないことですが、ツールの機能や操作を理解するのには多少の時間は必要です。
とは言え、操作するアイコンもシンプルなので直感的に初心者の僕でも問題なくwebサイトができました。
そのBlocsの良いところ、残念なところ
僕としてはHTML&CSSの勉強のために購入を検討していたので、次の点がBlocsのイイところだと思います
初心者なので0からサイトを構築することは非常にハードルが高く労力も時間もかかってしまいます。
Blocsだとサイトの基礎を簡単に作れる！ だから
- ざっくり作る
- 自分でカスタムしたい細かいところは、後からHTMLとCSSをでカスタムしていく
というやり方が良いと思います。（僕もこのやり方でいこう思っています。）
綺麗な（グチャグチャでは無い）HTML＆CSSをエキスポートできる
「ざっくりとした骨組みをつくった後に自分でカスタマイズ」というやり方をとるなら、初心者の自分にもわかりやすい綺麗なコードが出力されるの必須です。
この点でBlocsは最高のwebサイト製作の「下書きツール」としては現時点で最高のアプリケーションだと思います。
残念なところ、、、
正直、右も左もわからない超初心者なので、簡単にサイトができるという素晴らしい点しか目につきません。
あえて言うなら、Google Webフォントは使用できますが、日本語フォントには非対応という点と、サイドバーがない点が少々残念なくらいなのかな、、、というぐらい。
こんな方にオススメ
- HTML、CSSのスキルがないWebデザイナー、Webディレクターの方
- 今からwebデザイン、HTML&CSSを学びたい方
- 自分の店や会社、サークルなどのサイトを作りたい方 など
今回は「Blocs」がいかに簡単にWebサイトが作れるアプリケーションなのかということを試すために自分のブログの紹介サイトを作ってみました。
今回は設定していませんが、Google Analyticsの設定もできるのでBlocsで作成したサイトを本格的に運用することも可能です。
いまのところ広告は貼れないのでアフェリエイトには不向きなのかな、、、？しかし
「お店の外観や料理写真が載ったトップページがあり〜の、写真にコメント付きのメニューがあり〜の、ブログやSNSへのリンクがあり〜の」
みたいな、おしゃれでシンプルな飲食店のWebサイトや簡易的な企業のランディングサイトなどをサクッと作れるとあれば広告を貼る必要ないのかなと思います。
というわけでBlocs買います！
今の自分には充分すぎる機能。そして使い心地も良いので買います。
また試してない機能に「動画も埋め込める」「各要素にアニメーション効果を簡単につけられる」などあり、これらも使ってガンガン作っていこうと思います。
今後また様々なアップデートも予定されているようで楽しみです。
まとめ
Webサイトは作るだけ終わりではありません。
作ってからどう使うのかが本来の問題であり目的です。
いい年したオッサンがこのタイミングでHTMLやCSSの勉強を初めても、上には上が居ます。今から１から初めていては時間がいくらあっても先人たちに追いつくことは不可能に近く、また無謀な挑戦です。
しかし、「Blocs」のようなwebサイト製作の「下書きツール」があれば、下地をざっくり組んで、あとはHTMLやCSSでカスタマイズするという方法を取ることで、少しでも先人に追いつくことができるのではないかと考えます。
まずは人並みにWebサイトをつくることができるようになることが最優先事項です。
とにかく作りまくる！しかないですね。
簡単にWebサイトをつくりたい方はトライアル版があるので是非お試しください。
読んでいただいた方へ
ありがとうございました。
Kai Hajime
