現役エンジニアがAmeba Owndを使って感じたメリット・デメリット


現役エンジニアがAmeba Owndを使って感じたメリット・デメリット

安く簡単に Webサイトを公開したいなら Ameba Owndアメーバ オウンド がお得かもしれません。

実際に Ameba Ownd を使ってみましたので、現役エンジニア目線でレビューいたします。

【今回利用させて頂いたプラン】

・ ベーシック(無料プラン)
目次
  1. 現役エンジニアがAmeba Owndを使って感じたメリット・デメリット
  2. Ameba Owndとは
  3. Ameba Owndでできること(メリット)
  4. Ameba Owndでできないこと(デメリット)
  5. Ameba Owndを利用する時にあった方がいいスキル
  6. Ameba Owndのデザイン編集力を身に付ける方法
  7. まとめ

現役エンジニアがAmeba Owndを使って感じたメリット・デメリット

Ameba Owndとは

image

左: 小説家 寒竹泉美さんのホームページ(https://kanchikuizumi.amebaownd.com/)、 右: ロッカーの ハシリコミーズさん(https://hasirikomi.amebaownd.com/)

Ameba Owndは、アメブロで有名なサイバーエージェント社が 2015年にリリースしたオンライン型の Web サイトビルダーで、個人・法人を初め様々なクリエイターさんの情報発信源として活用されています。

今回初めてユーザー登録し、利用してみましたが 5分もかからないぐらいで、簡単に Webサイト をリリースでき、「すごいなっ」と率直に思いました。

【Ameba Ownd で無料でできること】

  • ポータルサイト
  • ブログ
  • ショップ機能
  • 独自ドメイン

Ameba Ownd は、無料利用でも上記のようなサービスを利用でき、「あっ、もうレンタルサーバーいらないかも」と一瞬思ってしましたね。

無料利用枠では、ページ数 10ページという上限がありますが、”ブログ” は別。 ブログページ下部に広告こそ入りますが、トップページなどの固定ページでは広告は入らないので、デザインを邪魔しません。

同類サービスとして ペライチ や Wix.com などがあると思いますが、ペライチに比べると無料でできることが多く、 Wix.com に比べると画面のレスポンスが早く、機能がシンプルで Good と思いました。

Ameba Owndでできること(メリット)

先ほど ”できること” をご紹介させて頂きましたが、もう少し踏み込んだ部分のできることをご紹介できればと思います。

  • テンプレートの変更
  • CSS のカスタマイズ
  • HTML、 JavaScript の追加

「テンプレートの変更」、一見すると当たり前のように思える機能ですが、 Wix.com は一旦 Web サイトを作成すると変更できませんよね。 Ameba Ownd はページ作成後もテンプレートを変更できます。

「CSS のカスタマイズ」は、テンプレートの部分的なレイアウトを変更できる機能。カスタマイズ専用の画面からコードを追加すると、文字の大きさやいらない要素の非表示化など一通りのデザイン設定が可能。

image

メニューの文字サイズを変更 (https://oshimamasara01.amebaownd.com/)

追加する CSS コードもサイト全体用とモバイル用(画面幅800px以下)に分かれていますので、管理も比較的やりやすいですね。

「HTML、JavaScript の追加」は、トップページや NEWS 、 ABOUT などの固定ページ内に追加できる機能で、 jQuery などの動的な要素も利用可能。

image

カラム(列)レイアウトをセットする様子

ただし、ここでセットした内容は、実際にブラウザでページ読み込みされる際に iframe タグで読み込まれます。つまり 1つのページ内に何箇所も HTML編集ブロックを追加すると、ページの読み込みスピードに悪影響を及ぼし、なかなか表示されない、という現象に。 このあたりの処理は、ペライチの方が HTML コードのカスタムはしやすいように思いましたね。

一見すると Web サイト立ち上げ直後からよくできたように見える Webデザインですが、お好みの情報を発信しようと思うと Ameba Ownd に合わせるか、 CSS などをカスタマイズしてレイアウトを整える必要があると思いました。

尚、トップページなどの画面トップ部分については細かい設定不可で、 Ameba Ownd プレミアムプラン・ページのようなデザインはできないので注意しましょう。

image

https://www.amebaownd.com/plans


Ameba Owndでできないこと(デメリット)

  • カラムデザイン
  • JavaScript を用いたイベント
  • jQuery などを活用したカレンダー機能などの追加
  • 複数のサイト保持
  • データベースの活用
  • FTP接続
  • 商品一括インポート

ページ編集画面で必要なコンテンツを追加していける Ameba Ownd ですが、縦方向への追加は得意なものの、横方向(列)への追加、デザインについては CSS の知識がないと難しいです。

image

編集画面で画像追加した様子

Ameba Ownd のデフォルト機能で画像を追加すると、1行に 1つしか画像を追加できないので、1行に複数の画像を並べて表示する場合は、複数の画像が並んだ画像を用意する必要があります。しかし、その設定では画像変更や配置換えが生じる度にまた画像を作成する手間があり、手間です。この問題、 CSS の Grid や Flex を使うとスムーズに解決できるでしょう。

image

CSS の Flex を使用して、カラムデザインした例

HTML コードの編集欄は少し小さいですが、要件は満たしてくれるので Good。

「JavaScriptを用いたイベント」については、”できること” と ”できないこと” がある様子。これは追加する HTML コードが iframe で読み込まれるために発生する現象と思われます。 jQuery を用いた機能をいくつか試しましたが、画面幅などのプロパティの取得は可能な一方で、追加 HTML コード外の要素を操作するには、ひと工夫必要そうです。 Webデザインを考える上で、こうした ”できること” ・ ”できないこと” よく把握しておく必要がありますよね。

この他にも ショップ機能で BASE とリンクできるものの、商品内容はリンクされず、 Ameba Ownd は Ameba Ownd として商品登録を行う必要があります。

image

Ameba Ownd に商品を追加した後の BASE と Ameba Ownd の管理画面の様子

ショップ機能の決済周りも試したかったのですが、私がショップ機能を利用しようと思うと機能を有効化(公開)できず、現在問い合わせ中です。現在問い合わせ(メール)から 3時間経過していますが、ノーリアクションなので、物販については正直あまりむかない?と思いました。システム障害等でお客様に迷惑をかけても、運営元とタイムリーに連絡を取れないとチョット怖いですよね。

Ameba Owndを利用する時にあった方がいいスキル

image

静的なサイトを作成・管理するのだったら Ameba Ownd だな、と思った大島ですが、より納得の Ameba Ownd サイトにしようと思うと、以下のスキルがあれば Good でしょう。

  • HTML と CSS
  • 画像編集
  • イラスト

Ameba Ownd を利用する目的は人それぞれと思いますが、デザインを自分好みにしたいのはみんな一緒と思います。 本当に基本的な HTML と CSS があるだけで随分見やすい、愛着の枠サイトに編集することができるでしょう。

現在はフリーランスの案件で 「Ameba Ownd」 と検索しても案件ありませんが、今後 ペライチのように Ameba Ownd が浸透していくとデザイン案件も出てくるでしょうね。その時自身のサイトの編集経験があれば、 Ameba Ownd で仕事をとってくることにも期待大。

Ameba Owndのデザイン編集力を身に付ける方法

image

Ameba Ownd のデザイン編集には、「HTML、 CSS」それから「画像、イラスト」とご紹介させて頂きましたが、それらのスキル、どうすればゲットできるでしょうか?

  • YouTube や 参考書、ネットで”独学”
  • プログラミング・スクール

新しいことを学ぼうと思うと恐らく多くの方が YouTube を検索すると思います。「HTML Tutorial」 などで検索すれば該当チュートリアルをゲットできると思いますが、恐らく最初の方は "タグ" と聞いてもイメージしにくく、コードを見ることすら辛いと思います(少なくとも 6年前の私はそうでした)。 そしてなんとなく時間がすぎ、なんとなく疲労感を感じ、結局頭に入っていない、何もできない、ということも少なくないでしょう。

このせっかく勉強したのに ”何もできない” 現象、多くの場合で原因は明確で、その一番は 「手を動かしていない」 こと。

image

HTML、 CSS をパソコンで動かすには上図のような テキストエディタとブラウザが必要です

画面をみて学習することに比べて、実際に自分で手を動かすことは思ったよりパワーが必要で、その原動力には”モチベーション”も重要に。コードを編集できる環境を用意して、プログラムを書いて、結果を確認して、エラーを確認して、エラーを直して、という作業、最初のうちはかなりのストレスに。

このストレス、 CodeCamp の学習環境を利用すれば幾分改善されると思います。例えば、上図の「参考書」「テキストエディタ」「ブラウザ」というセット、 CodeCamp なら以下のようにスッキリ。

image

CodeCamp のプログラミング環境

CodeCamp なら勉強のために参考書を持って歩く必要はありませんし、テキストエディタのインストールなどしなくても直ぐにどこでも HTML 、 CSS を学習することが可能。また分からないことがあった場合、プロの講師から確実な解決方法をレッスンしてもらうことができます。

CodeCamp は、2012年の開業依頼オンライン・レッスンなので、Stay-Home シーズンでも安心して払った分の受講をできますね。

一流デザイナーのスキルが身に付く

CodeCampの無料体験はこちら

まとめ

今回実際に Ameba Ownd を使って Webサイトを作成してみましたが、皆様のご想像と同じようなイメージだったでしょうか? それとも「これじゃ自分らしいWebサイトなんて作れなさそう…」と思われましたか?

ブラウザ上でホームページを作成できるツールは、 Ameba Ownd 意外にも ペライチ や Wix.com などありますが、いずれもある程度の HTML や CSS 知識は必要です。 クラウドソーシングなどでも「Wix.com のホームページ作成が上手くいかないので、誰か代わりにデザイン(コーディング)してくれませんか?」という案件が定期的に存在します。

つまり、Web や HTML、 CSS をしっかり学んでおけば、自分だけのWebサイトだけでなく、仕事として収入を得られるということです。

パソコン自体が初心者でも、CodeCampの現役エンジニアによるマンツーマンレッスンなら、プロとして活躍していけるレベルに到達できます。

CodeCampはオンライン形式での無料体験を随時おこなっています。 タイミングが良ければ即日ご体験いただけますので、 公式ページ より、お気軽にお問い合わせください。


関連記事

オシママサラ
この記事を書いた人
オシママサラ
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp