title-coding
Design

サイトコピーしてコーディング修行 その1

こんにちは!新人森田です。
入社してからあっという間に3ヶ月が経ちました。
まだまだ知ることが山積みすぎますが、ここからは更に気合い入れていきます!

そして久しぶりのブログ更新ですすみません。
ネタ探しに行き詰まって違うことしてました。
何をしていたかというと、サイトコピー的なことです。
サイト模写はデザインのスクリーンショットを撮ってPhotoshopでトレースし、間の使い方だったり平面的な勉強が出来ます。
サイトコピーはコーディングで同じようなサイトを作るので、模写の効果+コーディングの腕も上がるんじゃないかという目論見です。

仕事で少しずつコードを触るようになりちょっとしたアイコンなどを画像として切り出して処理していたら、師匠から画像を使わないやり方を教わって目からウロコだったり。
ギャラリーサイトでかっこいいなーと思ったサイトをレスポンシブにしたくなったり。
そんな経緯があって始めてみました。
参考元の作り方を批判したいわけじゃなく、どうやったらより良く作れるかの練習です。
作業する上でのルールもなんとなく決めてみました。

サイトコピーのマイルール

(コード読み解くのめんどくさいから)出来るだけ元のコードは見ない
色とかフォント情報などは参考にしますが、自分でやり方を模索するためです。

(Photoshop立ち上げるのめんどくさいから)出来るだけ画像を使わない
画像を使わないほうが軽いし、修正も楽かもしれない。という言い訳です。使うときは使います。

こんな感じで、ここからはどんな感じで進めたのかをご紹介。

制作準備

制作環境を整える

Bootstrapの回と同様、やっぱり最初は制作環境です。
自分でフォルダ作ってローカルで確認しつつっていう感じでも出来ますが、Compassなどの導入・scss使うにはscout起動必須、などなど結構手間だったりします。というか最初はそうやってました。
が、そんなやり方をしなくてもあるんです。便利ツール。

Middleman

どん!師匠に教えていただいたMiddlemanという静的サイトジェネレータです。
これはRubyをベースに作られているため、まずRuby環境を整える必要があります。
やり方はRubyを始めようで詳しく紹介しています。

最初が少しむずかしくても、Middlemanを導入すればちょっとコマンドを書くだけで至れり尽くせりな環境を作ってくれます。

0327-4

サーバーも立ち上がるみたいだし、練習するにはこの上ありません。

コピーしたいサイトを探す

ギャラリーサイトにも色々あるし、それをまとめたものもググればすぐ出てくるんですが。
あえて挙げるとしたら、このへんがいいかもです。

io3000
どこのまとめサイトでもオススメされてる使い勝手の良いサイトです

muuuuu.org
最近はやりの1ページ完結型の縦長サイトがたくさんあります

これらは国産サイトのギャラリーですが、そのうち海外のデザインも参考にする予定。
おそらく1つはコピーしたいものが見つかったと思うので、早速作業にうつりましょう。

私の作ったものを例に挙げながら作業の様子をお伝えしていきます。

Chowder’sのコンテンツをコピーする

まず1つめに選んだのは、Chowder’sというスープ屋さんのサイトの一部です。
メニューラインナップの下に、本日の名言とおすすめメニューの紹介があります。
このデザインがシンプルなのに可愛くて、すごく気に入ってしまいました。

構成を考える

まずどんな構造かを調べてみます。
コンソールで背景画像を消してみると、要素のひとつひとつがよく見えます。

0327-1

見てみると、見出しがそれぞれ画像だったので、cssだけで作ってみようと思います。

0327-2

まずはこんな風にボックス要素の構成を決めます。

コーディングする

画像の代わりにcssのborderを使うことで周囲の線を処理。
ポストイットに見せかけた黄色いボックスも頑張ればいけそうですが、さすがにそこまでやるとコードがごちゃごちゃしそうなので画像を使います。
Google Fontsを使って見出しのフォントを似せれば完成です。

