2020年04月04日
Adobe Spark で架空組織のそれっぽいホームページを作ってみた。
こんちわ〜
導入の小噺が思いつかなかったので、これから記事の冒頭では、作業中に聴いている曲の紹介でもしようかと思います。
この記事の作成中に聴いているのは
です。
Bebe Rexha の突き抜けるような高音と、Martin Garrix の気持ちの良い曲展開が相まって聴いててストレスが吹っ飛ぶ気持ち良さがあります。
オヌヌメです。
今回、ちょうど暇を持て余していたので「MESS」のホームページを作ってみました。
Webページを作るときによく使うHTMLを使わずにお手軽に作成できるので、興味がある方向けにやり方とかをまとめていこうと思います。
長くなるので、暇なときにみてってください。
作業環境
Adobe Spark（ブラウザ版）を使用しました。Adobe Sparkアカウントを作成すれば無料でできる？らしいです（私は元々Adobeに課金しちゃってるので、もしかしたらお金せびられるかも…）
スマホやタブレットで作成したい場合は、Adobe Spark Page（iOS版） というアプリでできるそうです。（今回は使ってません）
作業端末は、アカウント共有ができればなんでも良さそうです。私は mac book を使って chrome 上で作業しました。
Adobe Spark の使い方（2020年4月2日時点）
アカウントを作成したら、作業開始です。
新しいプロジェクトのはじめ方
ログインすると、以下の画面になります。
（図１. ログイン直後の画面）
（図２. 「プロジェクト作成」を押すと出てくる項目たち）
「プロジェクト作成」を押すといろいろ項目が出てきますが、その中の「Webページ」を押すことで、Webページの作成画面に移ることができます。（図２の赤枠部）
SNSのカバー画像などもAdobe Spark で作れそうなので、また暇を持て余したらチャレンジしてみたいですね。
ページ作成画面の各種機能
さて、以上の流れが踏めていれば、次の画像のようになるはずです。（なってなかったら、ツイッターに文句言いにきてください笑）
（図３. 編集画面の初期状態）
ここに指示通りにタイトルやら画像やらを入れていくと、次のようになります。
（図４. 初期状態から、タイトルと画像を入力した状態）
たったこれだけでそれっぽくなりますね。
（図5. Webページに追加できるものが一覧で表示される）
編集画面を下にスクロールしていくと、「＋」マークが出てきます。クリックすると図５のような一覧が表示され、制作中のWebページにコンテンツを追加できます。使ってみればすぐわかると思いますが、軽く説明しておきますね。
・写真
まんまです。PC内にある画像を挿入することができます。
他にも、外部のクラウドにアクセスできるので、クラウド上に保存してる画像も使えます。
フリーの画像もそこそこあるので、自分で検索してそれっぽくできます。
・テキスト
これもまんまです。事前に用意したフォント（変え方は後述）で文章を作れます。
作ったホームページを見てもらえればわかると思いますが、
箇条書きにしたり、中央揃えにしたり、斜体にしたり、お手軽にいろいろできます。
・ボタン
URLを埋め込むことで、クリックすればそのページに飛べるボタンを作成できます。
「〜はこちらから」みたいに書けば、他のページへの誘導が楽になると思います。
・ビデオ
外部サイト（Youtubeなど）のURLを貼ることで、動画を挿入できます。
・写真グリッド
並列して、いくつかの画像を一度に挿入できます。
レイアウトもある程度変えられるので、ポートフォリオなんかにも使えそう。
・Glideshow
背景として写真を挿入できます。
スクロールに応じてちょこっとアニメーションが入るので、
ページ内での話題切り替えのときに使えるかなと思います。
・レイアウトを分割
ページを左右で分割して、片方に写真、もう片方に他のコンテンツを挿入できます。
こちらも話題の切り替えに最適ですね。
（図６. 図４の上部を拡大したもの）
あらかた完成したら、作業画面の上部に注目しましょう。
図６のようなものがあると思います。ここら辺で、プロジェクトの仕上げを行います。
・設定
ページのヘッダー、フッダーを追加できます。
他にもなんかありますが、よくわからんので割愛します。（多分問題ない…ﾖｼｯ）
・プレビュー
まんまです。このページを公開したときの様子を見ることができます。
・全画面表示
プレビューを全画面表示でみれます。
・共有
ここでページのリンクを作成し、公開できます。
ドメインまで用意してくれるあたり、これからも Adobe に媚を売りたくなりますね。
・人みたいなマーク（伝われ）
共同編集者を追加できます。
複数人で運営したいときは便利な機能だと思います。
もうちょっと凝りたい
先ほどフォントを変えられないと書きましたが、変える方法はあります。
（図７. 図４の右上拡大図）
右上に「テーマ」と書かれてある部分があるので、そこをクリックしてください。
出てきたデザインのプリセットを使って、ページの基本色とフォントをいじれます。
（図８, ９. テーマによるデザインの違い）
自分で色とフォントを０から決めることもできます。
（図１０. 図４の右上拡大図）
「テーマ」のすぐしたのボタンを押すと、「ブランド」を洗濯することができます。
ブランドと言っても、要は自分で作ったデザインのプリセットです。
自分の「ブランド」は、他のプロジェクトでも使えるので、何個かページを作るときには役に立つと思います。
「ブランド」の作成は、ただ画面の指示に従うだけですので、ここでは割愛します。
最後に
使い方自体はこんな感じです。みていただいた通り、プログラムは一行も書いてません。
楽ちんですね。
ただ、やはりHTMLなどを使って１から作るものに比べれば、自由度はそんなに高くないと言えるでしょう。
作った時は「ｵｫ〜」ってなりましたが、やっぱりどっかの企業に似せて作りたいとかってなるとHTML勉強しよってなりますね。
余談ですが、今回のホームページ作成で、少し意識したホームページがあるので、参考程度にそれも貼っときますね
もっと説明して欲しいところ、わかりにくかったところ、感想などがありましたら、コメントでも、私のツイッターでも構いません。お気軽に相談しにきてください。
ではでは〜
2020年03月29日
自己紹介とこれからの予定
千葉県に生息している害悪大学生サバゲーマーのマイケルです。
コロナによる春休みの延長によって暇を持て余した結果、ブログを開始するに至りました。
サバゲーやタクトレ以外の話題も呟くかもしれませんが、暖かく見守ってくださいな。
初めてのブログで右も左も分かりませんが、慣らしも兼ねて今回は自己紹介とこれからの野望を書き連ねたいと思います。
お暇な同志の暇つぶしにでもなれば幸いです。
自己紹介
名前は前述の通り「マイケル」と名乗っております。高校の時からのあだ名です。（純粋な日本人です）
(画像１. インスタで反応良かったから調子乗って使いまくってる画像）
中学で「メタルギアソリッドシリーズ」にハマって以降、どんどんミリタリーに傾倒していくようになり今に至ります。
サバゲーをはじめたのは高一の９月だったはずです。
No.9に3C迷彩で挑戦してボコボコにされたのはいい思い出です。
最近はタクトレにも手を出してます。（むしろ的を撃つ機会の方が多くなってる気がする…）
得物
・TM CQB-R Block1
・TM GLOCK19
(画像２. 配色センス０のクソ雑魚ビルド）
・TM MP5A4
(画像３. 付き合いのある他校の先輩からも褒められてなんだかんだ気に入ってるMP5)
持ってるだけなら
・Double Bell kar98k（ガス）
・WE Tech MEU（譲渡品のため詳細モデル不明）
・WE Tech M9
なんかもあります。
別記事で装備特集でもしましょうかね（クソ雑魚装備ですが…）
活動実績（部活動紹介感）
架空組織「MIchael & Emeria Security Service」を運営してたりします。（二人しかいないけど…）
(画像４. MESSのタクトレの様子。 奥は高校の時からサバゲーに付き合ってくれてる「Emeria」氏）
その延長線的に動画も作ってます。
動画はこちらから→https://youtu.be/qfO6Iz3f_5I
大学のサバゲーサークルの代表なんかもやってますが、それはまた気が向いたときにでも話します。
これからの予定（野望）
カツコツな動画をたくさん作っていきたいです（小学生感）
まぁ、割と真面目に動画は頑張りたいと思ってるので、興味を持っていただけたら、そっとチャンネル登録しといてください。
何か起こるかも（起こらないかも）
それとは別に、MESSのそれっぽいホームページを作成してみようかなと思ってます。
架空組織の動画などを挙げている方は結構いらっしゃるのですが、ホームページを作ってる方をあまり見かけないので（実際には結構いるのかもしれませんが）挑戦してみようと思います。
サバゲー方面なら、全身マルチカムを揃えてみようかと思ってます。（財務省が首を横にふる）
おすすめのギアとかあったら沼に引きずり込んでください。
最後に
私がどんな感じの人間かは思い知っていただけたと思います。
更新頻度は気分次第ですが、気が向いたときにお付き合いください。
では
タグ ：自己紹介
