めりーくりすます、めりーくりすます。
こんなにも一人で過ごすのが苦痛な日は、他人の幸せのために使います。
どうも山下です。
さて、アドベントカレンダー最終日を非エンジニアの僕が飾るというなんとも稀有な感覚ですが、初めて行きましょう。
今回は僕みたいなHTMLとかCSSとかかじった程度で、JSとかPHPなんてもうかすったくらいのど素人でも高速でティザーサイトを作る方法なんかを書いちゃおうかと思います。
３パターンでお送りしますね、めりーくりすます。
事前準備
まずはじめに、ある素材を全てデザイナーの方からもらっておきます。
ロゴやサービスに使った素材など、すべて。
クリエイティブの全て。
この世の全て。
基本はロゴだけで大丈夫かと思います。
ピクトグラムも集めておくと便利
ピクトグラムはフリー素材も多く、汎用性があるので最高。
下記のサイトをはじめとした海外サイトがたくさんあるので、サイトだけでもピックアップしておくと◎
パターン①:ツールで頑張る (難易度:低)
Adobe Muse
ツールで頑張るパターンは一番簡単、昔でいうとホームページビルダー的なツール、AdobeMuseを駆使！
画像をほいほいドラッグして行って、ほいほい設置して、動きも設定できて神。
ちなみにこのDripsのティザーサイトはMuseで制作しております。
公式が出しているチュートリアルもわかりやすいので、誰でも使えちゃうと思います。
Adobe MuseでWebサイトを制作する | Adobe Muse CC tutorials
本当、便利になったものですねぇ…。
パターン②：テンプレートで頑張る (難易度:中)
はい二個目、こっちはHTML/CSSやJSなんかの知識が少し必要。
とはいえチート的手段ですが、有料テンプレートを利用して作成！
有料テンプレって嫌煙されがちな気がしますが、人が稼働する時間を考えるとだいぶ安い、コスパ最高。
日本語のものが少ないのが難点ですが、下記の海外サイトなんかはすごく使いやすくて英語がわからなくてもなんとか行けるレベル！
ちなみにWordPressのテンプレはプラグインがどうとか色々面倒なので、HTMLの方がオススメどす。
パターン③：フレームワークで頑張る (難易度:高)
これはもうエンジニアさんにとっては基本的なアレですが、一応。
ここまで出来ればこんな当たり前的な記事はいらないと思いますが、一番自由度が高いのでパターンとして載せました。
こんな記事でも読んで、選定してくださいな。（筆者はここまで出来ないから説明が拙くてすみません）
Bootstrapだけじゃない！おすすめCSSフレームワーク6選まとめ！
つかここまできたらもうフロントエンジニアとして稼げるよね。
デザイナーにもエンジニアにも頼らず、やれることをやる事が正義（ジャスティス）
いや頼っても良いんだけどね？
専門職の人たちの手が空かないから進まないとかはよくないなーって事です。
助け合いでプロジェクトは回して行きまっしょい！