読者です 読者をやめる 読者になる 読者になる

Hope is a Dream. Dream is a Hope.

非公開ふぃふぃ工房ブログ

↓LINE登録はこちら↓

定期的につぶやいてます. 記事に興味を持って頂いたかたや、Line Botを使ってみたいかたは試しに登録どうぞ

友だち追加

結婚式用スライドショー作成サイトを作ります。 | その2 ワイヤーフレームを作る

結婚式の動画・スライドショー AfterEffects PHP WEB

こんにちわ。ふぃふぃです。

先日から、結婚式のスライドショーを作り始めました。

前回はとりあえずデザインを選んだので、今日はワイヤーフレームを作ります。

結婚式用スライドショー作成サイトを作ります。 - Hope is a Dream. Dream is a Hope.

ワイヤーフレームを作る。

環境としては、Web初心の僕はPHPを使って、HTMLのパーツを分けているのと、

CSSフレームワークのBootstrapを使っています。

今回のテーマはLumenを選んできました。 f:id:hope_is_dream:20141208205211p:plain

今日作るデザイン

デザイン初心者の僕がいろんなサイトを参考に(パクリ)ながら作った デザインイメージがこれです。。

f:id:hope_is_dream:20141208203743j:plain

今日はこのデザインをBootstrapを使って大枠を作ります。

ヘッダ部分

f:id:hope_is_dream:20141209224421p:plain

  • 1段目: navbar
    ページ上部にはナビバーを配置します。ナビバーはコードが長くて混乱するので、最初は少ない要素から、徐々に追加していくほうが楽です。

f:id:hope_is_dream:20141209225211p:plain

  • 2段目: Breadcrumbs
    2段目にあるのがいわゆる"パンくず"というもので、Bootstrapではbreadcrumbと書かれています。

f:id:hope_is_dream:20141209225206p:plain

  • 3段目: Jumbotron
    のちにHPの顔となるタイトル画像を配置するための要素を配置して置きます。じゃんぼとろん。

    Jumbotron(ジャンボトロン). ジャンボトロン(ページトップなどに表示する見出しユニット)を表示します。

f:id:hope_is_dream:20141209225645p:plain

コンテンツ部分

ページの真ん中に位置するコンテンツ部分です。

f:id:hope_is_dream:20141209224527p:plain

ここには、このHPのコンセプトと概要を3つの要素で説明したいと思っています。

ブートストラップではレスポンシブレイアウトに対応しているので、三つのcolクラスを使って配置します。

また、このような画像を並べるときのためにTumbnailクラスも準備されていてとっても便利!!

CSS初心者の僕が、これを手打ちで書くのはほぼ不可能に近い。。

f:id:hope_is_dream:20141209230227p:plain

Components · Bootstrap

こんなカンジでHTMLにCSSのクラス名を入れていくだけ(もはやBootstrapのページからコピペ)していくだけで作ります。

フッター部分

f:id:hope_is_dream:20141209224534p:plain

フッター部分には、僕らの写真を載せるつもりですので、先ほどと同様にTumbnail要素を使ってます。

(画像はダミー生成のサイトを利用させてもらっています。)

(メモ) ダミー画像生成サービス

PLACEHOLD.IT

f:id:hope_is_dream:20141209230813p:plain

Placehold.it - Quick and simple image placeholders

こちらのサービスは気に入って良く使わせてもらっています。

画像を使いたいimg要素に下のURLを追加するだけ。サイズも設定できます。便利。

<img src="http://placehold.it/100x100">

もう一つ

UNSPLASH.IT

f:id:hope_is_dream:20141209231001p:plain

Unsplash It

ここの画像は、

ひたすらかっこいいです。

こちらが元のサイトの用で、非常に高品質な画像が10日に一度10枚づつ配信されています。

まとめ

今回は何も考えず(今回も)、CSSを書いて行ったのですが、実はここにくるまでに大分時間が掛かっていました。

その理由は、大枠の要素を作っているはずが、ついつい、カラーや微妙なレイアウトの調整、またや画像を作りなおしたりと、全然違うことをし始めて、

時間をかけて気がつくと、HTMLはまったくできていない。。。

今回の分かったことは

  1. (適当でいいから)ワイヤーフレームを作る
  2. HTMLの構造を作る。
    (色、レイアウト、画像、文章には気を取られない!!)
  3. 文章と画像をはめ込む
  4. デザインの修正

かなり荒いですが、各段階毎にきちんと目標を持っていないと、

部屋の大掃除のときに、マンガを読み始めるみたいになってしまうということを実感しました。

次回は、残りのページを作って行きます。

それでは。

ふぃ。

スライドショーの作り方 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.