世の中には様々なCSSフレームワークがありますが、最も有名なのはBootstrapだろう。
Bootstrapだけでも効率よく構築できるようになったが、更にほぼコーディングせずにもっと簡単かつ素早く構築できるツールが「Bootstrap Studio」です
スマホが広まり始めた当初は、PCとスマホの画面を両方とも作る必要があったが、画面のサイズに対応してコンテンツを見やすくするレスポンシブデザインはもはや常識になっている。
目次
Bootstrap Studio
Bootstrap StudioはBootstrapフレームワークを使用してレスポンシブなWEBサイトを作成する強力なデスクトップアプリケーションです。
PC(ノート・デスクトップ)、タブレット、スマホと言った画面サイズをリアルタイムで確認しながら、ドラッグ&ドロップで作成できます。
また、自由度も高く、直接コードを編集することもできます。
あわせて読みたい
![](https://bootstrapstudio.io/assets/img/og.jpg)
![](https://bootstrapstudio.io/assets/img/og.jpg)
Bootstrap Studio - The Revolutionary Web Design Tool
Powerful Web Development Tool For The Bootstrap Framework.
Bootstrap Studioのデモを見る
![Bootstrap Studio オンライン デモ](https://clickan.click/wp-content/uploads/2015/10/demo.png.formatted.jpg)
公式サイトのトップページの「Run Browser Demo」をクリックし、「CREATE NEW DESIGN」ボタンを押下。
好きなテンプレートを選んで「CREATE」で開始できます。
※デモなので作成したものをダウンロードできません使い方(チュートリアル)はこちらから。
あわせて読みたい
![](https://bootstrapstudio.io/assets/img/og.jpg)
![](https://bootstrapstudio.io/assets/img/og.jpg)
Bootstrap Studio Docs | Bootstrap Studio
Tutorials and Guides about Bootstrap Studio, the revolutionary web design tool.
Bootstrap Studioは買いか?
WEBデザイナーなら確実に買いでしょうね。
価格もThemeForestでテンプレートを買うくらい安いです。
CLICKAN -
![](https://toach.sakura.ne.jp/base/wp-content/uploads/2015/10/bootstrap-studio.png.formatted-1024x929.jpg)
![](https://toach.sakura.ne.jp/base/wp-content/uploads/2015/10/bootstrap-studio.png.formatted-1024x929.jpg)
Bootstrap Studioはあなたのサイトデザインを爆速にする。
Bootstrapによるサイトデザインをドラッグアンドドロップベースで出来るBootstrap Studioを紹介する。
Qiita
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMTQ3MjkxJTJGcHJvZmlsZS1pbWFnZXMlMkYxNTIzODU2NTIyP2l4bGliPXJiLTQuMC4wJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZmbT1wbmczMiZzPTA2MTM4NDhlZjBmNDM4OGE5ZmU1NWM1NTA3MDZmZjQ3%26blend-x%3D120%26blend-y%3D462%26blend-w%3D90%26blend-h%3D90%26blend-mode%3Dnormal%26mark64%3DaHR0cHM6Ly9xaWl0YS1vcmdhbml6YXRpb24taW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnMzLWFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkZxaWl0YS1vcmdhbml6YXRpb24taW1hZ2UlMkY5YWZmNzc4OTU3NDg1YTQ5MjdlMzkzMjVkMDdkMzIwNzUyZDNmNjRhJTJGb3JpZ2luYWwuanBnJTNGMTcyNzIyODAyND9peGxpYj1yYi00LjAuMCZ3PTQ0Jmg9NDQmZml0PWNyb3AmbWFzaz1jb3JuZXJzJmNvcm5lci1yYWRpdXM9OCZib3JkZXI9MiUyQ0ZGRkZGRiZmbT1wbmczMiZzPWVhMGViMWY3MTAwZGE5MjE5YmZhYjU5YTVhOTQzY2Ex%26mark-x%3D186%26mark-y%3D515%26mark-w%3D40%26mark-h%3D40%26s%3D980ae957727c17e5d1b1ebac61f5b576?ixlib=rb-4.0.0&w=1200&fm=jpg&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JUU2JTlDJTgwJUU5JUFCJTk4JUUzJTgxJUFFJUUzJTgzJUEyJUUzJTgzJTgzJUUzJTgyJUFGJUUzJTgyJUEyJUUzJTgzJTgzJUUzJTgzJTk3JUUzJTgzJTg0JUUzJTgzJUJDJUUzJTgzJUFCJUUzJTgxJThCJUUzJTgyJTgyJUUzJTgxJTk3JUUzJTgyJThDJUUzJTgxJUFBJUUzJTgxJTg0Qm9vdHN0cmFwJTIwU3R1ZGlvJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9NGFmY2RmM2U0YTZmZjhmZWQ1NDQ3ZWZiY2U3Nzc4YzU&mark-x=120&mark-y=112&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBZdXRhX0Z1aml3YXJhJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LXBhZD0wJnM9ZTBmYzM3Y2QwMDc0NDAxNTZhYjcwOWUyZmZhMDdkZGI&blend-x=242&blend-y=454&blend-w=838&blend-h=46&blend-fit=crop&blend-crop=left%2Cbottom&blend-mode=normal&txt64=6YGL5Za26ICF44Ku44Or44OJ&txt-x=242&txt-y=539&txt-width=838&txt-clip=end%2Cellipsis&txt-color=%231E2121&txt-font=Hiragino%20Sans%20W6&txt-size=28&s=29c7360cd83df77584100a2517d64f7e)
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMTQ3MjkxJTJGcHJvZmlsZS1pbWFnZXMlMkYxNTIzODU2NTIyP2l4bGliPXJiLTQuMC4wJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZmbT1wbmczMiZzPTA2MTM4NDhlZjBmNDM4OGE5ZmU1NWM1NTA3MDZmZjQ3%26blend-x%3D120%26blend-y%3D462%26blend-w%3D90%26blend-h%3D90%26blend-mode%3Dnormal%26mark64%3DaHR0cHM6Ly9xaWl0YS1vcmdhbml6YXRpb24taW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnMzLWFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkZxaWl0YS1vcmdhbml6YXRpb24taW1hZ2UlMkY5YWZmNzc4OTU3NDg1YTQ5MjdlMzkzMjVkMDdkMzIwNzUyZDNmNjRhJTJGb3JpZ2luYWwuanBnJTNGMTcyNzIyODAyND9peGxpYj1yYi00LjAuMCZ3PTQ0Jmg9NDQmZml0PWNyb3AmbWFzaz1jb3JuZXJzJmNvcm5lci1yYWRpdXM9OCZib3JkZXI9MiUyQ0ZGRkZGRiZmbT1wbmczMiZzPWVhMGViMWY3MTAwZGE5MjE5YmZhYjU5YTVhOTQzY2Ex%26mark-x%3D186%26mark-y%3D515%26mark-w%3D40%26mark-h%3D40%26s%3D980ae957727c17e5d1b1ebac61f5b576?ixlib=rb-4.0.0&w=1200&fm=jpg&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JUU2JTlDJTgwJUU5JUFCJTk4JUUzJTgxJUFFJUUzJTgzJUEyJUUzJTgzJTgzJUUzJTgyJUFGJUUzJTgyJUEyJUUzJTgzJTgzJUUzJTgzJTk3JUUzJTgzJTg0JUUzJTgzJUJDJUUzJTgzJUFCJUUzJTgxJThCJUUzJTgyJTgyJUUzJTgxJTk3JUUzJTgyJThDJUUzJTgxJUFBJUUzJTgxJTg0Qm9vdHN0cmFwJTIwU3R1ZGlvJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9NGFmY2RmM2U0YTZmZjhmZWQ1NDQ3ZWZiY2U3Nzc4YzU&mark-x=120&mark-y=112&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBZdXRhX0Z1aml3YXJhJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LXBhZD0wJnM9ZTBmYzM3Y2QwMDc0NDAxNTZhYjcwOWUyZmZhMDdkZGI&blend-x=242&blend-y=454&blend-w=838&blend-h=46&blend-fit=crop&blend-crop=left%2Cbottom&blend-mode=normal&txt64=6YGL5Za26ICF44Ku44Or44OJ&txt-x=242&txt-y=539&txt-width=838&txt-clip=end%2Cellipsis&txt-color=%231E2121&txt-font=Hiragino%20Sans%20W6&txt-size=28&s=29c7360cd83df77584100a2517d64f7e)
最高のモックアップツールかもしれないBootstrap Studio - Qiita
1. モックアップツールって何使ってる??2017年の11月くらいから、毎日コツコツと作っていたWebアプリケーションをなんとか完成しました (色々あってリリースはまだして...
コメント