title-2
Design

Bootstrapを使ってWebサイトを作ろう その5

こんにちは!新人森田です。
気付いたらもう3月で、しかも3月3日ひな祭りです。
せっかくだしひなあられは食べておこうと思います。

ハレノヒブログのプチリニューアルはその後も少しずつ進行してたりします。
たとえばここ!

0303-1

タグの使用頻度に応じて強弱をつけました。
ブログの記事を読む際にこの辺も使っていただけたらと思います。

それからここ!

banner

さり気なく真ん中バースデーのバナーもおいてあります。
友だち検索機能が付いたりと日々成長中です。
DLがまだの方はこちらからもどうぞ!

では今日の本題に入りたいと思います。
BootstrapでWebサイトを作ろう1〜4ではhtmlとcssのみで制作しましたが、今回はそこにJavascriptを使ってみます。
BootstrapがあればJavascriptも怖くない!

Javascriptを導入する

JavascriptとはWebページに動きをつけるためのプログラミング言語です。
Bootstrapにはあらかじめjsフォルダの中に“bootstrap.js”が用意されているので、まずはこれを使うタグを書きます。

0303-4

<script>で“bootstrap.js”だけ書いたらjqueryがないと動かないとシステムエラーが出てしまいました。
jqueryのサイトから“the compressed, production jQuery 1.11.0”を頂いてjsフォルダの中に保存し、“bootstrap.js”の前に同様に書き込みます。

これで導入準備は完了です。

カルーセルを作る

メインビジュアルの部分をカルーセルにします。
横にスライドする動きを使って、複数のコンテンツビジュアルを表示するのがカルーセル(意味は回転木馬)です。

0303-5

↑はサンプルコードをほぼそのままコピペしたものですが、カルーセルはこんな風に“Indicators”、“Wrapper for sliders”、“Controls”の3つのパーツから成り立っているようです。カルーセルにのせる画像を、元の画像も合わせて3種類にしてみました。

0303-2

おお、見事にスライドしてます。
“jquary”と“bootstrap.js”に動き方などが設定してあるおかげで、htmlをいじるだけでもう出来ました。

ドロップダウンを作る

次はメニューバーにドロップダウンのボタンを付けてみます。

0303-7

上に囲ってある“Toggle navigation”というのは、スマホサイズまで縮めた時にメニューが収納されるアレです。
そして下の“dropdown”の部分がドロップダウンのボタンを設定している箇所です。

0303-3

ちゃんと表示されてますね。

画面幅を縮めていくと…

0303-6

メニューがきちんと収納されました。

まとめ

Javascriptの文法をまったくといっていいほど知らない私でも簡単にJavascriptを使えてしまいました!
本当におそるべしjquery&Bootstrap。
今回はサンプルコードをコピペして動作確認しつつ微調整というシンプルな作業でしたが、こだわろうと思えばもっと作り込めそうです。
今後jqueryとかもっと使えるようになるために、まずはBootstrapのJavascriptを色々使ってみようと思います!押忍!

標準
title-2
Design

Bootstrapを使ってWebサイトを作ろう その4

こんにちは!寒がり新人森田です。
週末の東京は大雪でしたね。珍しく早起きしてちょっとだけ写真撮ってきました。結構降ってたから一眼持ち出す元気が出なかったけど、携帯カメラと編集アプリが便利すぎてこれで十分に思えちゃいます。

140210b

久しぶりの雪で電車が止まったり不便もあった反面、見慣れない白い街並みにテンション上がったりもしました。元気チャージしたところでBootstrapでサイトを作ろうラストスパートいってみましょう!

webサイトを作る 続き

前回は動作確認をしてみたらnavbarの表示がおかしいことに気づいたところまででした。テンプレートのようにjumbotronの上に乗せて表示させたいというのもあるので、その辺をまとめて調整していきます。

細部を作る 5

何点か修正したい部分がある場合も、一度変更点を整理してサイトを作る時と同じように大枠>細部の流れで作業していくと楽な気がします。

まずがっつりと jumbotronの上にnavbarを乗せてしまいます。
今navbarを囲んでいるのは“container”ですが、これは他の箇所でも使っている共用classの為なるべく手を加えたくないです。なので、“container”を新たに”navbar-wrapper”で囲います。