↑スクロール出来ます
日替わりコンテンツのため、引用したスクリーンショットと内容は違ってます。
スープの画像のところは角丸にしたdivにbox-shadowを使ってそれっぽく。
完全再現とまではいきませんがだいぶ近いはず。

まとめ

今回の例はコンテンツの1部なのであまり複雑なことはしていません。
でもcssだけでもフラットなデザインなら画像なしで結構いけちゃうことが分かりました。
英字ならGoogleFontsで表現の幅もぐっ広がりますね。

というわけでウォーミングアップ編は終了です。
ここから徐々にコピーする範囲をサイト全体に広げていきたいと思います。
次回もお楽しみにー!

標準
title-feature
Design

スタイリッシュ!デザインの参考になるNYのホテルのWebサイト特集

こんにちは!新人森田です。
今日こそは暖かいんじゃないかと思って外に出ると期待を裏切られる毎日です。
むしろ雪が降りました。
最近くしゃみがよく出ますがこれはまだ花粉症ではないと信じてます。

今回はいつもと趣向を変えて、デザインの参考になるWebサイトを特集してみます。
暖かくなったら重いコートを脱いで、お出かけもはかどりますね。
お花見やいちご狩りと日本にも素敵スポットは沢山ありますが、せっかくならNY行っちゃう?!

というわけで特集内容はこちら!
(NY旅行にも役立つかもしれない)デザインの参考になるNYのホテルのWebサイト特集

ではいってみましょう。

堂々たる高級感!

ホテルから連想されるワードとして挙げられるもののひとつに「高級感」があります。
歴史ある一流ホテルにはそれにふさわしい雰囲気作りが必要です。

THE HIGHLINE HOTEL

hotel-1

http://www.thehighlinehotel.com/

これぞ正統派といえそうな佇まいです。
余計な装飾などは加えず、ナビゲーションはモノトーン。
丁寧に撮られた写真と、饒舌すぎないコンパクトにまとめられた情報から上質さを感じます。

THE NOMAD HOTEL

hotel-2

http://www.thenomadhotel.com/

こちらはまずページの黒枠に目がいきます。
フィルム写真を見ているかのような感覚がします。
コンテンツそれぞれにフルサイズの画像が使われているので、その世界観に引き込まれてしまいます。
また、米仏伊独日の言語にローカライズされていてるのも嬉しい。

フォント選びが素敵!

「高級感」といえばかっちりとしたセリフフォントを想像しがちですが、それだけではスタイリッシュとはいえません。
上品かつオシャレに演出されたサイトを見たら旅行したい衝動が一層強まります。

WYTHE HOTEL

hotel-3

http://wythehotel.com/

今回紹介した中で唯一きちんとレスポンシブしていたサイトでした。
トップページを見るとカジュアルめな印象を受けますが、本文にはセリフ体が使われていてあくまで見出しの役割のようです。
メリハリがあって好きなテイストです。
提携している(?)レストランのページもオシャレ。

THOMPSON HOTELS

hotel-4

http://www.thompsonhotels.com/

左上に予約ボックスが固定されていながらも、ページ全面を使ったレイアウトにはスタイリッシュとしか言いようがありません。
予約ボックスの横のナビゲーションが実はパンくずみたいな機能も果たしていてシビれました。
各要素のポジションが%で定義されていたので、ある程度の画面サイズの変化には耐えられそうでした。

REFINERY Hotel

hotel-5

http://www.refineryhotelnewyork.com/

今までのサイトとは違って、ギャラリーサイトみたいな、雑誌を読んでいるみたいなレイアウトです。
黒背景に写真の色が際立っています。
全体の雰囲気に合わせた手書き風フォントがかっこよかったり、でもどこか親しみやすい感じがしたり。

リゾート感あふれてる!

異国への旅はまるで非現実の世界に来たかのようです。
あふれるリゾート感もまた、もうここ行くしかないわって思っちゃう理由のひとつです。

THE Jade Hotel

hotel-6

http://www.thejadenyc.com/

indexページと各コンテンツページの見せ方に差があって分かりやすいです。
随所に使われている花モチーフのパターンが全体の雰囲気を引き立たせてくれています。
差し色が赤だったりと色使いが絶妙。

