更新日: 2022年8月2日
公開日: 2020年7月29日

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

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

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

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

・ ベーシック（無料プラン）

現役エンジニアがAmeba Owndを使って感じたメリット・デメリット
Ameba Owndとは
Ameba Owndでできること（メリット）
Ameba Owndでできないこと（デメリット）
Ameba Owndを利用する時にあった方がいいスキル
Ameba Owndのデザイン編集力を身に付ける方法
まとめ

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

Ameba Owndとは

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

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

今回初めてユーザー登録し、利用してみましたが 5分もかからないぐらいで、簡単に Webサイトをリリースでき、「すごいなっ」と率直に思いました。HTMLやCSSなどの知識がない方でも簡単にホームページを制作することができます。

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

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

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

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

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

Ameba Owndでできること（メリット）

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

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

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

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

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

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

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

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

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

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

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

https://www.amebaownd.com/plans

Ameba Owndでできないこと（デメリット）

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

ページ編集画面で必要なコンテンツを追加していける Ameba Ownd ですが、縦方向や横方向への要素を追加することは簡単ですが、横方向（列）への追加は最大で4つまでとなります。
良く目にする横にフリックしてスクロールさせることができるデザインについてはHTMLとCSSの知識がないと難しいです。

上記のように4つの要素を入れると右下に5つ目の要素が配置されます。
画像以外の要素のテキストでも同じような挙動でした。
ただし、5つ目の右下へ配置された要素を選択して、左端の1つ目の要素は直下へ設置することは簡単な操作で移動させて設置することができました。

どうしても4つ以上の要素をリストタグで横フリックしたい方へ

以下のようなリストタグ(ul li)を横にフリックすることができる横並びのコードをご紹介します。

/*style css*/

.card-carousel {
    scroll-snap-type: x mandatory;
    white-space: nowrap;
    overflow-x: auto;
    max-width: 1080px;
    width: 100%;
    height: 220px;
    overflow-y: hidden;
    margin: 0px;
    padding: 0px;
    margin: 0 auto;
    list-style: none;
}

.card-carousel li {
    position: relative;
    scroll-snap-align: center;
    vertical-align: top;
    display: inline-block;
    margin: 0 5px;
    width: 240px;
    height: 220px;
    white-space: normal;
    box-shadow: 0 0 5px rgba(0,0,0,.3);
    overflow: hidden
}

.card__wrapper {
    display: block;
    overflow: hidden;
    margin-bottom: 30px;
    color: #fff;
    text-decoration: none
    width: 240px;
    height: 100%;
}

.card__image {
    display: block;
    width: 100%;
    height: 100%;
}
.carousel__filter {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all .5s ease-out;
    background-color: rgba(0,0,0,0.6);
}

.card__image {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all .5s ease-out;
    object-fit: cover;
}

.card__wrapper:hover .card__image {
    -ms-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    transform: scale(1.05)
}

.card__image.lazyloaded+.card__preloader {
    display: none
}

.carousel-name {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
    margin: auto;
    color:#fff;
    z-index:10;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0.1em;
    font: 700 16px / 1.33 brandon_grotesque_, arial, sans-serif;
}

HTMLとCSSを使用して、横並びフリック可能なリストデザインした例

HTML コードの編集欄は少し小さいですが、要件は満たしてくれるので Good。
※1点注意・留意しておいたほうが良いこととしては、リストタグのリセットCSSを設定しないとデザインが崩れる可能性があります。ちなみに私はこれで10分ほど詰まりました。。

「JavaScriptを用いたイベント」については、”できること” と ”できないこと” がある様子。
これは追加する HTML コードが iframe で読み込まれるために発生する現象と思われます。

jQuery を用いた機能をいくつか試しましたが、画面幅などのプロパティの取得は可能な一方で、追加 HTML コード外の要素を操作するには、ひと工夫必要そうです。
Webデザインを考える上で、こうした ”できること” ・ ”できないこと” よく把握しておく必要がありますよね。

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

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

ショップ機能の決済周りも試したかったのですが、私がショップ機能を利用しようと思うと機能を有効化（公開）できず、現在問い合わせ中です。

現在問い合わせ（メール）から 3時間経過していますが、ノーリアクションなので、物販については正直あまりむかない？と思いました。システム障害等でお客様に迷惑をかけても、運営元とタイムリーに連絡を取れないとチョット怖いですよね。

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

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

HTML と CSS
画像編集
イラスト

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

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

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

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

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

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

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

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

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

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

CodeCamp のプログラミング環境

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

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

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

無料カウンセリングはこちら

まとめ

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

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

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

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

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

※こちら一部古い情報がございますので、間違えや訂正が必要な場合はお手数お掛けしますが、お問い合わせよりご教示いただけますと幸いです。