デザイン再考。ロゴを作って、2パターン作ってみた:デザイン修行 2012.12.17

2012.12.17の作業:デザイン修行を引き続き


  • ロゴをもう少し小さくしてみたら。そうしたらeyecatchが目立つかも。
  • eyecatchの邪魔にならないよう、ロゴをセンターに持っていってみる
  • eyecatchのデザインを変えてみる
  • aboutとかrecentとかサイドバーは下に固めてもいいかもしれない

案その1:(背景画像がちょっとまだ納得いかない。自作したい。eyecatchの背景が目立ち過ぎて他とアンバランス)
internship_blog_devlove2012_124904589637029461_qhxQdWSZ_c

案その2:(シンプルで好きだけど、寂しい感じかも)

internship_blog_book_124904589637029467_8MhqEvfE_c

資料:CSS、デザイン


CSS、ロゴをセンタリングするテクニック:

Cavalier
http://cavalieressentials.com/

CSS、影の入れ方とか:

DevLOVE2012
http://devlove2012.devlove.org/

CSS、eyecatchをborderで分けるテクニック:

McSweeney’s
http://www.mcsweeneys.net/

Advertisements

デザイン修行:2012.12.12-14までのまとめ

今日の作業:2012.12.12-2012.12.14


  • 昨日の作業のまとめ
  • デザイン修行

改善案:2012.12.12


@machidaさんのレビューを受けて変更

  • フォントを探そう
  • デザインにメリハリを付けたい
  • 色をもう少し検討する
  • リボンのデザイン・色を変える
  • 背景を変える??

改善案:2012.12.14


  • ごちゃごちゃしていないのがいい → 背景があるとブログのエントリがごちゃごちゃしそう
  • monsen.jpみたいなシンプルなやつがいい
  • 白ベースにする
  • アイコン考える
  • カチッとした感じが好きなのかも → それでいて曲線が欲しい
  • 七宝柄が好きなので、それをアレンジしたのを取り入れたい

ちょっとこんな感じでできてみました:
(せっかくズルいデザインで学んだ影とかズルい線とか入れたかったのだけど断念)

internship_blog_design_2012.12.13_124904589637012703_lcRsqOqP_c

今日の作業:デザイン修行。git-flow heroku ssh_config brew

今日の作業:2012.12.12


  • デザイン修行
  • Herokuでブログデザインを動かしてみる
    • レビューしやすいから
    • 実際のhtmlが見れる
    • 実際にブログはどこで書くか?
  • Sinatra Bootstrapもやってみる
    • 町田さんに紹介してもらった
    • hamlとか実は未知

git-flowの使い方


各作業後、git branchでbranch構造を確認してみるとよい:

  1. git flow init
  2. git flow feature start hello
  3. git flow feature finish hello
  4. git push origin develop
  5. git flow release start 1.0.0
  6. git flow release finish 1.0.0
  7. git tag // tagが作られているかの確認
  8. git push // 各ブランチをoriginにpush
  9. git push origin 1.0.0 // tag 1.0.0をoriginにpush

デザイン修行:Herokuにdeploy


Getting Started with Ruby on Herokuに従って粛々と。
それがherokuにpushする段になって失敗。原因はsshの認証。詳細は後述。とりあえずupできたもの:

http://frozen-bayou-8506.herokuapp.com

git push heroku masterが失敗するところの解決法


こんなエラーが出る:

% git push heroku master

 !  Your key with fingerprint 42:bf:98:f3:9e:a1:e4:e1:ec:89:01:e7:f8:74:11:11 is not authorized to access frozen-bayou-8506.

fatal: The remote end hung up unexpectedly

fingerprintが違うらしい。
fingerprintを表示してみる:

% ssh-keygen -l -f ~/.ssh/heroku.pub
2048 99:bb:64:21:f2:ad:7f:30:f6:42:ea:61:e1:4d:11:11 /Users/satoko/.ssh/heroku.pub (RSA)

どうやら自分がherokuのrepoに関連づけたのと違った鍵でアクセスしているみたい。
というわけで ~/.ssh/configファイルを作った:
(Hostをmyherokuにして、gitのremoteにgit@myheroku:frozen-bayou-8506.herokuapp.gitをaddするとハッキリしていいかも)

#~/.ssh/config
Host heroku.com
    HostName heroku.com
    User git
    IdentityFile ~/.ssh/heroku
    IdentitiesOnly yes