THE JAMES HOTELS

hotel-7

http://www.jameshotels.com/

見るからに開放感あふれちゃってます。
こういう広々のびのびとした空間の使い方は海外ならではな感じ。
NYのホテルっていうテーマなのにマイアミのビーチに目がいきまくってしまいます。
これはあれですね、旅行業界におけるシズルというか。今すぐ旅立ちたい!

まとめ

いかがだったでしょうか。
コンパクトかつ使いやすいナビゲーション・迷わないUI設計・フルスクリーンでスライドする写真などなどスタイリッシュさ満載で、さすがWeb先進国という感じでした。
何よりやっぱり毎回思うけど海外の写真とか英語はずるいです。
でも日本にも日本の良さがあって、日本という文化圏に合わせた、使いやすくスてタイリッシュなWebサイトってきっとあるはず。
今回紹介したようなWebサイトに刺激とエッセンスを貰いつつ、どうやったらそれが実現出来るのかを日々模索します。押忍!

標準
jquery-title2
Design

jQueryを使ってみよう その1(動く目をつくる)

こんにちは!
昨日会社のヒーターでコートの袖を焦がしそうになった新人森田です。
わたあめみたいなにおいがしました。
暖かくなるのはいつなんでしょうか。

jQueryを使ってWebサイト作りたいなあとずっと思っていたんですが、前回Bootstrapでついに使うことが出来ました。
でも便利すぎたおかげで、ちゃんと使えるようになったわけではありません。
これは勉強するしかないなと思い立ちました。
ら、師匠がJavascript基礎講座を開いてくださいました。

教わりながら簡単なJavascriptを作ってみたので、
今回はその作り方を振り返りながら頭の中を整理してみたいと思います。

データのルール

関数と変数

Javascriptにはそれ自体が動作をもっている関数と、動作をもっていない変数があります。
変数はscssでも使ったことがあるし何となく使い方も分かるような気がします。
関数にはさらに“input = 引数(ヒキスウ)”“output = 戻り値、返り値”というのがあって、引数を与えて出てきた戻り値を色々と処理するわけです。

文系に進んで数学から逃げてきたと思いきや、まさかここで関数と出会うことになるとは。。
というか、そもそもプログラミングが数学っぽいものだったりしますね。
Javascriptを多少なりとも理解することで数学を克服したと思うことにします。

データ型

扱うデータの型は5種類です。
それぞれ記述の仕方によって区別されます。

  • 1  :int,integer,number(整数)
  • ‘…’    :string(文字列)
  • […] :データの順番が保持される配列
  • {…}   :データを格納するオブジェクト
  • 真偽値:true,false

これらのデータ型を使い分けていきます。

jQueryを使ってみる

予備知識がすごくアバウトですが、あとは実際に書きながら覚えていきましょう。
今回はjQueryを使って「マウスを追いかけて動く目」をつくってみます。

最初に顔のベース画像を用意します。
ティムバートン作品を意識してみました。

0305-1

 html,cssを書く

Webページ上にデータがないと動かせないので、htmlとcssを使って簡単なページを作ります。
この時のポイントは、目が動く範囲のdivを作っておいて、その中に黒目の部分を入れるということです。

0305-2

こんな感じです。ついでに口も作っておきました。
目や口はpositionで位置を調整してあります。
円形に可動範囲を限定しようとすると難しい処理が必要とのことで、ちょっと目ん玉飛び出しますがご了承ください。

jQueryを前提としているため、htmlファイルには自分で書くjsファイルの他にjQueryのjsファイルにもリンクが必要です。

jsを書く 1

準備が整ったところでjsファイルをいじりましょう。
今までノータッチだった未知の領域に一歩踏み出しちゃいます。
“main.js”と名付けて作業を始めます。

htmlと同じようにざっくりした部分から詳細設定を書き込んでいきます。

まずは実行タイミングを決めます。
青い文字は自分の覚え書き的なものですが結構主張しちゃっててすみません。

0305-3b

