【デザイン歴半年】高速でかっこいいページを作る方法

皆さんこんにちは

いなみです。

本日は素人の僕が高速でかっこいいページを作る方法を教えます。

早速ですが、今回のツールはこちら

Boostrap

Boostrapとは
ウェブサイトやWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワーク。
簡単に言うと形はある程度決めたから中身をいじってねツール

使い方としては

①boostrapの準備

②テンプレートを選ぶ

③自分色に染める

この3つだけです。

この3つをクリアするだけで最速10分で、違和感のない綺麗なページができますので、一つ一つ見ていきましょう。

①boostrapの準備

1.boostrapを実装する

 

まずはこちらをダウンロード

ダウンロード後、booststrap-3.3.7-dist/css内の
boostrap.min.cssを自分が作業するcssフォルダに移動。

をhtmlに記述。

たったこれだけで実装完了です。

②テンプレートを選ぶ

2.フルデザイン編

 

デザインの選び方はテンプレートデザイン集から好きなものチョイス。

有料なものから、無料なものまで実に100種類以上あります。

2_3

– Start Boostrap –

2_4

– ALMSAEED STUDIO –

2_5

– SHARPBOOSTRAP –

メリット
・時間が全くかからない
・レイアウトがきれい
デメリット
・編集がすごく面倒臭い

という感じになります。

3.パーツデザイン編

 

フルデザインとは違い、「このパーツを使いたい」など一部デザインとして使うことができます。

2_6

– w3schools.com –

2_7

– Start Boostrap(下部ページ) –

メリット
・自由にデザイン
・編集が楽
デメリット
・時間がかかる

という感じになります。

③自分色に染める

ボタン編

 

ボタンこそコンバージョンを上げる一つの要因

boostrapならコードをhtmlに書き込むだけで様々な形と色に変化させることができます。

ナビゲーション編

 

boostrapの最もの強みはこれ

意外と面倒臭いナビゲーションがレスポンシブ対応で作れます。

その他にも、グラフィックアイコンやドロップダウン、メディアオブジェクトなど多くのパーツが作れます。

boostrap components

僕の作品

 

以上を元に、作成した僕の自信作がこちら

2_2

– SOCCER JUNKY -tennis365.net –

 

 

 

 

・ ・ ・ 。

 

 

 

 

くそださい。

 

結論
boostrapは人を選ぶツールであった。

 

以上。

 

2_8