人生日々すれ違い通信 season2

元バツイチが日々思う事を書いたりハンドメイドしたり買い物で散財したりするよ。

【無料】webページ作成サービス Ameba owndを使ってみよう!

f:id:mizi:20170827145823j:plain

このサイト、無料webサービスで作ったんよ。

twitterで、クリエイターがアカウントの凍結をくらってしまい困ったよ〜!という話を読みました。

こんなとき、webサイトがあれば…!みたいな話になっていたので、無料webサイト作成サービス『Ameba ownd』を使ってwebサイトを作ろう!という説明を書いてみました。

インターネット老人会の会員なので、古臭い概念を書いている可能性はわりとあるのと、紹介しているサービスの使い方は2017年8月現在のものです。

mizupo.hatenablog.com なぜwebサイトは必要か?みたいな話は別記事にしました。

今回の記事はクリエイターのポートフォリオ作成を前提として書いていますが、同人サイトや趣味のサイトも作れるYO。

もくじ

Ameba owndでwebサイトを作ってみよう

類似のサービスはたくさんありますが、今回は日本語で利用できるサービスとしてAmeba owndで解説します。

www.amebaownd.com

簡単操作でwebサイトが何個も無料で作れる!というのがざっくりした説明で、詳しい人向けに詳細な特徴を書くと

  • 無料
  • ブログと固定ページの機能を持つ
  • html知識なしでもいける
  • スマホから編集可能な専用アプリがある
  • MTやWordPressから記事インポート可能
  • Google アナリティクス設定可能
  • 複数メンバーでの管理可能
  • 複数サイトの作成が可能
  • 独自ドメイン設定可能
  • html,cssは使用可能だが、jsは記述すると削除される。

みたいな感じです。

まずはどんなことができるのか、実際に作ったサイトと、作業内容を見て流れをみましょう。

これは私が実験で作ったwebサイトです。

hamster-sole.localinfo.jp

無駄に文字が流れていますが、90年代リスペクトです。

基本設定

f:id:mizi:20170827140048p:plain

難しいことせず、すぐにサイトを作ることができます。 テンプレートを選択することで、いいかんじのデザインをすぐに生成することが可能です。

テンプレートは自由度は低いものの、画像を差し替えることで自分だけのデザインになります。

f:id:mizi:20170827140125p:plain

サイト名、サイトの説明あたりをまずは編集してください。

ページ・ブログの編集

テキストで説明すると冗長なので、親切な方が作成された動画を貼っておきます。


Ameba Ownd(アメーバオウンド)でwebサイトを作成してみた!

実際にさわってみると、ページとかブログとかなんのこっちゃ、みたいな感じもするかもなので、後半で概念の説明をしています。

webサイトの概念をざっくり知る

レスポンシブ

近代のwebサイトは、PCとスマートフォンで見栄えが変化するようにできていることが多いです。このような、ブラウザのウィンドウサイズによって変化するデザインを「レスポンシブデザイン」と呼びます。

ブラウザのウィンドウサイズに合わせてデザインが変化するため、厳密にデザインをかっこよくしたい人はPCとスマートフォンでwebサイトを分けて作る人もいます。

とりあえず現代のwebサイトはPCとスマホで見栄えが変わる、という部分だけ理解すればOK。

f:id:mizi:20170827141003p:plain PCでの見た目

f:id:mizi:20170827141028p:plain スマートフォンの見た目

ページとブログ

今回説明したwebサイトの作り方では「ブログ」と「固定ページ」という概念があります。

f:id:mizi:20170827142107j:plain 言葉が一般的すぎて混乱するので、「ページ」はこの説明記事で「固定ページ」、「記事一覧」はこの説明記事で「ブログ」と説明しています。

固定ページは「プロフィール」などの、顧客にアクセスしてほしい欲求が強い情報に向いている形式。常にメニューに表示されますが、メニュー項目が多すぎるとユーザーは混乱してしまいます。そのため、固定ページはこの仕組みでは吟味して数を絞る必要があります。

f:id:mizi:20170827140822j:plain

ブログは記事を追加していくことができる、お知らせやギャラリーのように追加していく情報に向いている形式。情報の鮮度がユーザーにとって大事なものはブログ形式が向いていますが、過去の記事は押し出されてトップページに表示されなくなるので、重要な情報は固定ページにしたほうがよいです。

f:id:mizi:20170827140840j:plain

ブログのカテゴリとは?

ブログを読む時に「日記」とか「イラスト」とか、カテゴリを絞って情報を探す時があると思います。今回説明したwebサイトの作り方でもカテゴリの概念は存在します。

HOMEとなるページに「記事一覧」というブログのリストを表示できるブロックを追加することができますが、記事一覧はブログのカテゴリによって絞り込んで表示することが可能です。

hamster-sole.localinfo.jp

私が実験で作ったサイトのトップページは「info」と「other」というカテゴリを持ったブログ記事を、それぞれ別の一覧として表示していて、お知らせとそれ以外をユーザーが判別しやすく、探しやすい形にしています。

サービスが滅んだ時の話

webサイトを作ったのちに、サービスが終了してwebサイトが見られなくなってしまうことがあります。

新規顧客に対して説明用に使っているサイトなだけだったら、別のサービスに鞍替えするだけでよいのですが、顧客に再訪問してもらうと効果的な使い方にしている場合はurlが変わってしまうと再訪問できなくなって困ります。

そこで効果的なのが独自ドメインです。細かい説明ははぶきますが、スマホのキャリアを変更しても電話番号をそのままにすることができるMNPナンバーポータビリティ)みたいに、電話番号(url)だけ自分で持っておいて、キャリア(webサイト)の中身が変わってもユーザーはもとの電話番号(url)で連絡可能!みたいな感じです。

f:id:mizi:20170827140704j:plain

f:id:mizi:20170827140720j:plain

独自ドメインは年間1,000円から取得できるので、長くwebサイトを運用する計画があるなら取得してもいいでしょう。設定が初心者には難解かもしれませんが、検索スキルがある人なら解決可能かなと。

いくつか便利なwebサービス

webサイトを作る時に、利用すると便利なものたち。

アイコン素材

icooon-mono.com iconmonstr.com

フリー写真素材

www.pakutaso.com

クリエイターなら画像素材は持っていると思いますが、文字書きは素材が不足するかもしれないので…。ただ、フリー素材をそのまま使うとハイパーしろうとみが出てくるので、少し加工するとごまかせます。

f:id:mizi:20170827140304p:plain

フリー素材を加工する際は、加工して使用可か利用規約を確認してください。

googleフォーム

www.google.com

メールアドレスをページにテキストで書いておくとSPAM祭りが発生しがちなので、googleフォームで作ったお問い合わせフォームにリンクしておくと管理が楽です。ユーザーの回答を回答者が閲覧できる設定にしないよう注意!

最後に

サイト書く内容が思いつかない…今まで携わった仕事を表に出すことはできないので、サイトに載せるものがない…という人は、自分がサイトを作って人になにを伝えたいかを考えてみましょう。

ここらへんはのちに別途記事にします。