“$()”の()内に引数を入力します。
ここでは引数が“function”=無名関数というもので、“function(){}”の()に仮引数、{}には関数の中身を書き込むという形式になっています。
jsさんなかなか複雑です。

上の段落の記述で.readyと同じようにページ読み込みのタイミングでjsが実行されます。
そのオブジェクトの中に、次にどういう動きをするかを設定します。
また、それが正しく動作しているかを“console.log”を使って確認をします。

下の段落は、
「body内でマウスを動かすとtestという文字列が表示される」
という動作を定義してあります。

0305-4

bodyのwidthとheightが100%なので、body=画面となり、画面内でマウスを動かすと動かした分“test”が表示され続けることになります。

というわけで1つめはクリアです。

jsを書く 2

次はマウス(ポインタ)の位置に応じて目を動かしてみます。

目を動かすということは目のcssを変更するということです。
目のcssがどこにあるかをコンピューターに指示するためには、
目に割り当てたclassをセレクタに入れて、あらかじめjQuery化(jQueryが処理しやすい変数に変換)しておくことで動作がスムーズになります。
なのでページ読み込みと同時に“var”を使って変数定義しておきましょう。
これをしなくても動作はしますが、いちいちコンピューターがclassを探すことになって重くなる要因となります。

また、マウスの位置を取るには“mousemove”というイベントを使用します。
“mousemove”のイベントオブジェクトに格納されている“clientX”“clientY”を使うことでマウスの座標を知ることが出来ます。
そしてイベントオブジェクトには変数の名前を付けます。
“e”などに略されることが多く、今回はそれにならってfunctionの引数に“e”を書き込み、“e.clientX”という風に使います。

0305-5b

では“e.clientX”を使って左右の動きを付けてみます。

画面の中央に配置した顔を基準にしてどこが左でどこが右かというと、次のように考えます。
ウインドウ幅の半分の座標を中心として定義して、その増減で左右を認識させます。
後で上下の動きをつける時にも使うので、ウインドウ幅も最初に変数にしておくといいかも知れません。

“center_x”を定義したら、if文を使って「中心より左ならこう」「中心より右ならこう」と動くための条件を分けます。
ここでは(e.clientX >= center_x)という条件を使っています。
分かりやすく書くと「e.clientX ≧ center_x」つまり「中心より右」ということです。
それ以外を“else”として2つに条件分岐しています。

条件が決まったら、どういう動作をするかを書きます。
if文の中はどういう意味かというと、
変数化しておいた“$leftEye”“$rightEye”のcssを
「マウスが中心より右だったら左から70pxの位置に」
「マウスが中心より左だったら左から0pxの位置に」
変更する、という定義です。

なんでcssの値がこうなるかというと、

0305-6b

目のエリアが100×100px、目の大きさが30×30pxということを考慮して計算した結果の値なのです。

これでx座標(左右)の設定が出来ました。
xをyに変換して同様に書けば上下の設定も完了です。

たとえばマウスを画面の左上に動かしてみると、こんな顔になります。

0305-7

目が飛び出てるとギャグっぽくてこれはこれでありかも。

もし思った通りに動作しなかったら、プログラムエラーが出ていないかを確認してみてください。
アラートさんは常に冷静に何が足りないかを教えてくれます。

jsを書く 3

ここまでで、マウスの位置に応じて目が左上、左下、右上、右下に飛び出るというプログラムが書けました。
せっかくだからマウスが顔の範囲に入ってきたら目を真ん中に表示させてみます。

0305-8

if文の中にもう1つ条件分岐を書き込みます。

“else if”を使って、「e.clientX≧center_xより150px少ない値」&「e.clientX≦center_xより150px多い値」の両方の条件を満たした場合の動きをつくります。
±150pxの理由は、顔のwidthが300pxで、中心線から考えると150pxずつ幅があるからです。
この時にcssを左から35pxに変更することで目が中心に来ます。

上下も同様に、顔のheightが400pxということを踏まえてcenter_yから+200px、-200pxで条件と動きを設定します。

0305-9

これで、上図の青い範囲内にマウスが来た時に目がそれぞれの真ん中の位置にくるようになりました。