“navbar-wrapper”に“position: absolute;”指定します。こうすることで位置が固定され、floatみたいに要素が浮いたような状態になります。その下にjumbotronが回り込む形になって、navbarが画像の上に重なって表示されます。タイトルにも被ってますがそれは今は気にしない。

140208-1

ちなみに“position: absolute;”の位置固定の仕組みは、“position: static;”ではない親要素を基準とした絶対的な位置に固定されるようになっています。今回の場合は特に指定していないので、body=画面左上に固定されています。上に隙間があるのは”margin-top”を指定してあるからです。スマホ表示では上にぴったりくっつけたいので“margin-top: 0;”も書き込んでおきます。

細部を作る 6

次はnavbarの細かい箇所を修正します。

“active”だけ飛び出ていた表示を中に収まるようにします(この辺りは好みかもしれません)。“navbar”の中をもう一度”container”で囲い込みます。今まで“navbar”の上の“container”が最大幅だったのが、これで“navbar”内に収納されました。

ただ、“container”で2回囲うと元々“container”がもつpaddingが二重で効いてしまいます。上と左右に隙間なく置きたい時は“.navbar-wrapper > .container”という指定方法でpaddingを無しにしておきます。

140208-2

この作業、何をやってるか若干分かりづらいというか森田自身がちょっとこんがらがってます。
もう少し分かりやすく説明すると、

140208-3b

navbarの構造はこんな風になってます。
外側の“container”のpaddingは画面の端からの幅にあたるので無くしたいです。
内側の“container”は“navbar”の内側の要素に必要な隙間を与えてくれています。

じゃあそもそも外側の“container”必要ないんじゃないかと思うかもしれませんが、Media Queriesで画面幅に応じた見え方が整えられている為、決していらない子ではないんです。これがあるおかげで他の“container”に囲まれた要素と揃って見えます。

140210-4

あとは“navbar”のmargin-bottomやjumbotronの値を調整します。