そしてsshで-vを付けて追ってみたり、git remote showをしてみて確認:

ssh heroku.com -v
git remote show heroku

ようやくpush:

% git push heroku master -v
Pushing to git@heroku.com:frozen-bayou-8506.git
Counting objects: 27, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (25/25), done.
Writing objects: 100% (27/27), 409.90 KiB | 159 KiB/s, done.
Total 27 (delta 3), reused 0 (delta 0)
(略)
-----> Launching... done, v4
   http://frozen-bayou-8506.herokuapp.com deployed to Heroku

資料:brew, git-flow, bootstrap


前から知ってるのはportsだけど、最近よく見るbrewって何って思ったのですが、portsにはこういう評価が:

MacOSX向けのパッケージマネージャーといえば MacPorts が有名ですが、Mac に元々入っているプログラムもご丁寧に再コンパイルしてくれたりで、ビルドに時間がかかったりして、なかなか使い勝手が悪い

MacPorts から Homebrew への移行メモ

http://blog.takus.me/post/28409424679/mac-homebrew

git-flowの使い方。3分の2程スクロールしたところに使い方が:

git-flow によるブランチの管理

http://www.oreilly.co.jp/community/blog/2011/11/branch-model-with-git-flow.html

branchをこう切って使いましょうね。というお話。git-flowの元:

A successful Git branching model

http://nvie.com/posts/a-successful-git-branching-model/

git-flowコマンドを発行したとき、裏でどう動いているか解説:

A successful Git branching model を補助する git-flow を使ってみた

http://voluntas.hatenablog.com/entry/20101223/1293111549

Herokuにpushするまで

Getting Started with Ruby on Heroku

https://devcenter.heroku.com/articles/ruby

ssh fingerprintを見る

How to view the fingerprint of the ssh host key

http://www.enricozini.org/2008/tips/ssh-host-key-fingerprint/

gitでsshにオプションを渡す方法:

How to pass ssh options in git?

https://git.wiki.kernel.org/index.php/GitTips#How_to_pass_ssh_options_in_git.3F

~/.ssh/configの書き方:

SSH_CONFIG (5) 日本語マニュアルページ (2012/08/30)

http://www.unixuser.org/~euske/doc/openssh/jman/ssh_config.html

configの中で、githubに複数のリポジトリに別々のkeyを使って作業する設定の解説がよかった:

Simplify Your Life With an SSH Config File
http://nerderati.com/2011/03/simplify-your-life-with-an-ssh-config-file/

@machidaさんに前に教えてもらった。再掲。SinatraにBootstrapとかhaml、compass、sassを組み込んだもの。面白そう:

Sinatra Bootstrap

https://github.com/machida/sinatra-bootstrap

今日の作業:デザイン修行 @machidaさんのレビュー

今日の作業:2012.12.6


  • 町田さんにレビューしてもらった内容をまとめる
  • レビューを受けて改善
  • Herokuで閲覧出来るようにする

@machidaさんのレビュー


めっちゃ色々書いてもらってとっても参考になったので、許可を頂いてup。
レビューしてもらったデザイン案:
intern_blog_design_2012.11.22

  • 「背景の印象」
    • パリっとしてる
    • 都会的
    • 清潔感
    • 洋服で例えたらパリっとしたYシャツって感じ
  • 「ロゴのフォントの印象」
    • 可愛らしい
    • ファンシー
    • 太い
    • 洋服で例えたら可愛いダッフルコートって感じ