まとめ

慣れないjs構文を書くと、
文字列にすべきところにコーテーションがなくてエラー
閉じ括弧忘れてエラー
スペルミスしてエラー
と、初歩的なミスばっかりしてたような気がします。

でも実際動いてくれるのを見ると楽しい!
思い通りに使えるようになったらもっと楽しいんだろうなと思います。

今回作ったJavascriptは下記のリンクで実際に動かせますので動作確認したい方はどうぞ!
上図の青い範囲が重なっている部分(顔の範囲内)にマウスが来た時だけする動きがあったりしちゃうかも?

http://nnnzzz000.github.io/move-eye/

これからはjsももっと読んだり書いたりしていこうと思います!押忍!

標準
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を色々使ってみようと思います!押忍!

標準
blog-0221b
Design

ブログをプチリニューアルしました

こんにちは!新人森田です。
今日はアプリ博2014を見学してまいりました。
ユーザーでいるだけでは気付かないようなアプリの裏側を垣間見ることが出来たり、
名刺交換させていただいたりととても良い刺激になりました。

マーケットに山ほどあるアプリの中から選んでもらえるものを作れるように
デザインももちろんですが技術の理解も深めていきたいと思いました。

ブログプチリニューアル

さて、ハレノヒブログのリニューアルから早くも約1ヶ月が経ちました。
実装された時は嬉しいだけだったんですが、自分たちで実際に使ってみると改善点がちらほら。
修正箇所を挙げてどう進めていこうか相談していたところ、ちまちま直していくよりは思い切って作り直そうという結論になりました。

早速デザインの見直しをして、昨日プチリニューアルしました!

今回は、様々な制作会社のブログを観察しながら制作を進めました。
その作業の中で気付いた点をいくつかまとめたいと思います。

他ブログとの比較をして気付いたこと

デザインルールを意識する

リニューアルするにあたって、「デザインルール」をもう少し意識してみました。

ハレノヒブログの場合はヘッダーを水色・背景をうすいグレー・コンテンツは白地に黒文字としています。
そのルールに従って、各サブカテゴリのタイトル部を水色の帯にしたらメリハリがつきました。

また、今まで白だったフッターを濃いめのグレーにしてフッターとしての存在感を出してみました。
さらにそれに従って、記事の下のページングを同色にして同類っぽさを出してます。
濃いめのグレーに黒文字だと印象が重すぎる気がして、文字をグレーにしたところもちょっとしたポイントです。

ゆったりとしたマージン

ブログといえば情報量が多いし、いかにコンパクトに詰め込むかと考えていたのがそもそも間違いでした。
情報量が多いからこそ1つ1つの要素に広めの幅を取ることで、どこを見るべきかが分かりやすくなるんだと思います。
今までほとんど5pxだったmarginやpaddingを部分的に15px〜30pxくらいにしてみたら、窮屈感がなくなって広々と見やすくなりました。

フッターエリアが広い

フッターといえば会社のロゴやリンクやコピーライトを表示するだけの簡潔であまり幅を取らないエリア、というのが今までの認識でした。
でも改めてフッターに注目してみると、工夫する余地は十分あるんだと気付かされました。

今回フッターエリアを縦に3分割して使ってみることに。
会社情報がちょっと豊かになって、名前の文字列だけじゃないものも伝わるような気がします。

ソーシャルボタンの設置位置

これは一覧ではなく記事のページについてです。
前はツイートボタンなどは記事の頭の部分に設置していたんですが、これも良くありませんでした。他のブログでなぜソーシャルボタンを記事の上下に2カ所設置しているのかを改めて考えると、

上部:その記事の人気指数を表して、読みたくさせる
下部:記事を読み終えた後にボタンを押す、という流れをつくる

ということなんじゃないかと思います。

なのでソーシャルボタンを記事の上下に設置してみました。(押していただけるとやる気倍増します)

まとめ

結論からいえばブログはあくまでブログなので、パーツの寄せ集めなんですよね。
個性を出す部分はある程度決まっていたり。