前回までと違って今回はスマホベースで作業してきました。これにはちょっとした意味があります。Media queriesを使う時は普通に書いたcssがスマホビューと対応しているんです。“@media (min-width:  768px) {”と書き込むと、768px以上の幅で見た時の表示が変わります。

ここで書くと簡単な設定という感じがしますが、コーディングしてると訳が分からなくなってきたりします。だから今の森田はPCベースで作ってきたものを最後はスマホベースで仕上げて、レスポンシブで表示を変える部分のcssを“@media {”にコピペして混乱回避してます。

細部を作る 7

PCサイズで動作確認。

一通り作り終えたら、PCサイズでもちゃんと表示できてるか確認してみます。といっても実際は作りながら幅を伸ばしたり縮めたりしてるから多分出来てる。はず。

140210-5

特に問題なさそうですね。いい感じです。

細部を作る 8

おまけでコンテンツの詳細を作る。

そういえばコンテンツの見出しは作ったけど詳細部分を作っていませんでした。ここまできたら作っちゃいましょう。グリッドシステムを使った簡単なレイアウトなので1だけにしておいて2、3は以下略とします。

テンプレートと同じ500×500pxの画像を用意してグリッドを7と5で分けます。画像が大きめで、画面幅を狭めると文章の改行がすごいことになりかねないので、グリッド解除のタイミングを見出し部分より早く設定しておきます(“col-md-7”)。

画像に関しては“img-responsive”というclassを使うと、画面幅に応じたサイズに自動的に縮小してくれます。

140210-6

完成

indexページが完成しました!完全に飲食店ですね。

PCサイズ

メリハリがついていて見やすいです。

140210-7

 スマホサイズ

長いです。びよーん。

140210-8b

これに各コンテンツの肉付けをしていけばちゃんとwebサイトになってくれそうです。

まとめ

Bootstrapを使ってwebサイトの1ページが出来上がりました。最近流行りの1ページサイトとするならwebサイトって言えるんじゃないでしょうか(強引)。

作ってみての感想は、やっぱり土台があると作業が楽!です。
最初はどんなclassがあってどういう設定かが分からず、自分でやっていった方が早いんじゃないかって思ってましたが間違いでした。Bootstrapの公式で調べながら作っていくうちに便利なclassの存在を知ると、要素を置いてclass指定するだけで希望する表示が出来ちゃう。すごい。

オリジナルの設定をしたい時も、自分で書いたcssでclass設定を上書き出来る点も素敵です。

ここまで連載にお付き合いいただきありがとうございました!
けどBootstrapの便利機能はまだまだありそうだし、Javascript総スルーだったし、まだまだやりたいことだらけなので連載はもうちょっと続きそうです。
短期集中連載はひとまずここで区切りということで今回はこのへんで!押忍!

標準
title-2
Design

Bootstrapを使ってWebサイトを作ろう その3

こんにちは!やっぱりまだまだ新人森田です。
新オフィスに来る途中にいつものルートを外れてコンビニに寄ったら朝から道に迷いました。裏原宿あたりの迷路みたいな小道どうにかするか、私の方向音痴どうにかしてください。切実に。

普段はよく道に迷うけどコーディングの筋道はしっかり立てていきましょう。
ではBootstrapを使ってサイトを作ろうの続きです。

あ、それと、時々画像に載せているcssはオリジナルで書き出したものです。Bootstrapのcssだけでは実現できない部分もあるのでそれで補完してあります。

webサイトを作る 続き

前回は大枠を作って、全体が見えてきました。
この調子で次は細かい部分を作り込んでいきましょう。

細部を作る 1

まずコンテンツを仕上げます。

テンプレートに従って140px四方の正方形の画像を用意しておいたので、いよいよ出番です。
CSS3を知るべしでも紹介した角丸処理ですが、Bootstrapなら“img-circle”をclass指定すれば正円の出来上がり。

詳細説明に飛ばすためのボタンも、buttonタグにBootstrapの基本ボタンスタイル“btn”・ボタンの色を表す“btn-default”をclass指定するだけです。

20140207-1b

簡単に作れちゃいました。サクサク次にいきましょい。

細部を作る 2

ナビゲーションバーに手をつけます。

そういえばほったらかしだったナビゲーションバー。通称は”navbar”っていうらしく、カタカナ表記だとナヴバー?むしろカタカナにしなくていいか。

恒例のdiv囲い開始です。
containerの下に基本スタイルが設定された“navbar”・バー全体の色設定の“navbar-inverse”でclass指定したdivを作ります。その下にサイトの総合タイトルを“navbar-header”として作成。“float: left;”の含まれるclassが一番先に記述されるので、これでタイトルがバーの左側に固定されます。さらにタイトル名に“navbar-brand”をclass指定すると、タイトルっぽく文字が大きめに表示されます。

メニューの中身はリストを使います。ulに“liststyle: none;”が入った“nav”、位置調整用の“navbar-nav”をclass指定したらなんかもう出来ました。それっぽく見せるためにHomeに“active”で色づけしてあります。

20140207-2

細部を作る 3

いったん全体を見渡します。

パーツが揃ってきたところで、ページ全体のバランスを見てみましょう。文字列とにらめっこし続けるのも疲れるのでちょっとした気分転換にもなります。

20140207-3b

ナビゲーションバー、メインビジュアル、コンテンツ、フッターと当初の計画通りに進行中です。
こうして見てみるとグレーが微妙な感じがしてきました。そもそも画像で画面をずばっとぶち抜いた方がスッキリして見えるんじゃなかろうか。というわけでjumbotronをちょっと修正します。

前回jumbotron > container > sample-calouselっていう形にしましたが、jumbotron > jumbotron-innerでよさそうです。cssももう思い切ってsample-calouselのclass名をjumbotronにしてサッパリさせちゃいます。

20140207-4b

…最初からこれで良かったような。まあこんな風にして1つずつ気付きながら調整して作っていく様子をリアルにお伝えしていくということで。じゃあこれってドキュメンタリーだったのか。

細部を作る 4

レスポンシブの動作確認もしておく。

「全体を見渡す」のもう1つの意味として、レスポンシブにした時にデザインが崩れていないかも重要な確認項目です。森田はまだ思い通りに動いてくれないことの方が多くてここでいつも苦しめられています。さあこのサンプルページの幅を狭めていくとどうなるんでしょうか。ちなみにBootstrapでは横幅768px未満がスマートフォンサイズとされています。

20140207-6

うん、さっそくnavbarのactiveにした所(“Home”)がおかしいですね。幅が広い時はそんなに気にならなかったけど、navbarとjumbotronの隙間もちょっと違和感があります。jumbotron以下は特に難しいこともしてない分、今のところいい感じです。

次回予告

今回の作業でサイトに必要なパーツが一通り揃いました(地味にフッターの部分もいじりました)。

あとは動作確認で見えてきた課題:navbarあたりかなと思います。
が、ここでテンプレートをもう一度振り返ってみましょう。

20140207-5

calousel(サンプルではjumbotron)の上にnavbarが重なってますね。ここは再現しておきたいところです。

大枠はサクサクと進んできましたが、やっぱり完成まではもう少しかかりそうな予感。コーディングが仕上がっていくにつれてコードが複雑化するせいか、調整で上手くいかなくて詰まってしまう場面が個人的に多い気がします。連載もまだまだ続きそうです?!というわけで次回もお楽しみに!押忍!

標準
title-2
Design

Bootstrapを使ってWebサイトを作ろう その2

こんにちは!新人じゃなくなりかけたような森田です。
周辺の昼めしスポットの捜索を始めたところ、さっそく良い感じの中華料理屋さんを発見しました。サラダバーがおかわりし放題ということで、ひたすら葉っぱ食べて食後のバナナもいただいたら、師匠たちによく食べるねえと褒められ(?)ました。

さらなる新天地を求めつつ、今回はBootstrapを使ってサイト作る続きです。

webサイトを作る

前回は制作環境を整えました。
今回から実際にwebサイトを作っていきます。テンプレートを参考に制作ということでしたが、グレーのダミーイメージでは個人的に寂しいので森田テイストでいきたいと思います。

素材を揃える

組み立てるのはパーツが揃ってから。

制作環境の他にもうひとつ重要な下準備がありました。ページに必要な素材パーツを揃えておくことです。調理器具があっても素材がないと料理出来なくて悲しいのと同じです。

_sampleフォルダの中に“images”フォルダを作って、使いたい画像を用意しておきます。師匠から教えていただいたPAKUTASOさんから活きのいいのを仕入れてまいりました。ファイル名は良い感じの名前が思い浮かばなかったのでサイズにしときました。

140206-1

今度こそコーディング開始です。

 大枠を作る 1

webデザインとはデッサンのように全体を見ながら作っていくもの。by山形師匠

そんなありがたいお言葉に従って、body内に要素を書き込んでいきます。テンプレートにはどんな要素があるのかをまず確認しておきます。

140206-6

このページはナビゲーションバー・メインビジュアル・コンテンツ・フッターに分類できます。ということでまずページを4つの領域に分割してみましょう。

140206-2

各パーツをcontainerで囲いました。これはBootstrapが持つグリッドシステムの大枠でもあります。ちなみに色は分かりやすいように付けただけで、実際の表示は文字が4列あるだけです。

あんまり進んだ感はしませんが、最初にこの区分をしっかりしておくことで自分がどの部分に手を加えているのかが分かりやすくなると思います。結構大きな一歩です。

大枠を作る 2

さっきが地味だったので、分かりやすいメインビジュアルとコンテンツの部分を整えていきます。

まずメインビジュアルのところについて早速おことわりすべきことが。
テンプレートでは”Carousel”(カルーセル)というJavascriptを使っています。が、森田にはJavascriptの知識がほとんどないため今回は画像一枚で代用させていただきます。

では気を取り直して。
メインにぶち抜きのスペースを取るにはjumbotronを使います。さらにこのjumbotronをcontainerの上に置くことで、左右めいっぱいに表示出来ます。

140206-3c

そしてコンテンツ部分にはグリッドシステムを使います。
グリッドシステム、rowで1つの行を表し、行の中が12個のcolumnの列で区切られています。ここでは3つのコンテンツを横に等幅で並べたいので、4列ずつ3つのカラムに分けます。

rowのdivの中にcol-**-4というclassを書くとそれが実現できます。お手軽。
ハイフンの真ん中の部分はMedia queriesを受けていて、xs・sm・md・lgと4種類あります。デバイスごとに定義された横幅に応じてグリッド解除するタイミングが分けてあるんです。いちいちレスポンシブ用の設定を書き込まずに使えちゃうあたり涙が出そうです。

大枠を作る 3

メインビジュアルをいじって、いい感じにしてみる。

webページ、ひいてはwebサイトの顔になる部分がメインビジュアルです。ここが決まるだけで何となくそのサイトの雰囲気が伝わってくるくらい影響が大きい部分です。サクッとバシッと決めちゃいましょう。

calousel予定地にsample-calouselというオリジナルのclassを作って気分だけでもcalouselに近づけてみました。メインとなる画像をbackground-imageとして、文字色やpaddingをいじっていい感じに調整。

140206-4 

おお…?

ついでにコンテンツ部分にtext-centerという真ん中揃えのclassを入れて、テキストにもh2(第2見出し)とp(段落)でそれぞれの要素を意味合い通りに表示されるようにします。
フッター部分もhr(段落の区切り)で線を引いてコンテンツと分けておきます。

140206-6a

おお、なんかすごくそれっぽい!

次回予告

もはやデザイナーというよりは料理人か飲食店経営の修行サイトみたいな空気が漂いまくっておりますが、もうこの流れで推して参りたいと思います。

大枠から作っていってだいぶ形になってきました。
次回は細部を調整していく予定です。
あれ、連載といいつつ結構すぐ終わっちゃう?!次回もお楽しみに!押忍!

標準
title-2
Design

Bootstrapを使ってWebサイトを作ろう その1

こんにちは!新人脱出かもしれない森田です。
数日前はすごくあったかかったのに、昨日今日とものすごい冷え込みです。はふはふ言いながら鍋焼きうどんとか食べたくなります。

前回Bootstrapの紹介をしましたが、その派生としてBootstrapを使って実際に1からwebサイトを作ってみるという連載企画的なものに挑戦しちゃいます。連載ってなんか良い響きですね。
では始まりますよー

制作環境を整える

webサイトを作るといってもいきなりコーディングをするわけではありません。元弓道部的な説明だと、弓を引く為には道場を掃除したり的や弓具の準備が必要です。何事も土台が大切なのです。

フォルダ作成

web制作の土台って何かというと、フォルダとファイルの整備です。

BootstrapをサイトからDLしてきたら、zipファイルを解凍します。解凍したてのフォルダ名は”dist”となっていますが、制作用に“_sample”に名称変更しました(名前はなんでもいいです)。フォルダの中にはcss、fonts、jsという3つのファイルが入っています。これらをそのまま使用します。

140205-01

この_sampleフォルダが今後webサイトを作っていく為の基本フォルダです。長い付き合いになると思うのできれいに使いましょう。

index.htmlを作成

記念すべき1ページ目を作ります。

webサイトのメインページのファイル名は“index.html”がお決まりパターン。_sampleフォルダの下に右クリックやテキストエディターでファイルを新規作成して“index.html”と名付けましょう。

140205-02

index.htmlを作ったついでにベースだけ記述してみました。bootstrap.cssのリンクも貼って、Bootstrap使う気満々アピールです。

動作確認

これは本当にちゃんと動くのか?

さっくりhtml書いてはみたけれど、作ったindex.htmlがちゃんとbootstrap.cssを反映して動いてるかは動作確認しないことには分かりません。index.htmlファイルをブラウザで開いてみましょう。森田はよく記述ミスしまくるため、こまめなブラウザチェックを心がけてます。

…といっても、何か書かないとこのままでは真っ白なのでbodyの中に“test”と書き入れてみます。
ページ上に文字が表示されていたらオッケー。さらに、<h1>を使ってcssを読み込んでいるかをチェック。

140205-03

なんということでしょう
小さかったtestが大きくなったではありませんか

cssファイルも確認してみると、しっかり設定通りになっていることが分かると思います。これで表示確認が出来ました。さらにプログラム側でもエラーが出ていないか見てみます。

Macの“command+option+i”というショートカットキーでインスペクタを出せます。実行中のプログラムの中身を確認出来るとてもありがたいツールです。いつもいつもお世話になってます。

140205-04

もしエラーが出ると赤文字でその詳細が表示されます。試しにmoritaと打ってエラー表示させてみたんですが、moritaなんてないよって言われてますね。そりゃそうだ。

プログラムエラーもないことが確認出来たら、これで制作環境がばっちり整いました!
もういつでもwebサイト作れちゃいます。さあ何作りましょうか!(鼻息荒め)

次回予告

制作環境が整ったので、次回からはBootstrapのサイトのTemplateを参考にwebサイトを作っていきたいと思います。

140205-06

おお、いかにもwebサイトな感じのデザインですね。これにきれいな画像はめこんだら本物っぽくなりそうです。せっかくだから森田好みのおいしそうなサイト作りたいなあという野望を抱きつつ、それがどんな風に実現されるのか?!乞うご期待です。押忍!

標準
blog-7
Design

Bootstrapを知るべし

こんにちは!もうそろそろ新人脱出?森田です。
旧オフィスも好きだったけど新オフィスはとても快適です。が、近所の昼めしスポットを開拓しなければならないという重大ミッションも抱えております。安ウマなお店たくさん発掘できますように。

さてさて、ただ今ハレノヒでは自社アプリを開発中です!
アプリのデザインはなんと私が担当させていただくことに。webデザインよりもっと全然知識がなくて完全手探り状態でしたが、完成までもう一息というところまでこぎつけました。最初はiPhone用としてリリース予定ですのでどうぞお楽しみに!Android派の方はもうしばしお待ちください(森田もおあずけです…)

blog-5

アプリデザインが一段落ついてからはweb用の告知ページを制作していました。
そこでまた新しい試みをしたので、今回はそのことについて書こうと思います。

Bootstrapとは

「どうやらブートストラップなるものを使うとweb制作がはかどるらしい」というすごい曖昧な予備知識はもっていた森田。でもブートストラップという言葉を初めて聞いた時、真っ先に思い浮かんだのはマッチョな隊長率いるムキムキエクササイズでしたすいません。ちなみに直訳すると長靴のパーツのことらしいです。

正確には、BootstrapとはCSSフレームワークの名前です。
フレームワークというのは色んなところで繰り返し使われる汎用機能を備えたもので、記述の仕方がある程度決まっています。これを利用すれば基盤部分だったり必要な箇所を流用出来てとても効率がいいです。
汎用的なプログラムをまとめたものの仲間としてライブラリというのもありますが、こちらはもうちょっと機能が小さいです。それ自体が働くというよりは、他のプログラムの助けになってくれるイメージです。

本来Bootstrapはテキストベースでナビなどが沢山ある管理画面などの制作に向いています。アプリ用の告知ページは性質が違うのでBootstrapの良さをフル活用とまではならずも、良い勉強になりました!

BootstrapをDLする

まずはBootstrapをダウンロードするところから始めましょう。

blog-1

blog-2

http://getbootstrap.com/

と思ったらボタンが3つありますね。
これはどういうことかというと、作業スタイルによって使い分ける感じでしょうか。ページの大枠をお借りするということで、基本は左の”Download Bootstrap”でオッケーです。

ちょっと話は逸れますが、右の二つはどう使うかというと。

最近ではネット上でバージョン管理されたソースコードのリポジトリを使って他人のコードのバグを修正したり出来ちゃうんです。ソーシャルコーディングというらしいです。技術の進歩すごい。また、そんな風にソースコードを自由に見て書き込むことが出来るような活動形態をオープンソースプロジェクトといいます。

そのオープンソースプロジェクトは主にGithubという共有webサービスが使用されているケースが多く、真ん中と右の”Download source”と”Download sass”はGithubで管理されているコードとsassをダウンロード出来ます。必要な機能だけ選んだりもできるようです。

でも今回はソースコード扱うの師匠と私だけだし全然ソーシャルじゃない!というわけでプライベートモードで作業しました。Githubだとプライベート仕様が有料なのでBitbucketという無料サービスを使っています。

Bootstrapでできること

今回はざっくりと紹介することにして、次の機会に詳しく説明していきますね。

blog-3

Bootstrapではグリッドシステムを使ってレイアウトすることが出来ます。1行に12列のグリッドがあり、その数を目安に配置していけば大まかにデザインを作れちゃいます。

レスポンシブデザインにももちろん対応してます。グリッドにも何種類かに設定が分かれているので、PCではグリッド・スマホではグリッド解除みたいなことも楽々出来ます。

ボタンやフォームなどの各種インターフェースが揃っているのも心強いです。これらを駆使するとかっこいい管理画面が出来ると師匠が言ってました。

まとめ

今回はBootstrapの紹介をしてみました。ここでまとめただけでもだいぶ便利感あふれてると思いますが、実際使ってみると果たしてどれだけ効率が良いんでしょうか?!Bootstrap、恐るべしです。これを使いこなせたら私もムキムキデザイナーになれる気がします。押忍!

標準