どうも、まさとらん（@0310lan）です！
今回は、さまざまなチュートリアルコンテンツを簡単に作成・公開できるWebサービスをご紹介します！
Webサイトに埋め込むことも可能で、ヘルプページやQ&Aなどより直感的に分かりやすいコンテンツを手軽に作成することができます。
【 Stonly 】
実際のサンプルデモは以下のようになります！
チュートリアル以外にも、チーム内の情報共有として使ったり、コーディングガイドや学習コンテンツなど、さまざまな用途に活用できるのが大きな特徴です。
■「Stonly」の使い方
それでは、「Stonly」がどのようなサービスなのか基本的な使い方から見ていきましょう！
まずはサイトのトップページから無料のユーザー登録をします。
ユーザー名・メールアドレス・パスワードを設定すれば完了です。
すると自分専用のダッシュボード画面が表示されます。
新規プロジェクトを作成するために画面中央のボタンをクリックしましょう！
好きなプロジェクト名を入力します。
チュートリアルを作成する編集エディタが表示されました！
このエディタで、インタラクティブなチュートリアルをすべて作成できるように設計されています。便利な機能が盛りだくさんなので、それぞれの詳しい使い方について次の章から解説していきいます。
■チュートリアルコンテンツの作り方
「Stonly」でチュートリアルコンテンツを作成する編集エディタは4つの画面で構成されています。
それぞれの役割は以下の通りです。
- 【コンテンツ】解説用の文章を作る
- 【メディア】画像・動画などを挿入する
- 【ステップ】画面遷移のボタンを作る
- 【アウトライン】目次の構成を表示する
上記のなかでも、特に重要となるのが【コンテンツ】と【メディア】です。
【コンテンツ】は、チュートリアルの文章を作成するテキストエディタ機能を提供しており、ブログを書くように解説文を入力できるようになっています。
太字・リンク・リスト…など、基本的な機能も搭載されています。
また、本文内に警告や補足情報を効果的に配置する機能も備わっているので便利です。
文章だけだと伝わりにくい場合に【メディア】を使うと効果的です。
たとえば、画像をアップロードすると専用の画像編集エディタが起動します！
このエディタでは、画像内にテキストを挿入したり矢印などのポインタを貼り付けることができます。
他にも、範囲を明確にする四角・円の線を描画したり、カラーの変更や線の太さなども自由に変えられます。
このような画像編集機能を使うことで、たとえばスクリーンショットの画像を使って操作説明のチュートリアルを簡単に作成できるわけです。
画像だけでなく動画コンテンツも挿入可能で、YouTubeやVimeoなどの動画URLをコピペするだけですぐに利用できます。
動画の場合は、どこから再生するのか秒単位で指定可能で、1本の動画から見せたいシーンだけを視聴できるように設定できます。
また、プログラミング用のテキストエディタも搭載しています。
100以上の言語に対応したシンタックスハイライト付きで、コードの解説や埋め込みコードの貼り付け場所の説明など、さまざまなケースで便利に使えるでしょう。
■画面遷移のボタンを作ろう！
ひとつひとつのチュートリアルコンテンツはお互いにリンクさせることが可能で、複数のコンテンツを組み合わせることでインタラクティブなチュートリアルを作成できるのでご紹介しておきます。
方法は簡単で、編集エディタの【ステップ】機能を使います。
たとえば2つのチュートリアルをリンクさせるだけなら、【New step】からリンクさせたいコンテンツを選択します。
プレビューでチュートリアルを確認してみると【次へ】ボタンが表示されているのが分かります。
このボタンをクリックすることで、【ステップ】の設定で選択したチュートリアルページに遷移するというわけです。
また、ボタンは同時に複数配置することも可能なので、たとえば複数のチュートリアルコンテンツとリンクさせておけば、ユーザーがインタラクティブに選択できるようになります。
しかし、ボタンが増えてくると【アウトライン】には多数の目次であふれかえることになります。
そこで、便利なのがフローチャート機能です。
画面上部のアイコンからこのボタンを選択してみましょう！
すると、現在のチュートリアルコンテンツの構造を自動的にフローチャートで確認できるようになります。
これにより、複数の分岐点が明確になりチュートリアルを効率よく設計することが可能です。
「Stonly」ではこれらの機能を活用することで、簡単にチュートリアルコンテンツを作成できるのが大きな魅力です。アイデアしだいでは、情報共有、ヘルプサポート、学習コンテンツ…など、さまざまなコンテンツを簡単に構築できるようになるでしょう。
■チュートリアルを公開してみよう！
「Stonly」で作成したチュートリアルコンテンツは、簡単にネット上へ公開できます。
コンテンツがある程度完成したら、画面上部の【PUBLISH】ボタンをクリックしましょう！
たったこれだけで、ネット上へ公開することができます。
共有機能から生成されたリンクの確認や、埋め込みコードをコピーすることができます。
あとは、リンクをシェアしたりコードをWebサイトの好きな場所に貼り付ければ、チュートリアルを世界中の人に使ってもらうことができるわけです。
さらに、コメント機能も搭載されているのでユーザーと意見交換をおこなうことも可能です！（OFFにすることも可能）
また、公開されたチュートリアルコンテンツはスマホにも自動で最適化されているので、デバイス問わずどこからでもアクセスして利用できるのも大きな魅力でしょう。
他にも、アクセス解析機能やバージョン管理システムなども搭載されており、チュートリアルコンテンツの作成から公開までこのサービス1つで集中管理できるのは非常に便利ではないでしょうか。
■ 動画でプログラミングが学べるpaizaラーニング
動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。
「Python入門編」「C#入門編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。
■まとめ
今回は、簡単にチュートリアルコンテンツを作成・公開できるサービスについてご紹介しました。
これまでチュートリアルの作成に特化したサービスというのはあまりなく、しかも誰でも簡単に操作できるシンプルな設計とインタラクティブなコンテンツの作成ができるのは貴重な存在だと感じます。ヘルプページやQ＆Aなどでは分かりにくい内容を「Stonly」は補ってくれるでしょう。
「Stonly」はまだリリースされたばかりで、バージョンアップも活発におこなわれています。
チュートリアル開発にご興味のある方は、ぜひオリジナルのコンテンツを作成して公開してみてはいかがでしょうか。
＜参考リンク＞
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
詳しくはこちら
そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
詳しくはこちら