でも色々見ながら作り直してみることで、思い込みで作っていたことに気付かされたりもしました。

まだまだ改良点はありますが、プチリニューアルしたハレノヒブログをよろしくお願いします!

標準
title-2b
Design

一日でゲームデザインをする

こんにちは!新人森田です。

皆様『イケメンばかりにチョコは渡さない』は楽しんでいただけていますか?
今回はゲーム制作の裏話をデザイナーサイドから書いてみたいと思います。
デザイナーサイドとかニヤニヤしちゃう響きです。

ゲームの素材を作る

まずはどんなゲームを作るか、企画会議です。

バレンタイン前々日に山形師匠の発案によりゲーム制作が決まり、色々とアイデアを混ぜ込んでゲームの仕組みを考えました。
…てことは制作期限1日ですか!
使用ツールはPhotoshopでどこまでいけるかやってみます!

世界観づくり

ゲームの企画が固まったら、どんなビジュアルにするかイメージを膨らませます。
登場人物はイケメンと女の子。場所は多分日本。時代はなう。

0214-4

手書きで色々とスケッチしてみました。お色気オネーサマはボツです。

0214-3

スケッチを元にPhotoshopで清書ってほどでもないラフを書きました。

でも今回のゲームはドット絵を使いたいので、本番はこれからです。

ドット絵を作る 1

ドット絵と言われても、にわか知識しかないしちゃんと作るのはこれが初めてです。
期限内に出来上がるのかも怪しいところ。

でもとにかくやらなきゃ始まらない、ということでここからは面白法人カヤックさんのデザイナーブログを参考にしました。

0214-5

まずさきほどのラフを縮小して荒くします。

その上にレイヤーを作って1ピクセルの鉛筆ツールで清書します。
普通に絵を描く感覚でなぞってから、いらないドットを消すという感じで作業しました。
0214-6

ブログ通りにやっただけでもうそれっぽくなってきました。

輪郭線のレイヤーの下に色塗り用のレイヤーを作って色を塗っていきます。
以前どこかで「ドット絵はビビットな色の方がいい」的な情報を見かけたような気がするので、一度色を置いてから彩度を上げました。あと、子供向け戦隊モノみたいに一定の色相を使った方がキャラのイメージが湧くかなと思って、ある程度系統を決めて塗ってみました。

0214-7

青系コーデにピンクのシャツで女子力アッピルです。
ビビットな塗り分けの為、陰は焼き込みカラー、ハイライトはオーバーレイに設定してあります。

見よう見まねでしたが、なんとか出来ちゃいました。
人間やろうと思えば出来るんですね。

ドット絵を作る 2

この子が歩いてくれなければゲームになりません。
先ほどのドット絵とにわか知識を元に動きをつけてみます。

0214-8

こうして大きくすると粗さが目立ちますすみません。

歩くのは足の動きが一番大事ですが、頭の高さや肩の高さ(=チョコの高さ)、髪の揺れを表現すると歩いてる感が出るかなとやってみました。微妙に頬のテカリなども変えてあります。
この辺は昔からのゲーマー気質が功を奏しました。
この調子で他のキャラも1〜2ピクセルずつパーツをずらして動きを作りました。

けど、ゲーム内では動きが速すぎてあんまり分からないというかなしみ。

背景を描く

キャラが出来たら背景を作ります。
背景は師匠の一言で「吊り橋」と決まっていたので吊り橋を描きます。
背景に取りかかった段階でもうあまり時間がなく、というかキャラはまだしも背景なんて全然描いたことがなくて、それでもなんとか間に合わせられないものかと頭をフル回転させました。

背景を描く上で大事なのは、「それっぽさ」を出すことかなと思いました。
そんなにしっかり書き込まなくてもそれっぽさがあれば人が勝手に脳内補完してくれる。はず。

0214-10

まずペン先を平たくした適当な太さのラインを引きます。

0214-9

あとは矢印の通りにざっくざっく描いていったら出来上がり。
木の質感はペン先を平筆にして木目っぽくしています。
ほとんどひたすら縦線を描くだけという突貫工事でごり押しました。

