My Web道

WEB制作科 受講記録 …とその後も続くWEB制作に関する活動・学習記録です。

【Bootstrap】無料で使えるBootstrapビルダー「Pingendo」のご紹介

f:id:sntkk3:20180218190938p:plain


今日は、Bootstrap4 ベースのビルダー「Pingendo 」をご紹介します。

このツールを使うことで、プロトタイプ用のWebサイトがサクサク作れますので、オススメです。
作業は部品選択などの直感的操作で進められますし、スタイリッシュなサイトがあっという間に完成しますよ。
ぜひお試しあれ。

では、以下よりその使い方をご紹介します。

Pingendo 使い方

1. 公式サイトの以下URLページよりデスクトップアプリをダウンロードします。
公式サイト ダウンロード元:
https://pingendo.com/download.htmlhttps://pingendo.com/download.html
pingendo.com


2. ダウンロードしたアプリケーションをインストールします。

3. 以下URLページよりテンプレートを選択します。
https://templates.pingendo.com/https://pingendo.com/download.html
templates.pingendo.com


4. 「Open in Desktop 」ボタンをクリックします。


5. デスクトップアプリのメニューより、[ Open File ] をクリック、該当のテンプレートファイルを選択します。
⇒ 選択したテンプレートからプロジェクトが作成され、エディタ画面が表示されます。


あとは、自身の希望するデザインに合わせて、
テンプレートのデザインに変更(画像、テキスト、スタイルなど)を加えていきます。

画面左側ナビゲーションパネルから希望の部品を選択したり、右側のパネルで詳細を設定したりして、完成させていきます。

たとえば、
以下はナビゲーションバーを追加する場合です。

f:id:sntkk3:20180218192637p:plain


左側のナビゲーションパネルからリンクアイコンをクリックします。
f:id:sntkk3:20180218192803p:plain


ナビゲーションバーの部品を選択し、画面の配置したい場所にドラッグします。
f:id:sntkk3:20180218192830p:plain


画面上部にナビゲーションバーが追加されました。
f:id:sntkk3:20180218193000p:plain


ナビゲーションバー上のボタンやテキストなど、細かい設定を右側のナビゲーションパネルで設定します。
f:id:sntkk3:20180218193107p:plain


一通り変更が完了したら「保存」ボタンで保存したうえ、終了します。

なお、「保存」ボタンは画面最上部(背景が水色の領域)の一番左側にあります。
作業しながら、こまめに保存していきましょう。

また、「保存」ボタンの右隣に「プレビュー」ボタンがあります。完成イメージを確認したい時「プレビュー」でどうぞ。
f:id:sntkk3:20180218193308p:plain


「Pingendo 」は、エディタでHTML、CSSのコード編集が可能なところも、優れものだと思います。


以上、非常に簡単ではありますが、Bootstrap4 ベースのビルダー「Pingendo 」のご紹介でした。

ご参考まで。