結婚式用スライドショー作成サイトを作ります。 | その２ ワイヤーフレームを作る
こんにちわ。ふぃふぃです。
先日から、結婚式のスライドショーを作り始めました。
前回はとりあえずデザインを選んだので、今日はワイヤーフレームを作ります。
結婚式用スライドショー作成サイトを作ります。 - Hope is a Dream. Dream is a Hope.
ワイヤーフレームを作る。
環境としては、Web初心の僕はPHPを使って、HTMLのパーツを分けているのと、
今回のテーマはLumenを選んできました。
今日作るデザイン
デザイン初心者の僕がいろんなサイトを参考に(パクリ)ながら作った デザインイメージがこれです。。
今日はこのデザインをBootstrapを使って大枠を作ります。
ヘッダ部分
- 1段目: navbar
ページ上部にはナビバーを配置します。ナビバーはコードが長くて混乱するので、最初は少ない要素から、徐々に追加していくほうが楽です。
- 2段目: Breadcrumbs
2段目にあるのがいわゆる"パンくず"というもので、Bootstrapではbreadcrumbと書かれています。
- 3段目: Jumbotron
のちにHPの顔となるタイトル画像を配置するための要素を配置して置きます。じゃんぼとろん。Jumbotron（ジャンボトロン）. ジャンボトロン（ページトップなどに表示する見出しユニット）を表示します。
コンテンツ部分
ページの真ん中に位置するコンテンツ部分です。
ここには、このHPのコンセプトと概要を3つの要素で説明したいと思っています。
ブートストラップではレスポンシブレイアウトに対応しているので、三つのcolクラスを使って配置します。
また、このような画像を並べるときのためにTumbnailクラスも準備されていてとっても便利!!
CSS初心者の僕が、これを手打ちで書くのはほぼ不可能に近い。。
こんなカンジでHTMLにCSSのクラス名を入れていくだけ(もはやBootstrapのページからコピペ)していくだけで作ります。
フッター部分
フッター部分には、僕らの写真を載せるつもりですので、先ほどと同様にTumbnail要素を使ってます。
(画像はダミー生成のサイトを利用させてもらっています。)
(メモ) ダミー画像生成サービス
PLACEHOLD.IT
Placehold.it - Quick and simple image placeholders
こちらのサービスは気に入って良く使わせてもらっています。
画像を使いたいimg要素に下のURLを追加するだけ。サイズも設定できます。便利。
<img src="http://placehold.it/100x100">
もう一つ
UNSPLASH.IT
ここの画像は、
ひたすらかっこいいです。
こちらが元のサイトの用で、非常に高品質な画像が10日に一度10枚づつ配信されています。
まとめ
今回は何も考えず(今回も)、CSSを書いて行ったのですが、実はここにくるまでに大分時間が掛かっていました。
その理由は、大枠の要素を作っているはずが、ついつい、カラーや微妙なレイアウトの調整、またや画像を作りなおしたりと、全然違うことをし始めて、
時間をかけて気がつくと、HTMLはまったくできていない。。。
今回の分かったことは
- (適当でいいから)ワイヤーフレームを作る
- HTMLの構造を作る。
(色、レイアウト、画像、文章には気を取られない!!) - 文章と画像をはめ込む
- デザインの修正
かなり荒いですが、各段階毎にきちんと目標を持っていないと、
部屋の大掃除のときに、マンガを読み始めるみたいになってしまうということを実感しました。
次回は、残りのページを作って行きます。
それでは。
ふぃ。
スライドショーの作り方 after effectsでの簡単な作り方 | 結婚式の余興スライドショー - Hope is a Dream. Dream is a Hope.
結婚式当日の写真の共有ってどうするの？？？ - Hope is a Dream. Dream is a Hope.
PHPを使ってHTMLの要素を共通化する方法 | Web初心者メモ - Hope is a Dream. Dream is a Hope.
スライドショーの作り方 構成を考える | 結婚式の余興スライドショー - Hope is a Dream. Dream is a Hope.