0214-11

一番しっかりしてる背景の雲はフリーのブラシ素材です。
「リアルな雲 ブラシ」あたりのワードで検索すると色んなブラシが出てくると思います。
使うか分からないけど一応DLしておいたのが役に立ちました。

各パーツを作る

その他に作ったものは以下の通りです。

  • タイトル兼スタートボタン
  • 得点の背景パーツ
  • 制限時間の背景パーツ
  • 結果表示の背景パーツ

このあたりはほとんど一発描き…
プログラミングと同時進行で足りないパーツを教えてもらって作る、という連携プレイでなんとか1日で仕上がりました。

ドット絵公開

最後に、作ったドット絵を大公開しちゃいます。
地味に表情とかこだわってたりします。
意外と悲しい顔と嬉しい顔って使い回せることも判明。

girl-blueboy

girl-pink

それぞれ「通常・チョコ渡せた・チョコ渡せなかった」バージョンです。

今回も本当に良い勉強になりました。
これで簡単なゲーム作りはばっちこい!と思いたいです!

『イケメンばかりにチョコは渡さない』

http://www.halenohi.jp/

標準
title-2b
Releases

バレンタイン特別企画:イケメンばかりにチョコは渡さない

こんにちは!新人森田です。
しんしんと雪が降り積もるホワイトバレンタイン、皆様いかがお過ごしでしょうか。

寒いし家から出たくない!

でもチョコが欲しい!

そんなあなたに朗報です!
ハレノヒバレンタイン特別企画ゲームを本日リリースいたしました!
その名も、

『イケメンばかりにチョコは渡さない』

http://www.halenohi.jp/

タイトルがタイトルなのと、昨日の予告画像を見た限りではどんなゲームか予想がつかないと思うので、こちらでゲームの内容をご紹介します。興味が湧いたら是非プレイしてみてください。

ゲームスタート

0214-0

ゲームの読み込みが終了したらスタート画面が表示されます。
タイトルをクリックするとゲームスタートです。

プレイ画面

0214-1b

ルールは簡単!

  1. ゲームがスタートしたら、画面左からチョコを持った女の子がイケメンに向かって歩いてきます。
  2. 女の子をクリックすることでイケメンに渡されるはずだったチョコを奪い取れます。
  3. 制限時間50秒の間にどれだけチョコを奪い取れるか?!

内気そうな女の子がチョコを奪われて泣いて帰ったり、チョコを渡せて顔を赤らめているのを見るとちょっと心が痛む場面もあるかもしれません。女の子をいじり倒してチョコを奪いまくるもよし、キラキラのイケメンスマイルを眺め続けるもよし、自由にゲームを楽しんでいただけたらと思います。

—ラスト20秒から、あなたは衝撃の展開を目の当たりにするでしょう

リザルト画面

0214-2

結果画面はこのように表示されます。
「もう一度遊ぶ」ボタンでリトライ出来るので、満足いくまで遊んじゃってください。

(面白いと思ってもらえたらシェアしていただけるととても嬉しいです!)

ちなみにハレノヒメンバーはまだ誰もコンプリート(イケメンにチョコを1つも渡さない)出来ていません。コンプリート出来たら、どんな風に達成出来たかご指南ください。

ハッピーバレンタイン!

それでは男子も女子もイケメンのかたもそうでないかたも、
「イケメンばかりにチョコは渡さない」をプレイしてハッピーなバレンタインをお過ごしください!

『イケメンばかりにチョコは渡さない』

http://www.halenohi.jp/

標準
title-2b
Releases

バレンタイン特別企画予告

こんにちは!
オフィスの近くにワインショップを発見し、いつか行こうと計画中な新人森田です。

本日はハレノヒバレンタイン企画のお知らせです。
とってもすごく楽しいバレンタインゲームを作りました!

タイトルのイメージ画像だけこっそり貼っておきますね。

title

こ、このリア充に牙をむくようなタイトルと謎の吊り橋は一体…?!

明日のリリースをどうぞお楽しみに!

標準
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が重なってますね。ここは再現しておきたいところです。

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

標準