パッと見、パリっとしたYシャツに可愛いダッフルコートを着ているような印象を受けました。テイストを統一すると狙いが明確になりそうです:

  • 背景に合わせて細いsuns-selifのフォントを使うことでオシャレな都会っぽい印象を与える
  • フォントに合わせて、キャンバス生地や木目のテクスチャを使うことで温かみのある印象を与える
  • <色について>
    • 原色、無彩色で作られてるので、全体的に強烈な印象を感じます
    • 同系色を使ったりなどしてコントラストを少し弱めるのもひとつの手かもしれないです
    • 色と背景だけを見ると、さらに都会っぽさを感じるので、フォントの持つ人間味がさらに野暮ったく感じでミスマッチ感が増してるかもしれないです
  • <ヘッダについて>
    • 背景が黒いヘッダと赤いリボンは結構大きいので、背景のキッチリした印象と比べると、ポップな印象を与えてミスマッチかもしれません。
    • パリっとしたスーツの女性がちょっと変わった髪型をしているような印象を感じました。
    • デザインをする、と意識しすぎると、結構装飾をしなくては、と思うことがあるのですが、一度作ったあとに、必要か不要かを判断するために消したりするのも手です。もしかしたらないほうが綺麗、ないほうがわかりやすい、みたいなことがあったりします。あと、デザイナーあるあるなんですが、何でも囲いたがる病、に陥ることがよくあります。囲うのは何のため?囲う以外に手はなかった?ということをよく自問したりします。なんでも囲うと目立つために囲ったはずが、全部の強さが均一になって目立たない、ミチミチした印象になる、ということがあります。
  • <タイトルについて>
    • 印象的なロゴに使われているフォントがタイトルにも使われていますが、結構太いフォントなので、見にくいかもしれません。
    • 例えば、ロゴに独特なserifを使ったら、本文にはあまり独特でないものを使うと、よりロゴが際立つ場合もあります。
  • <僕も挑戦してみました>
    背景が都会っぽかったので、知的な女性みたいな感じをテーマに簡単ですが作ってみました。
    コントラストを使って、見せたいところなどの差別化、全体的に地味過ぎないように、
    丸の部分はあえて彩度の強い色を選びました。華やかになってるかと思います。
    女性っぽい印象を与えるために曲線が欲しかったので、雫を使ってみました。
    あと、アイキャッチの部分(白背景の場所)も微妙に角丸にしています。
    アイキャッチの白と背景の境界を少しわかりやすくしたかったので、影を少しだけ付けました。
    machida_cb7d2015ff6bcd3215337854310efc01

フォントについて


そもそもフォントのserifって何かよくわかってなかったので調べました:

  • sans-serif:ゴシック体風。ひげ無し。
  • serif:明朝体風。ひげ付き。
  • monospace:等巾フォント。大文字、小文字、英数文字の巾が等しい。
  • fantasy:装飾体。花文字、ポップ文字など。読めないフォント(絵文字、シンボル・フォント)は除く。
  • cursive:手書き体風。

http://msugai.fc2web.com/web/app/font.html より

作業週:怖話の改善案とデザイン修行(Sinatra, Bootstrap)

今日の作業:2012.12.5


  • 引き続き怖話の改善案を検討
  • デザイン修行の続き

引き続き怖話の改善案を検討


  • twitter botを作ったらどうか
    • 新着とかランキングとか
    • twtに時々写真をtwtする。写真をTLで見かけるだけで見にいきたくなるから。
  • 時間を告げる怖話 twitter bot
    • 丑三つ時とか夜中の暇な時間帯にのみ、怖い話/写真をtwtしてくる
  • 怖話時計とか
    • リマインドされて、見に行きたくなる
    • 夜中にふいに見に行きたくなる
  • お話しにカバーを付ける
    • 雰囲気がもっと出る
  • コアのユーザが楽しめる機能を付ける
    • 常連のコアユーザの行動がどんなものか
    • ユーザーさんがupしたときにtwtしてもらって、kowabanaに貢献してるぜってアピールしたいものか??

怖話10月のアクセス数・収益
http://fjord.jp/love/1270.html

常連 62.33%
新規 37.67%

デザイン修行の続き:rbenv、Sinatraを使う


Lokkaも良いけど、素のsinatraでbootstrapもやってみたいなと思い、rbenvをインストール
下記に従ってrbenvをインストール:

rbenv で ruby のバージョン管理をする(Mac)
http://blog.twiwt.org/e/66a1d0

rbenvでインストールできるrubyの一覧は下記のコマンドで

rbenv install --list

https://github.com/sstephenson/ruby-build#usage より

1.9.2-p320をインストールしようと思ったが、1.9.3-p125移行でないとmacにインストールされているllvm-gccに対応していないため、思い切って1.9.3-p125をインストールしてみる。

%rbenv install 1.9.3-p125  
Downloading http://pyyaml.org/download/libyaml/yaml-0.1.4.tar.gz...
Installing yaml-0.1.4...
Installed yaml-0.1.4 to /Users/satoko/.rbenv/versions/1.9.3-p125
Downloading http://ftp.ruby-lang.org/pub/ruby/1.9/ruby-1.9.3-p125.tar.gz...
Installing ruby-1.9.3-p125...
Installed ruby-1.9.3-p125 to /Users/satoko/.rbenv/versions/1.9.3-p125
Downloading http://production.cf.rubygems.org/rubygems/rubygems-1.8.23.tgz...
Installing rubygems-1.8.23...
Installed rubygems-1.8.23 to /Users/satoko/.rbenv/versions/1.9.3-p125

