paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」(https://paiza.jp ギノ株式会社)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

面倒な設定ゼロ!誰でも高品質なブログ記事を無料で作成できる「Caramella」を使ってみた!

f:id:paiza:20180620114850j:plain

どうも、まさとらん(@0310lan)です!

今回は、誰でも簡単に高品質なブログ記事を作成して手軽に公開もできる無料のWebサービス「Caramella」をご紹介します!

面倒なサーバー環境の構築・設定などは一切不要、さらに豊富なテンプレートやウィジェット機能を活用することで短時間で誰でも質の高いWebページを作成することができます。

ブログ以外にもランディングページや告知ページなど、いろいろな用途にも使えるのでぜひ参考にしてみてください!

Caramella

f:id:paiza:20180620114937j:plain

■「Caramella」の使い方

それでは、実際に「Caramella」を使いながらどのように利用すればいいのかを見ていきましょう!

サイトにアクセスしたら、画面上部にある「Join」ボタンをクリックします。

f:id:paiza:20180620115006j:plain


SNSを使うかメールアドレスを利用してユーザー登録をします。

f:id:paiza:20180620115048j:plain


すると自分専用の「マイページ」が表示されます!

f:id:paiza:20180620115133j:plain

この画面上で新規にブログ記事やWebページを作成して管理することができます。


新規作成する場合は、画面上部の「+」アイコンをクリック!

f:id:paiza:20180620115215j:plain


すると、あらかじめ用意されている豊富なテンプレートを選択できるようになります。

f:id:paiza:20180620115230j:plain

用途別にさまざまなジャンルに分けられており、およそ80種類以上のテンプレートを選択できます。

ブログ記事だけでなく、ランディングページや告知ページなどさまざまなWebページを自由に作成できるのが魅力です。

また、どのテンプレートもゼロから自分でカスタマイズできる自由度の高さも特徴でしょう。


気に入ったテンプレートがあったら「Use」ボタンをクリックしてみましょう!

f:id:paiza:20180620115251j:plain


すると、テンプレートの編集用エディタが表示されます!

f:id:paiza:20180620115310j:plain

あとは、この画面上で好きなように記事を作成したり、Webコンテンツを追加していくことでWebページを作っていくことができるわけです。

■「Caramella」の基本操作について

それでは、「Caramella」のテンプレートを使いながら基本的な編集方法を見ていきましょう!

テンプレートを利用するだけなら使い方は非常に簡単で、テキスト部分をクリックして文字列を入力していくだけです。

f:id:paiza:20180620115339j:plain

英文字で書かれているテキストはすべて編集可能で、クリックするだけで直接入力していくことができます。


画像については、ドラッグ&ドロップするだけで即座に適用することができます。

f:id:paiza:20180620115408j:plain


「Image drop」と記載のある箇所にはすべて好きな画像を挿入できます。

f:id:paiza:20180620115422j:plain

もちろん、それ以外の箇所に画像や動画・音声などのマルチメディアコンテンツを追加する機能も搭載されています。


また、テンプレートの中で不要なコンテンツはクリックするだけで削除することもできます。

f:id:paiza:20180620115441j:plain


テキスト部分を範囲選択すると、「カラー」「リンク」「スタイル」などのカスタマイズも可能です。

f:id:paiza:20180620115457j:plain

基本的にテンプレートを編集するだけなら、これらの操作だけで誰でも簡単にカッコいいWebページを作成することができるでしょう!

■「ウィジェット」を活用した独自サイトの作り方

「Caramella」の大きな特徴として、さまざまな機能をWebページへ簡単に追加できる「ウィジェット」があります。

これは、画面左側にあるメニューボックスからドラッグ&ドロップすることで利用できる機能になります。

f:id:paiza:20180620115519j:plain

Webページの横方向や縦方向に複数追加することができるようになっているのが特徴です。
そのため、複数のウィジェットを横並びにしたりなどカスタマイズの自由度が高いわけです。

そこで、特にオススメのウィジェットをいくつかご紹介しておきます!


例えば、価格表などを簡単に作成できる「Price Table」があります。

f:id:paiza:20180620115534j:plain

Webサービスやオリジナル商品の価格を、見栄えの良いデザインで簡単に追加できるので重宝します。

価格やテキスト部分を直接編集できるように設計されているので、誰でも簡単にカスタマイズできます。


カウントダウンタイマーを簡単に設置できる「Counter」。

f:id:paiza:20180620115553j:plain

スキンのデザインや「月日」「時刻」を自由に編集して利用できるので便利です。


チャットのようなデザインでテキストを挿入できる「Chat」ウィジェット。

f:id:paiza:20180620115607j:plain

好きなアイコン画像をアップロードでき、簡単にチャット風のテキストを再現できるので面白いコンテンツを作れると思います。


インフォグラフィックを簡単に作成できる「Out Of」。

f:id:paiza:20180620115625j:plain

コレを使うと、統計や数値データなどを分かりやすいアイコンで視覚的に訴求できるので便利です。

アイコンもジャンルごとにたくさんそろっているので、すぐにでも作成できます。


定番のチャート・グラフを追加できる「Chart」。

f:id:paiza:20180620115647j:plain

一般的な円グラフ・棒グラフ・折れ線グラフなど複数の種類を選択可能です!


また、数値データを画面上で簡単に入力できるエディタがあるので編集も非常に簡単なのが魅力的です。

f:id:paiza:20180620115705j:plain


面白い機能として「QR Code」ウィジェットもあります。

f:id:paiza:20180620115717j:plain

これは、リンクやメールアドレスなどの情報を登録するだけで、自動的にQR Codeを作成して表示できるようになります。

ユーザーへ情報提供する際の手段としていろいろ活用できるかと思います。


また、SNSボタンの設置ができる「Social Links」もあります。

f:id:paiza:20180620115732j:plain

主要なWebサービス用のアイコンが用意されており、自分のユーザー名を入力するだけですぐにボタンとして生成&表示してくれます。

他にも、カレンダーやツイートの挿入、マルチメディアの埋め込みなどさまざまな機能を持ったウィジェットが用意されているので、まずはどんなことができるのかを試してみると面白いでしょう。


ちなみに、これらのウィジェットを利用したサンプルページが公式で公開されているのでリンクを掲載しておきます。

サンプルページ | Caramella

■Webページを公開してみよう!

Webページがある程度完成したら、ネット上に公開してみましょう!

そこで、まずはプロジェクトのタイトルを入力しておきます。

f:id:paiza:20180620115833j:plain

このタイトルのテキスト部分がそのままWebページのURLになるので、なるべく英文字のほうがいいでしょう。


あとは、画面左側にある「Post」ボタンをクリックするだけです!

f:id:paiza:20180620115847j:plain

これだけで公開作業は完了です!


画面上部のメニューから「View Posted」をクリックすると、公開されているページにアクセスすることができます。

f:id:paiza:20180620115902j:plain

URLをそのままコピーすれば、SNSやメールなどで知人にシェアするのも簡単です。

公開したページは後から非公開にすることも可能ですし、複製して新規ページに作り変えるのも簡単なので非常にお手軽です。

ちなみに、「Caramella」で作成したWebページは自動的にレスポンシブデザインになっているので、タブレットやスマホからの閲覧にも最適化されています!

■動画でプログラミングが学べるpaizaラーニング


動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。

Python入門編」「C#入門編」「JavaScript入門編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。

■まとめ

今回は、誰でも簡単に高品質なブログやサイトを作成できる「Caramella」を駆け足でご紹介しました。

非常に短時間でブログやWebサイトを作成して公開できるフットワークの軽さが魅力的で、しかもデザインが高品質なのでキレイなページに仕上がるのが大きな特徴といえるでしょう。

今回ご紹介した内容はすべて無料で使えるので、Webページ作りにご興味のある方はぜひトライしてみてください!



 

paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

詳しくはこちら

paizaラーニング

そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

詳しくはこちら

paizaのスキルチェック





※このブログで紹介しているキャンペーンやイベント、およびサイト内の情報については、すべて記事公開時の情報となります。閲覧されたタイミングによっては状況が変わっている場合もございますのでご了承ください。

ITプログラマー・エンジニア転職・就活・学習のpaiza

プログラミング入門講座|paizaラーニング

PHP入門編Ruby入門編Python入門編Java入門編JavaScript入門編C言語入門編C#入門編アルゴリズム入門編AI機械学習入門

エンジニアのためのプログラミング転職サイト|paiza転職

プログラミング スキルチェックエンジニア求人一覧

未経験からエンジニアを目指す人の転職サイト|EN:TRY

プログラミング スキルチェックエンジニア未経験可求人一覧

エンジニアを目指す学生の就活サイト|paiza新卒

プログラミング スキルチェックエンジニア求人一覧

ブラウザを開くだけで エディタ、Webサーバ、DB等の開発環境が整う|PaizaCloud