Strikinglyを使うと、自分の同人活動を紹介するWebサイトを30分で作れちゃう
2016/10/08
ごきげんよう、蟻坂(4risaka)です。
今日は今流行のオウンドメディアを超スピードで制作するチュートリアルです。
目次
自分のサイト、持ちたくありませんか？
同人活動に限らず、制作物を紹介したりする自分のサイトを持ちたくありませんか。
この頃はSNSの発達で個人のサイトを持つ意味は薄くなってきたかもしれませんが、
単純に自分の城を用意して、例えば弊サイトのように
ブログを書いて発信したりとか、他愛もないプロフィールを並べてみたりとか、
かっこいいギャラリーを整備したりとか、自己満足欲を埋めるという創作の本分に似たところが
サイト作りにはあるとおもうのです。
ところが、Webサイトの制作というのは厄介でして
- HTML
- CSS
- JavaScript
- レンタルサーバー
を始めとしたWebコーディングの知識やレイアウトデザインのセンスと言った具合に
ゲーム制作ほどではありませんが総合的な制作スキルが求められるというハードルの高さがあります。
ムズカシイ！
……そこで、そんな現実を一瞬で打破できるツールがありますので教えちゃいます。
なんとパソコンで見てもスマートフォンで見ても勝手に綺麗に表示されるサイトができます。
Strikingly
Strikingly(すとらいきんぐりー)というサービスがあります。
このサービス、簡単に言うとかっこいいデザインのWebサイトを直感的に作るサービスです。
どれくらい直感的かというと、本記事を書く直前に30分位弄ったらなんか完成して公開できたくらい直感的です。
というわけで、本記事ではさくさくっと
「同人音楽をやっている人が、製作依頼を受け付けるためのランディングページ」を作ってみることにします。
文章を考えるのは骨が折れるので、ありんこ書房の同じ主旨のページを流用します。
ページの構成や主旨も同じ物を目指してみましょう。
製作依頼受付ページのチュートリアル
というわけでまずは登録をしてみましょう。
登録名とメールアドレス、パスワードを設定してGO。
テンプレートを選ぶ画面が出てくるので、適当に選びます。
今回は「ポートフォリオ」カテゴリから「LIGHT DECK」を選びました。
もしかしてテンプレートでデザインがガチガチに縛られるんじゃないの？と思うかもしれませんが、
「セクション」と呼ばれる個別ページごとにちょっとずつ調整可能ですのでご安心ください。
タイトルをつくる
というわけでこれが編集画面です。
予め背景画像などが入ったページが表示されていますが、
カメラは扱っていないのでまず背景画像を変えてみます。
右上の「背景」をクリックすると背景を変えられます。
Strikinglyには自由に使える画像が大量に収録されていますので、
「画像なんかねえよ！」っていうひともご安心ください。
選び放題です。
でも「オリジナリティがほしい！」というひとの場合、画像を予め用意しておいて
「画像をアップロード」ボタンから画像をアップロードすることで同じように使えます。
背景画像は出し方を選べます。
大きな画像ならば「拡大」で画面いっぱいに表示、
チェック柄など、パターンの画像ならば「タイル」で並べるのがよいでしょう。
また、背景を選ぶダイアログの「画像を加工・編集する」を選ぶと編集画面が開いてその場で加工できます。
なんとPhotoshopなどのツール無しでクールな画像を作れます。これはすごい。
お次はタイトルの文字を変更しましょう。
文字列があるあたりをクリックするだけで即刻編集モードになります。簡単！
というわけで背景とタイトル文字をさくさく差し替えてタイトルはこれくらいでできあがり。
依頼の詳細説明をつくる
タイトルの次は、依頼ページの大事なセンテンスである
「どういう依頼を受けるのか」「有償か無償か」などの
細かい条件を書いたページをつくります。
タイトルが表示されている辺りから下にスクロールすると、
テンプレート「LIGHT DECK」の場合テキストを編集するページが予め用意してあります。
今回はこれを改造してつくってみます。
……といっても「クリックしたら即編集モード」になるルールは一緒なので
全然迷うことはありません。
編集モードはハイパーテキストエディタになっています。
「B」を押すと太字、箇条書きのアイコンを押すと箇条書き、などの操作が直感的にできます。
文字の大きさの操作だけちょっと特殊で、
フォントサイズを数字で指定するのではなく「小さい」「普通」「大きい」が基準になります。
また、これは残念なポイントなんですが選択したテキストボックス全部の文字サイズが変化します。
一部だけ変えたいんですけども。。。
ここで、「左から右じゃなくて上から下に説明のボックスを並べたい」とおもったとしましょう。
右上の「レイアウト」ボタンを押すと一瞬で数パターンを切り替えできます。
ちょっと脱線すると、これ、非常によくできているとおもっておりまして、
実はWebサイトの構成ってレイアウトパターンはいくつか定石が決まっていて、
実質そのうちどれから選んでコーディングする……というのが実情だったりします。
その「レイアウトの選択」を一切の手間を排除して直感的に設定できます。すばらしい！
……というわけで、依頼条件や範囲の細かい説明をつらつら記述して、
詳細ページはここまで。
このページ、どちらかといえば「何を書くか」のほうが重要ですね。今度別の機会に記事にしましょうか。
SoundCloudのポートフォリオをつくる
同人音楽のひとなので「何を作ってるの？」という訪問者さんの疑問を
解消してあげなければなりません。
ここはひとつ、SoundCloudでポートフォリオを作ってそれを載せましょう。
SoundCloudでプレイリストを作る方法はここでは割愛しますので、
アップロード方法およびプレイリスト作成方法以下のサイト様を参照ください。
「SoundCloud」の使い方（初めて使う人へ、これだけ知ってたら楽しめる！） | フクモリblog
「SoundCloud（サウンドクラウド）」でプレイリストを作成する方法 | nanapi
プレイリストが用意出来たとして、
Strikinglyに追加するには以下の手順を踏みます。
まず、サイドバーの「セクションを追加」を選びます。
いろいろ出てきますので「外部アプリ連携&html」を選びます。
セクションが追加されます。
画面に従って、真ん中の「クリックして、APP STOREを覗いてみましょう。」をクリックします。
新しく窓が開きますので、「メディア」タブを選びます。
「SoundCloud」があるのでこれを選びます。
※以下の画像はStrikinglyではなくSoundCloudのプレイリストページです。
URLを入れろと云われるのですが、ここで入れるURLは
SoundCloudページのプレイリストをShareボタンで共有しようとした時にでてくるURLになります。
あとは背景と文字を差し替えてできあがり！
できあがり
はい、最低限
- タイトル
- 依頼の条件
- ポートフォリオ
- メールフォーム(テンプレートにもとからついてる)
を載せた依頼ページができあがりました。
詳細弄りたいところもあるかもしれませんが、
コンテンツとしては十分なので公開しちゃいましょう。
おっと、その前に細かい設定をいじります。
サイドバーの「設定」ボタンからサイト名などを決めます。
ちなみにStrikinglyには有料プランがあり、
この記事は無料プランを前提として書いているのですが、
この「設定」画面、無料プランだとほとんど何も操作できません。
というわけで詳細は省略します。
ちなみに、Google Analyticsの設定は無料プランでも可能ですので、
ランディングページとして大きく意義のあるものができるとおもいます。
サイドバーの「公開」ボタンを押します。
ちなみに左の「保存」ボタンはサイトの制作を中断するときに使います。
基本的に勝手に保存されるのでこまめに押す必要はなさそうです。
公開ボタンを押すとURLが発行されますので、
twitterなどでシェアして宣伝、宣伝です。
補足: 機能の追加と欠点のハナシ
その他の機能
手っ取り早く仕上げるためにテンプレート改造で進めましたが、
実は「セクション」と呼ばれるページの素を選んで追加することで
コンテンツの構成を自由に改造できます。
サイドバーの「セクションを追加」を選ぶと
先ほどのSoundCloudの例に限らず色々追加できます。
機能としては普通のWebサイトと全く遜色のないものが作れます。
- ブログページ
- twitterやInstagramのタイムラインを表示
- 画像のギャラリーページ
- メルマガ登録フォーム
- etc.
HTMLのコードをガリガリ書くよりずっと直感的で愉しいので
色々試してみるのが早いと思います。
有料版と無料版の違い
料金プランページに無料版と有料版の違いがあります。
個人的に大きな違いは以下の3点かと思います。
- 独自ドメインが使えるようになる
- HTML直接編集
- 広告が消える
独自ドメインと広告が消える点はブランディングの観点から有用です。
また、HTMLを直接かけるようになるので、
Strikinglyでスケルトンをちゃっちゃと作って、作りこみたいところは自分で書くという使い方もできるようになります。
ただし、1年プランで8ドル、HTMLも編集しようとすると16ドルかかります。
ドメインとメールアドレスがおまけでついてくるとはいえ、ちょっと割高なのは否めません。
残念なポイント
デザインに制限があるのは「そういうサービス」なので欠点に数えません。
ただ2点困ったポイントがあるので書いておきます。
退会ボタンがない
退会ができないわけではないのですが、お問い合わせページから運営に連絡する必要があります。
実際やることはメールを送るだけなので、必要になった際は以下のヘルプセンターをご参照ください。
アカウント削除・退会方法 – Strikingly ヘルプセンター
気軽に退会できないっていうのは少々面倒です。
日本語フォントがない
正確には有料版だとカスタムできそうな雰囲気があるのですが、
無料版だと自由度が少ない感じでした。
ただ、明朝体すら選べないのはちょっと残念です。
ただこれは他の海外産Webサイトサービスにも言えるポイントですので、
まー手軽に作れるぶんの制限といったところでしょうか。
まとめ
というわけで、簡単に依頼ページを作るチュートリアルでした。
応用すればイラストのポートフォリオページ、
ブログページを作ると普通のオシャレなWebサイトとして十分運用可能です。
Webサイトの作り方わかんねえ！でも自分の城ほしい！とお考えの方は
まず試してみてはいかがでしょうか。