rbenvで使用できるバージョンの確認:

%rbenv versions  
    1.9.3-p125

ローカルに1.9.3をセット:

%rbenv local 1.9.3-p125

ローカルにセットされているrubyのバージョンを確認:

%rbenv version
  1.9.3-p125

ここまで来たら、http://www.sinatrarb.com/intro を読みながらSinatraの作業。

Sinatraのインストール:

%sudo gem install sinatra

helloword.rbを作成:

# helloword.rb
# my first sinatra app
require 'sinatra'

get '/test' do
   'Hello world!'
end

# for Bootstrap test html
get '/' do
    redirect to('/hero-unit.html')
end

実行してみる:

%ruby -rubygems helloword.rb

ブラウザで  http://localhost:4567/test にアクセス。

無事表示できました。

デザイン修行の続き:Bootstrap


先程のhelloword.rbもbootstrapも含め、前からBoostrapを適用していたhero-unit.htmlやcss・pngを追加、こんな感じで配置。

簡単にローカルブラウザで確認することができました:

%tree
.
├── helloword.rb
└── public
    ├── css
    │   ├── bootstrap-responsive.css
    │   ├── bootstrap.css
    │   └── style.css
    ├── hero-unit.html
    └── images
        ├── design_and_everydaylife.png
        ├── grey.png
        └── red_tag.png

デザイン修行の続き:Heroku


時間切れ、また明日

作業週:怖話について考える

今日の作業:2012.12.3

  • Fulcrumで自分に割り当てられた作業をチェックする→ (タスク終了後にfinishボタンを押すと、deliverボタンが表示されるが意味が分からない) → 質問した
  • 怖話を一通り使ってみる
  • Bufferに登録、怖話を読んだtweet投稿を予約する
  • 怖話改善案を考えてみる参考

    http://eureka-me.tumblr.com/post/34218812507


怖話を使ってみて良かったところ

  • タップして次が出てくるギミックは怖さを煽るので良い
    一方で面倒。→ 全部表示されるモードがあり、大変良かった。
  • 漫画の怖話面白かった!
    やっぱり漫画は読みやすい。

怖がりな私の怖話の印象

  • 怖い話嫌いなので続かない
  • 幽霊嫌い・幽霊っぽいのがいっぱい
  • 画面が暗い
  • なんとなく男の子っぽいイメージ
  • 怖話に投稿するハードルが高そう
  • 怖い面白そうな話が埋もれてそう(発掘する機能があると良さそう)

改善案

  • 季節にあわせた怖い話を用意する:春、夏、秋、冬カテゴリ
    → 夏、がどうしても怪談というので出てくるけど、季節それぞれに怖い話があるはず
  • 幽霊系ではない怖い話を探せるといいかも:幽霊系・冒険系・オカルト?とか
    俺vs山の熊親子は怖いけど霊ではないので読めた
    → 幽霊苦手な人も幽霊話に出会わないで自分にあった怖い話に出会えるように
  • 各地の怖い話を集めてきたらどうか?
    → 都道府県一つずつ
    → 画面にメリハリがないので、地図とかあると面白いかも
  • 女の子と一緒に読む怖話特集とか?
  • 初心者が怖話と仲良くなるためのステップとか作る
    • 一番始めに読む怖話、次これ、マジ怖これみたいな。
    • アンケートに答えてもらってこれがオススメとか表示
  • 子供向けの怖話ページ
    • 小学校低学年では「怪談レストラン」が流行っている
    • 定番の怖い話が紹介してあると、親でも見せやすい。常識として知っておいて欲しい
    • 日本の怖い定番の昔話を子供に伝えたいけどよくわからない
  • 世界の怪談
  • 日本の定番の怖い話
  • 子供と一緒に読む怖話特集
  • 夏休みの自由研究対策特集
  • 怖話の本リスト
    • amazonのリストマニア
    • カーリルのリスト
  • 心霊写真カテゴリ作る
    • みんなで盛り上がれる
    • 心霊写真作れるアプリ
  • フォントを怖い話っぽいフォントにしてみる
    → あの擦れてるやつ