手が可愛い。遊びごころのある操作感。線太めのイラストもステキです。
- 手が可愛い。遊びごころのある操作感。線太めのイラストもステキです。okabe
Salt Films
↧
↧
あるマンガキャラクターを記憶力だけで描いてみた。
今朝は風が強かったですね。誰かがエアロガを使ってると思いました。ども、shiihoです。
最近、忙しくて日曜の9:00にやってるあのアニメをなかなか見れません。そんな中カヤックデザイナーで新しい企画が登場しました。
「マンガキャラクターを見ないで描いてみよう」という企画です。
普段見慣れてるものでも、いざ描いてみようとなると、なかなか難しいですよね
記憶力をたよりに必死に描いたのに、意外なものができてしまったというのは良くあることです。
マンガ好きなカヤックにはぴったりの企画ですね。では早速みてみましょう。
なんか違うけどサワヤカ
なるほど、オブジェクトを持たせることで、そのキャラクターが分かりますね
なかなか可愛らしいですね
前衛的な髪型ですね
すごい、気合いがはいってます。
今はやりのゆるキャラですね。わかります。
うーん、分かるようで分かりません
そうですね、その辺がやぶれてます。
お、これは気合いが入ってますね
うほ、いい男じゃなくて、いいイラストですね
そろそろ髪をきりにいきましょう
これは分からなそうで分かります。
もう似てなくても良いです。かわいい
なんでしょう、この懐かしい感じ。昔のOVAの主人公を思い出します。
なんだか毎日いたずらをしていそうです。
こ、これは・・・なんだかすごい
そんな訳で、あるマンガキャラクターを描いてみました。なかなか個性的なものがそろいましたね。この企画、次回はあるのかないのか・・・・
↧
漫画っぽいデザインが気になりだしたらチェックしておきたいサイトをざっくばらんにまとめてみました。
カヤックのサイトがリニューアルしましたが、もうご覧になられましたか？
随所に漫画テイストのデザインが取り入れられています。
この漫画っぽいデザインって、単純そうで実は奥が深いんですよね。そこで今回は、漫画っぽいデザインが気になりだしたらチェックしておきたいサイトを集めてみました。
チュートリアル系のまとめや、漫画の書き方まで幅広くざっくばらんに紹介します。
すぐ使えるチュートリアル・素材系
Mascot Design In Real Time Order - the SOSFactory Way - Psdtuts+
海外っぽいキャラクターの描き方。動画でチュートリアル。ニコニコ動画にもたくさんチュートリアル系がアップされてます
初音ミクが可愛すぎるので描いてみた
SAIでニコニコお絵かき 翠星石編Give Your Photos a Retro Comic Book Effect
写真をレトロなコミック風に加工週末に学ぶイラストレーター25のテクニック「25+ illustrator tutorials to start your week」 | DesignDevelop
とーんめーかー& amp;gt;
スクリーントーンを生成するフリーソフト
漫画の基礎・基本など
漫画の描き方
モバイルサイトもありました
気になる記事はありましたか？漫画デザインは奥が深いですねえ。楽しく取り入れて行きましょう！
↧
みんな大好き！まんが雑誌ロゴまとめました。
みんな大好き幼女、、、じゃない少女雑誌や少年誌！
そのロゴは、一部が絵で隠れていたり、
読めないほどデフォルメされているのにかかわらず、
似たような雑誌の中からでも、一目で見分けがつきますよね。
・・・でも、それって実はすごいことなのではないでしょうか。
そこで今回、代表的な少年誌と少女雑誌のロゴをトレースしてみて、
それぞれのロゴの特徴について考察してみました。
少年誌
![ロゴ：コロコロ]()
- キューブ型のロゴがコロコロと笑い転げるように重なり合っています。丸みが強く、低年齢層に愛される雑誌らしい書体です。
![ロゴ：ジャンプ]()
- 直線的で力強い書体。ロゴにはいった切り込みがスピード感とシャープな印象を与えています。その時代にあったヒーローのかっこよさを伝えているようです。
![ロゴ：マガジン]()
- 縦長の書体と内側にはいった黒いラインが他誌に比べて大人びた印象を与えています。イメージキャラクターのモグラは"ピモピモ"というそうです。
![ロゴ：サンデー]()
- 同じく直線的ですが、太いゴロっとした書体で余白が少なく、明快さと大胆さが表現されています。
少女雑誌
![ロゴ：りぼん]()
- リボンの帯状のラインをイメージさせるロゴ。太めのウェイトでさりげない丸みがかわいらしさを演出しています。
![ロゴ：ちゃお]()
- ふところが広く、丸みをおびた書体で元気いっぱいの活動的な女の子が浮かんできます。文字の末尾の丸いアクセントがお茶目な雰囲気です。
![ロゴ：なかよし]()
- ウエイトは全体的におなじ太さで、幾何的なライン。ほかの二誌にくらべて洗練された印象。文字の近接が友達の距離の近さを表現しているようです。
時代の流れとともに、ロゴや誌面もリニューアルを重ねながら、
愛されてきた少女雑誌や少年誌。
それぞれの対象読者や特色がロゴにも現れていますね。
↧
twitterにいるキャラクターをまとめてみた。
こんにちはshiihoです。今日は日食だそうですね。
twitterにアニメとかコンテンツとかのキャラクターはどれほどいるのかなと疑問になったので、いろいろまとめてみました。意外なキャラクターもいてビックリです。それでは見て行きましょう。
毎日ｊｐ編集部
http://twitter.com/mainichijpedit
毎日jpのマスコットキャラクターがニュースをお届けします。
ガチャピン
http://twitter.com/gachapinBlog
あのガチャピンがいろいろつぶやきます。
みどりさん
http://twitter.com/kyounomidorisan
ブログを書く植物みどりさんのつぶやきです。
タチコマ
http://twitter.com/tachikoma_bot
タチコマが原作のアニメや映画の台詞をうまい具合に織り交ぜながらつぶやいてくれます。
スライム
http://twitter.com/dq_jumon
スライムがいろいろ呪文を唱えてくれます。
mixi_mocha
http://twitter.com/mixi_mocha
キャラクターtwitterの先駆け、コーヒーができるとつぶやいて知らせてくれます。
初音ミク
http://twitter.com/vocaloid
ヴォーカロイド関連のニコニコ動画を教えてくれます。
ついったん
http://twitter.com/twittan
twitterを擬人化したキャラクター。ツンデレらしい
ha_ma
http://twitter.com/ha_ma
有名なキャラクターさん、botなのかは不明・・・・
ちがったー
http://twitter.com/chigatter
「あなたとは違うんです」発言のネタBOT
酢鶏
http://twitter.com/sudori
にわとりキャラクターのtwitter
貞子
http://twitter.com/sadako_
まさか、こんな方まで・・・・
けいおんメンバー
http://twitter.com/akiyama_mio
http://twitter.com/hirasawa_yui2
http://twitter.com/kotobuki_tumugi
http://twitter.com/tainaka_ritu
http://twitter.com/hirasawa_ui
http://twitter.com/manabe_nodoka
http://twitter.com/nakano_azusa
http://twitter.com/yamanaka_sawako
アニメけいおん！メンバーのtwitterです。
アイドルマスター
http://twitter.com/futami_ami_mami
http://twitter.com/kisa_chihaya
http://twitter.com/hagiwara_yukiho
http://twitter.com/takatsuki_yayoi
http://twitter.com/miura_azusa
http://twitter.com/minase_iori
http://twitter.com/kikuchi_makoto
http://twitter.com/amami_haruka
http://twitter.com/hoshii_miki
http://twitter.com/akizuki_ritsuko
http://twitter.com/shijou_takane
http://twitter.com/ganaha_hibiki
アイドルマスターのキャラクターたちのtwitter ニコニコ動画をいろいろ紹介してくれます。
他にもまだいそうですね、さすが twitter奥が深い。
↧
↧
デザイナーが選ぶ！！こだわりの漫画装丁
本屋に並んでいる膨大な漫画本。
その中でも装丁の凝ったものはつい手に取ってしまいますよね。
そこで、すてきな装丁の漫画本をまとめてみました。
では早速つづきをどうぞ！
気付いてにんまり・仕掛け系
- 「ドラゴンボール」 鳥山明 背表紙を並べていくと一枚の絵になるのは有名ですね。
この繋がった絵を見るだけでもワクワクします。
コミックをそろえる楽しみをさらに増やす演出が
今から二十数年前に考えられていたと思うと改めてすごい。
作品とぴったりマッチ系
- 「さくらん」 安野モヨコ
-
金の光沢のある紙に、ページ部分の横（小口）がどぎついピンク。
中身とピッタリあっている装丁ですね。
- 「ツノ病」 クリハラタカシ
-
可愛いのになんか冷めてるみたいな雰囲気が素敵ですね。
ポップだけどどこか抜けてる感じがあって作品に合っています。
- 「ライチ☆光クラブ」 古屋兎丸
-
原作が80年代のお芝居ということで、表紙と目次が
当時のポスター、パンフレット風のデザインになっています。
作者自身ファンだった劇団ということで、アングラ芝居好きなら
表紙買いしてしまいそうな迫力の仕上がりになっています。
素材にこだわりアリアリ系
- 「サプリ」 おかざき 真里
-
カバーが半透明の紙に印刷されています。
下地のイラストとカバーのイラストの合わさりが透明感があってとても綺麗。
- 「蟲師」 漆原 友紀
-
紙の質感が柔らかくて、水彩とマッチしています。
- 「ＧＯＴＨ」 乙一, 大岩 ケンヂ
-
人物と文字の部分がＵＶ印刷。てかてか。
- 「プルートゥ」 浦沢直樹
-
カバーの素材が半透明のトレーシングペーパーの様なものを使っています。
中の本の表紙が透けて見えてかっこいい！
勇気あるギリギリネタ系
- 「まんカス」 漫画太郎
-
中央が型抜きされていて、おっさんがのぞいています。
タイトルは「まんカス」４文字なのに
オビには入ってはいけない１文字がチラみえ。。。
- 「かってに改造(9)」 久米田 康治
-
カバーをめくるとヒロイン羽美ちゃんが座っている袋の中身が明らかに！
なんとヤバイ目をしたチタン君(いじられキャラ)が入っています。
でも気付いたときにちょっとうれしい。
うーん、思わずジャケ買いしちゃいそうなラインナップ！！
オマケ要素と思われがちな「装丁」という切り口で漫画を選んでみると、
新しい出会いのきっかけになるかもしれませんね！
ちなみに、漫画本以外の本の装丁に関して
以前に書かれた記事があります。こちらも併せてどうぞ！
カヤックデザイナーがおすすめする装丁の素晴らしい本
↧
CSSアニメーションでアイコンを動かす
CSSアニメーションを使ってアイコンを動かしてみたいと思います。
以下、気をつけた点。
- CSSアニメーションに非対応のブラウザでもアイコンとして成立している
- 過剰なマークアップをしない
現実的に使えそうな路線で頑張ってみました。
アニメーションさせるのはこの「New!」と書かれたアイコン。
New!
.iconNew{
width: 3em;
text-align: center;
background: #54bb00;
color: #fff;
font-weight: bold;
text-shadow: 0 1px 0 #3f3f3f;
margin: 0 25px 25px 0;
letter-spacing: 2px;
padding-left: 4px;
}
以下、Safariかgoogle Chromeでご覧ください。
New!
.iconNew.arrange01 span{
display: block;
-webkit-animation-duration: 1.5s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-transform-origin: middle center;
-webkit-transform: scale(1);
-webkit-animation-name: outer01;
}
@-webkit-keyframes outer01 {
0%{
-webkit-transform: scale(1);
}
70% {
-webkit-transform: scale(1);
}
85% {
-webkit-transform: scale(1.4);
}
100% {
-webkit-transform: scale(1);
}
}
New!
.iconNew.arrange02{
-webkit-animation-duration: 4s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-transform-origin: middle center;
-webkit-animation-name: outer02;
background: #54bb00;
}
@-webkit-keyframes outer02 {
0%{
background: #54bb00;
}
30%{
background: #54bb00;
}
50% {
background: #98f139;
-webkit-box-shadow: 0 0 7px #98f139;
}
70%{
background: #54bb00;
}
100% {
background: #54bb00;
}
}
New!
.iconNew.arrange03{
position: relative;
bottom: 0;
-webkit-animation-duration: 1.5s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-transform-origin: middle center;
-webkit-animation-name: outer03;
-webkit-transform: rotate(0deg);
}
@-webkit-keyframes outer03 {
0%{
-webkit-transform: rotate(0deg);
bottom: 0;
}
50% {
-webkit-transform: rotate(0deg);
bottom: 0;
}
60% {
-webkit-transform: rotate(5deg);
bottom: 5px;
}
70% {
-webkit-transform: rotate(-5deg);
}
80% {
-webkit-transform: rotate(4deg);
}
90% {
-webkit-transform: rotate(-3deg);
}
100% {
-webkit-transform: rotate(0deg);
}
}
New!
.iconNew.arrange04{
overflow: hidden;
}
.iconNew.arrange04 span{
-webkit-animation-duration: 6s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-transform-origin: middle center;
-webkit-animation-name: outer04;
position: relative;
left: 0;
}
@-webkit-keyframes outer04 {
0%{
left: 3em;
}
100% {
left: -3em;
}
}
New!
.iconNew.arrange05{
-webkit-animation-duration: 4s;
-webkit-animation-timing-function: ease-in;
-webkit-animation-iteration-count: infinite;
-webkit-transform-origin: bottom center;
-webkit-animation-name: outer05;
}
@-webkit-keyframes outer05 {
0%{
-webkit-transform: scale(1, 1);
}
48%{
-webkit-transform: scale(1, 1);
}
50%{
-webkit-transform: scale(1.1, 0.9);
}
53%{
-webkit-transform: scale(0.9, 1.1) translate(0, -5px);
}
57.5%{
-webkit-transform: scale(1, 1) translate(0, -3px);
}
59%{
-webkit-transform: scale(1, 1) translate(0, 0px);
}
100% {
-webkit-transform: scale(1, 1);
}
}
過剰なマークアップになってしまいますが、一文字ずつspanで区切ればこんなことも。
New!
.iconNew02.arrange01,
.iconNew02.arrange01 span{
-webkit-animation-duration: 1.5s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
}
.iconNew02.arrange01 span{
display: inline-block;
-webkit-transform-origin: middle center;
-webkit-transform: scale(1);
-webkit-animation-name: letter01;
background: #54bb00;
color: #fff;
font-weight: bold;
padding: 4px;
}
.iconNew02.arrange01 span.letter02{
-webkit-animation-name: letter02;
-webkit-animation-delay: 0.2s;
}
.iconNew02.arrange01 span.letter03{
-webkit-animation-name: letter03;
-webkit-animation-delay: 0.4s;
}
.iconNew02.arrange01 span.letter04{
-webkit-animation-name: letter04;
-webkit-animation-delay: 0.6s;
}
@-webkit-keyframes letter01 {
0%{
-webkit-transform: scale(1);
}
70% {
-webkit-transform: scale(1);
}
85% {
-webkit-transform: scale(1.5);
}
100% {
-webkit-transform: scale(1);
}
}
@-webkit-keyframes letter02 {
0%{
-webkit-transform: scale(1);
}
70% {
-webkit-transform: scale(1);
}
85% {
-webkit-transform: scale(1.5);
}
100% {
-webkit-transform: scale(1);
}
}
@-webkit-keyframes letter03 {
0%{
-webkit-transform: scale(1);
}
70% {
-webkit-transform: scale(1);
}
85% {
-webkit-transform: scale(1.5);
}
100% {
-webkit-transform: scale(1);
}
}
@-webkit-keyframes letter04 {
0%{
-webkit-transform: scale(1);
}
70% {
-webkit-transform: scale(1);
}
85% {
-webkit-transform: scale(1.5);
}
100% {
-webkit-transform: scale(1);
}
}
New!
.iconNew02.arrange02,
.iconNew02.arrange02 span{
-webkit-animation-duration: 1.5s;
-webkit-animation-timing-function: ease-out;
-webkit-animation-iteration-count: infinite;
}
.iconNew02.arrange02 span{
display: inline-block;
-webkit-transform-origin: middle center;
-webkit-transform: scale(1);
-webkit-animation-name: letter01b;
background: #54bb00;
color: #fff;
font-weight: bold;
padding: 4px;
position: relative;
bottom: 0;
}
.iconNew02.arrange02 span.letter02{
-webkit-animation-name: letter02b;
-webkit-animation-delay: 0.2s;
}
.iconNew02.arrange02 span.letter03{
-webkit-animation-name: letter03b;
-webkit-animation-delay: 0.4s;
}
.iconNew02.arrange02 span.letter04{
-webkit-animation-name: letter04b;
-webkit-animation-delay: 0.6s;
}
@-webkit-keyframes letter01b {
0%{
bottom: 0;
}
70% {
bottom: 0;
}
85% {
bottom: 7px;
}
100% {
bottom: 0;
}
}
@-webkit-keyframes letter02b {
0%{
bottom: 0;
}
70% {
bottom: 0;
}
85% {
bottom: 7px;
}
100% {
bottom: 0;
}
}
@-webkit-keyframes letter03b {
0%{
bottom: 0;
}
70% {
bottom: 0;
}
85% {
bottom: 7px;
}
100% {
bottom: 0;
}
}
@-webkit-keyframes letter04b {
0%{
bottom: 0;
}
70% {
bottom: 0;
}
85% {
bottom: 7px;
}
100% {
bottom: 0;
}
}
ここまでできて感動するものの、実際なかなか使える機会がないですよね。
ちょっと悔しいので、今公開中のmixiアプリの中でCSSアニメーションを使ってみました。
むだづかい告白帳
Safariで遊んでみてください。プロフィールアイコンがぴょこんぴょこんします。
お知らせ
ギャル男と一緒に鎌倉で働きませんか？
マークアップエンジニア募集中です！！！！！！！！
↧
iPhone Webアプリテンプレート（CSS Nite Vol.40 reprise）
こんにちは。意匠部ME課のtacamyです。
CSS Nite 4周年記念イベント（Vol.40 reprise）にてご紹介した
iPhone Webアプリのテンプレートセットを配布します。
イベントの内容はこちらのエントリーをご覧ください。
ダウンロード
セット内容
- index.html
- HTML5+iPhone用HTML
- css/iphone.css
- HTMLの新要素＋iPhone専用CSS
- js/iphone.js
- URL&検索バーを消す指定
- js/lib/jquery.js
- jquery
- apple-touch-icon.png
- Webクリップアイコン
- cache.manifest
- マニフェストファイル
- .htaccess .manifestのMIMEタイプ設定
viewportについての補足
このテンプレートはコンテンツ幅100%で制作されることを前提に
viewportを指定しています。
必要に応じて viewportの指定を変更してください。
■参考サイト
■Googleの場合
コンテンツ幅100%で制作され、
横表示では文字サイズはそのまま、コンテンツの幅が広がる。
■Yahoo!Japanの場合
コンテンツ幅100%で制作され、
縦表示はアイコンが横に4つ並び、横表示ではアイコンが6つになります。
■イケメンホイホイiPhone版の場合
イケメンが３人ピッタリ収まるように、縦横どちらでも全く同じ見え方にしたかったので、
横幅480px固定で作り、縦にしたときはコンテンツ全体が自動縮小するようにしました。
↧
CSS Nite 4周年記念イベント（Vol.40 reprise）に出演させていただきました。
tacamyです。
11月10日（火）にCSS Nite 4周年記念イベントにて、
『HTML5のメリットを活かしたコンテンツアイデア』という
セッションでお話しさせていただきました。
ああいった場所で話をするのは初めてのことだったので、
至らない部分も多々あったかと思いますが、
ご参加いただいた皆様や、ご協力いただいた関係者の方々に感謝しています。
遅くなってしまい申し訳ありませんが、こちらのエントリーにて、
当日の資料の配布や補足事項について掲載させていただきます。
スライド
イケメンホイホイiPhone版のデモ
イケメンホイホイのiPhone版を、 HTML5の新機能を使って実装しています。
動画の解説
- 好みのイケメンをGETする
- イケメンビューア（canvasで作成）にGETしたイケメンが追加される
- イケメンビューアをホーム画面に追加して、アイコンを作成
- アイコンからビューアを起動（ネイティブアプリみたい！）
- オフライン（機内モード）にしても、ビューアが見れる（オフラインWebアプリ）
ビューアに使ったcanvasの機能
- 写真を取得して切り抜き
- 写真にピンクの枠線をつける
- インターバルタイマーのフレームアニメーション
- タッチで再生/一時停止
- フリックで写真を早送り/巻き戻し
- キラキラをランダム表示
アンケートでいただいた質問へのお返事
- 詳しく見たいけど、イケメンホイホイにユーザ登録する気がおきない。
- 他人のマイページからでもビューアは見れるので、
よかったら私のマイページをiPhoneで見てください。
http://hoihoi.kayac.com/mypage/index/member_id/27 - 画像を扱うならLocal Strageでなく、Web Databeseを使えばいいのでは？
-
この説明はちょっとややこしいので、図を作ってみました。
![]()
Aのパターン
Web Databaseに画像を保存しても、
それを直接Image objectに渡す方法がありません。
そのため、JSでBase64にエンコードしてImage objectに渡す必要があります。(3)
しかし、JSでの処理が遅いのでこの方法は避けることにしました。
Bのパターン
サーバであらかじめ画像をBase64にエンコードしておきます。(2)
この方法は処理が速い上に、エンコードしたものを保存しておけば、
リクエストの度に処理をする必要はありません。
それを取得して保存すれば、そのままの形でImage objectに渡せます。(4)
このとき、Web DatabaseとLocal Storageのどちらを使ってもいいのですが、
今回はWeb Databaseを使う必要性がなかったので、Local Storageを使いました。
ただ、実際にWeb Databaseを使ってみたわけではないので、
もし間違っていればご指摘いただけるとうれしいです！ - SQLに対してKey-Value型の使用感はどうだったか
- SQLの方（Web Database）は試してないのでなんとも。。。ゴメンナサイ。
- 具体的にJSがどうなってるか気になる
- PC版SafariのUAをiPhoneにして下記をご覧ください。
[メニューアイコン] - [開発] - [ユーザエージェント] - [Mobile Safari 3.0 - iPhone]- HTMLのソースコード
- JavaScriptのソースコード & amp;gt;
- 実際のマークアップ例が見たい
- スライドでは、Webアプリについての解説をメインにお話しましたが、
iPhone版のすべてのページをHTML5でマークアップしています。
PC版SafariのUAをiPhoneにしてご覧いただければと思います！
[メニューアイコン] - [開発] - [ユーザエージェント] - [Mobile Safari 3.0 - iPhone] - iPhoneで利用することと、HTML5を利用することと混ざっていて分かりにくかった
- ゴメンナサイ。次の機会があればもっと分かりやすい説明になるよう努力します！
ご意見ありがとうございます！ - ほんとに1人で作ったの？
- サイト全体はPHPで作っていますが、ビューアはHTMLとJSで作っています。
私はJSが書けないダメ女なので、社内のJSerに実装してもらっていますが、
HTMLとJSができる人ならビューア部分は1人で作れる内容だと思います。 - altの説明を詳しく聞きたい
- 下記のページで勉強して、それを噛み砕いて紹介させていただきました。
- alt属性の使い方が厳密に規定されたHTML5のimg要素 / HTML5.JP
- img 要素 / HTML5.JP
- iPhoneならHTML5使い放題？
- 説明足らずで誤解を招いてしまって申し訳ありません。
iPhone版SafariでHTML5の全ての機能が使えるというわけではありません。
例えば、JSのバックグラウンド処理を行うWeb Workersは使えませんでした。
クロスブラウザ対応がいらなくて楽なので、iPhone版Safariで実装されている機能だけを
とりあえず使って作ってみるといいんじゃないかな？という提案でした。 - ふにゃふにゃ話してて面白かった
- いい年こいて舌ったらずでゴメンナサイ！
- 美女ホイホイも作ってください
- 今年中にソレに近い何かが出るかも？出ないかも...？こうご期待！
おまけのiPhoneテンプレート
今回制作したものを元に、
iPhone Webアプリテンプレート（CSS Nite Vol.40 reprise）
のエントリーにて、iPhone用HTMLの制作セットを公開しています。
↧
↧
ブログの投稿頻度を高くしそうな3つのアイデア
リニューアルしたお！
リニューアルの目的は？
今回のリニューアルにあたり、達成したいことは、ずばり「更新頻度の増加」でした。
多人数で運用するブログにありがちな問題ですが、普段の制作の中で記事の投稿を行うこと、さらに会社を通してのアプトプットは負担が多く難しいこともあります。
なので、今回のリニューアルのは、更新頻度の問題をクリアするために始めました。- 投稿に関し敷居を下げる
- 投稿することのモチベーションを上げる
この2つを軸に、アイデアを出し合った結果、これは有効かも！と思った3つをご紹介します。(こちらはこれから実践するものなので、効果の程はまだわかりません。)
1、役割を決める
以前のブログ運用は、完全に自由投稿形式でした。
誰が何を投稿しても良い=投稿しなくても良いということなので、盛り上がっていようといなくても、責任の所存があいまいでした。そこで今回、社内の組織編成会議にて、ブログチームを立ち上げ、運用をすることにしました。 メンバーは3人、アイデアとデザインとテクノロジーを駆使し、盛り上げていきたいと思います。
2、チームで書く
1人でテーマを決めて書くのはちょっと難しい！ということで、チームごとにテーマを決めて書いてもらおうというもの。
作業が分担できて、ブラッシュアップもチームごとでできるので、なかなかいいのではないでしょうか。
ちょうど、カヤックのデザイナーが所属する意匠部は、自社、受託、自由が丘支社、鎌倉本社、ME課など4-6人位の6つのユニットに分かれています。その中でアイデアを出し合い、記事を書けば、更新頻度が上がりそうな予感です。
3、フィードバックをする
やったことに対し、良いフィードバックがあれば、次へのモチベーションが高まりますよね。
そこで、安易ですが、チームごとで競争したいと思っています。
例えば「はてブ数」「PV数」「社内購読度」などなど、いろいろなテーマを決めてやっていこうと思います。 ちなみに第1回の賞品は寿司になりそうです。
以上更新頻度を高めそうな3つのアイデアでした。
他にも、こんなのあるよ！というものがあったら、タレコミお願いします。
↧
祝☆ブログリニューアル！をデザイナー目線から語る
りにゅーあるッ！
こんにちわ。最近、ガリガリ君のチョコチップ味が美味しいことに気付いた意匠部のせきねです
KAYACデザイナーブログのリニューアルです。
関わったみなさまも関わっていないみなさまもお疲れ様でした。
今回はデザイン面についての解説をしたいと思います。
お付き合いの程よろしくお願い申し上げます。それでは続きから早速始めます。
関わったみなさまも関わっていないみなさまもお疲れ様でした。
今回はデザイン面についての解説をしたいと思います。
お付き合いの程よろしくお願い申し上げます。それでは続きから早速始めます。
まずは今回のリニューアルにてデザインのコアとなる部分。
簡潔に2つ。
-
記事主体のブログへと生まれ変わる
→今までのブログは主にブックマークがメインでちょっと活気がなかった。 -
パッと見で普通のブログっぽくない。挑戦している。
→機能性も出来たらお願いします。
こんなところでしょうか。
これに並行してbarimi姉さんの立てた狙いもデザイン面から補完出来たらベスト。という前提でスタートしました。
結果から言うと
今回のブログのデザインテーマは『ふらっと気軽に寄れる立ち読み本屋』です。
-
まず背表紙（タイトル）で読むべきものを選択できる。
→興味のない読み物はスルーできる。 -
ちょっと面白そうだな、と思ったものは中身のチラ見ができる。
→アコーディオン実装。空けたり閉めたり。 -
チラ見をして詳しく知りたいなら各詳細でじっくりと、別にいいやとなれば本棚に戻す。
→読まないものはキチンと閉じてスルーしましょう。
基本的にこのシンプルな作りです。
今回のブログのような挙動により、ページ遷移による無駄なイライラを解消しています。
ちょっと面白そうと思いクリックしたら予想と違った事が書いてあり、無駄な『戻る』をしてしまった、というようなパターンを極力減らせれば良いなと思っています。
Autopager等と併せて使えばページ遷移なしに全ての記事の内容が分かりますし（その気になれば）、カテゴリーやタグで種類毎にソートして背表紙のみを並べることが出来ます。
1番大きな括りであるカテゴリーは並べた時の見映えと視認性を考え、大きめのアイコンを用意しました。
ちなみによくある3カラムやフルフラッシュ、可変グリッドのしゃれおつブログ等はうちがやらなくてもどこかのかっこいい人達がやってくれるよ、ということで始めから却下していました。
加えて、あくまで今後は読ませるコンテンツ＆有意義な記事内容で作っていくというコンセプトもありますので、騒がしいザワザワしたビジュアル重視のものより機能美の方に重点を置いています。
今後は定期的に記事を打っていきます。そのために。
定期的な更新を目指すために、こちら側に必要となるであろう要素は
- 背表紙（タイトル）とチラ見で簡潔に読者を誘うキャッチコピー力
- 定期的に更新するためのテンションを保つ何か
あたりが、必要となります。
更新させるための競争心を煽るためにタイトル部分へ露骨にブックマーク数表示をしました。背表紙を見ればその記事が人気かそうでないか一目で分かる、というイヤらしい仕組みです（背表紙だけ表示というところがまたこちらの破壊力を上げています）。
更に追って投稿ランキングなど実装予定です。あとはこちらにも書いてあるようにエサで釣る予定です。
キャッチコピー力（瞬発力）については上記の更新性とともにうまく底上げできれば、という算段です。
デザイナーにキャッチコピー力は必要不可欠と考えているためです。日々筋トレですね。
記事を書くことにより、読む方は満足＆書いた方もぱわーあっぷ！というミラクルスーパーポジティブスパイラルな仕組みを目指しています。
以上が今回の解説になります。
ブログチームは必要最低限の少数精鋭の人員で運営しているためまだまだ実現できていない箇所もありますが、随時アップデートをかけていく予定です。
ここどうなんよ？という点がありましたらタレコミまで。
面白いアイデアも大歓迎です。
それでは皆々様の良きブログライフを願いまして今回の解説を終了させていただきます。
↧
Google Font APIを使ってフォントをランダムに変更する方法
さあ、フォントの数をかぞえろ！
ささやかですが、KAYAC DESIGNER'S BLOGがリニューアルしました。
せっかくのリニューアルなので、どうせなら遊んでみようと思いまして、
表示するたびにフォントが変わる仕掛けを盛り込んでみました。
このページをリロードしてみてください。
ロゴやナビゲーションのフォントが変わってると思います。
ということで、今回はその解説をしたいと思います。続きからどうぞ！
Google Font API
今回はGoogle Font APIを使って外部フォントを読み込んでいます。
使い方
使いたいフォントを選びます。
詳細画面でいろいろチェックできて便利ですね。
使いたいフォントが見つかったら「Get the code」をクリックしましょう。
この画面に書いてあるCSSを設定すればフォントが適用されます。
簡単すぎてびっくりしますね。
フォントをランダムで変更する
要するにランダムでスタイルを一つ選ぶ、という処理ができれば良いので
phpをインクルードする形で実現してみました。
あ、ぼくはプログラマー的な素養はまったくないので、温かい目で見ていただけたらと思いますヾ(*´∀｀*)ﾉ
なんとなくphpファイルを作ってみました。
<?php
$flag = mt_rand(1, 10);
switch ($flag) {
case 1:
echo "
<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold'>
<style type='text/css'>
.googleFont{ font-family: 'Droid Sans', sans-serif; }
</style>";
break;
case 2:
echo "
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light' rel='stylesheet' type='text/css'>
<style type='text/css'>
.googleFont{ font-family: 'Josefin Sans Std Light', sans-serif; }
</style>";
break;
case 3:
echo "
<link href='http://fonts.googleapis.com/css?family=Molengo' rel='stylesheet' type='text/css'>
<style type='text/css'>
.googleFont{ font-family: 'Molengo', sans-serif; }
</style>";
break;
case 4:
echo "
<link href=' http://fonts.googleapis.com/css?family=Vollkorn:regular,bold' rel='stylesheet' type='text/css'>
<style type='text/css'>
.googleFont{ font-family: 'Vollkorn', sans-serif; }
#siteHeader h1 .googleFont{ font-weight: normal; }
</style>";
break;
case 5:
echo "
<link href=' http://fonts.googleapis.com/css?family=Old+Standard+TT:regular,bold' rel='stylesheet' type='text/css'>
<style type='text/css'>
.googleFont{ font-family: 'Old Standard TT', sans-serif; }
#siteHeader h1 .googleFont{ font-weight: normal; }
</style>";
break;
case 6:
echo "
<link href=' http://fonts.googleapis.com/css?family=Cantarell:regular,bold' rel='stylesheet' type='text/css'>
<style type='text/css'>
.googleFont{ font-family: 'Cantarell', sans-serif; }
</style>";
break;
case 7:
echo "
<link href='http://fonts.googleapis.com/css?family=Crimson+Text' rel='stylesheet' type='text/css'>
<style type='text/css'>
.googleFont{ font-family: 'Crimson Text', sans-serif; }
</style>";
break;
case 8:
echo "
<link href=' http://fonts.googleapis.com/css?family=Droid+Serif:regular,bold' rel='stylesheet' type='text/css'>
<style type='text/css'>
.googleFont{ font-family: 'Droid Serif', sans-serif; }
</style>";
break;
case 9:
echo "
<link href=' http://fonts.googleapis.com/css?family=Tangerine:regular,bold' rel='stylesheet' type='text/css'>
<style type='text/css'>
.googleFont{ font-family: 'Tangerine', sans-serif; }
</style>";
break;
case 10:
echo "
<link href=' http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'>
<style type='text/css'>
.googleFont{ font-family: 'Yanone Kaffeesatz', sans-serif; }
</style>";
break;
}
?>
ランダムで1から10からひとつ選んでそれを出力するっていう、ただそれだけのphpファイルです。
これをhtmlのヘッダ部分にインクルードしています。
ちなみにインクルードの書き方はこんな感じ。
<!-- [ font ] --> <?php include($_SERVER['DOCUMENT_ROOT'].'/stylesheet/font.php');?> <!-- /[ font ] -->
適用したい箇所にclassを付けて完成！
今回は「.googleFont」という名前にしたので適用したい箇所にclassを付けていきます。
ロゴやナビゲーション周りに適用してみました。
ということで、まとめです。
- Google Font APIで使いたいフォントを選ぶ
- ランダムで表示するためのphpファイルを作ってインクルードする
- 適用したい箇所にclassをつける
そんなに難しくないので、ぜひぜひ試してみてくださいね！
（どんな時に使えるのかわかんないけど！笑）
おしらせっ
カヤックではフォント萌えなデザイナー＆コーダー大募集中です！
タレコミ情報も募集中です.｡ﾟ+.(・∀・)ﾟ+.ﾟ
「イケメンですね」「好きです」「一人くらいなら養えるけど？」等なんでもどうぞ！
↧
KAYAC DESIGNER'S BLOG リニューアルしました！
新生KAYAC DESIGNER'S BLOG！
2008年の4月から運営を続けてきました、 KAYAC Designers Blogを2年ぶりにリニューアルしました。
アイデア、デザイン、テクノロジーの3つを切り口に、面白法人のデザイナーらしいブログのあり方を表現していければと思っています。
そして、日々のものづくりの中で生まれる、ちょっとしたテクニックや気になるニュースなどを紹介していきます。
今回のリニューアルについて、アイデア・デザイン・テクノロジーそれぞれを軸に解説しました。
是非ご覧ください。
↧
↧
～Web & Mobile Workers Event～ マルチデバイスに走ろう！ U29のためのアイデアマラソン
8月24日(火) 、株式会社パソナテック様企画によるセミナーを行います。
いやー、暑いですね。夏ですね。barimiです。
8月の後半に、セミナーをするので告知させてください。
セミナータイトルは「～Web & Mobile Workers Event～マルチデバイスに走ろう！U29のためのアイデアマラソン」です。
【開催】2010/08/24(火) 19:00～21:00
【申込締切】2010/8/19(木) 18:00
アイデア力をつけると、Web業界をさらに楽しく走れるはず！！
2009、2010年、iPhone、iPadと言った新デバイ スの登場など、 PCメインだった時代とは打って変わり、デバイスの幅がどんどーん広がる今日この頃。
また20代のエンジニア・クリエイターにとって、「デザインやプログラミングメイン」だった仕事から、「自らのアイデアや考えを持って制作物を考え、デザ インやプログラミングに落とし込んでいく」ということが求められ、これまでの考え方を活かしつつも、 ちょっと違った発想やアイデアを持って、よりクリエイティブしていくことが必要です！！
そんなマルチデバイス時代に生き、走る、 Web&Mobile ランナーに、マルチデバイスに対応したアイデアの出し方をお送りいたします。
前半はマルチにするための事例 紹介やアイデア発想法。
後半はランナー自ら考え、走る「アイデア発走（発想）ワークショップ」も行います。
アイデア力や企画力、 考える癖を20代のうちにつけておくと、これからのWeb業界を楽しく走り抜けられるはず！！！
是非、この機会に若い発想をフル回転して、マルチなアイデア力を身につけませんか。
これからのWeb業界を楽しく走りぬきたい皆様のご応募 お待ちしております。
※ランナーシューズ、ランナーウェアは不要です。Web業界を楽しく走りぬきたい気持ちだけは忘れずにお持ちくださ い。
※尚、応募者多数の場合、抽選とさせていただきます。 あらかじめご了承ください。
【申込締切】2010年8月19日 （木）18:00
↧
はてなスターをう●こに変えてみました
どうしてもって言われたので、はてなスターをう●こに変えてみました。
う●こ好きのみなさん、こんにちは。
このブログの「はてなスター」がう●こに変わっていることにお気づきになりましたか？
とっても簡単にCSSだけでう●こに変えることができたので、その方法を紹介したいと思います。
それではう●こに理解のある人だけ続きからどうぞーー
以下のCSSを設定するだけです。
.hatenaStar > span > a{
display: inline-block;
*display: inline;
*zoom: 1;
width: 20px;
height: 17px;
background: url(/img/ico/star_01.png) 0 0 no-repeat;
}
.hatenaStar > span > a > img{
opacity: 0;
}
画像のパスは環境に合わせて設定してくださいね(*´∀｀*)
このブログでははてなスターを aside class="hatenaStar" 以下に表示するようにしているので、CSSもそうなっています。
まあ、テクニックでもなんでもないですが、、、
こういうネタもできるんだね、っていうことで！
↧
お役立ち記事がそろった！？ 歴代人気記事ランキングTOP10
↧
BMKidsから第1弾サービス「安心レーダー」リリース！
弥勒菩薩大好きっ子、ねじです。
このたび、私が所属するブッコミキッズより、
サービス第１弾「安心レーダー」というiPhoneアプリをリリースしました！
夏休みまっただ中、旅行に行ったり、日常とはちょっと異なる場所に行きたくなったり。
そんなときに子どもの居場所をリアルタイムに教えてくれる、 レーダー型の位置確認アプリです。無料です！
安心かどうかは、人それぞれ！？「安心レーダー」
アプリの特徴
- 誰かとペアリングをすると、その人の現在位置が分かるようになります。
- 居場所の表示方法は「マップ」と「レーダー」の２種類があります。（自分を中心にして、どっちの方角にいるか分かるレーダー式はゲームっぽくて楽しいです。待ち合わせとかで遊べそう！）
- 居場所だけでなく、相手のバッテリー残量も表示されます。（電源が切れてたなんて嘘は通じません！）
- バックグラウンドで動いているので、アプリを立ち上げていなくても、相手の位置情報が更新されます。（アリバイ作り不可！）
こちら、子ども向けサービスとしてリリースしましたが、実は恋人同士、友人同士、またはおじいちゃん、おばあちゃんの居場所確認にも使えます。僕も友達と使ってみて、休日どこに遊びに行ってるのか見て楽しんだり、「○○くん、バッテリー残り20％だから気をつけてね」ってつぶやいたりしています。
ただ、周囲の反応を見ていると、恋人や奥さんのいる男性陣がガクガクと震えているようです。
安心かどうかには、個人差があるようですので、人によってはこのアプリを使うのは友人や家族にしておいた方がよいかもしれませんね。ダウンロードは無料ですので、興味のある方はお試しください！
BMKidsとは？
2007年、2008年、2009年とカヤックのラボ事業とし て年間77個、88個、99個とハードルを上げながらサービスをリリースしてきた 「BM11」（ブッコミイレブン）の後継として今年の1月「BMSilver」（ブッコミシルバー）が誕生しました。つくりたいものではなく、求められる ものを今年はつくろうと決め、シルバー＝老人向けのサービスをつくることを使命として発足したのですが、どうやらハードルが高かったのか、目標を達成せぬ まま解散。その志を受けて、次なる使命は子ども向け！と発足したチームがBMKidsです。12月までに6個のサービスリリースを目標に活動中です。
↧
↧
面白法人カヤックの漫画名刺
面白い名刺を訪ねて
いつも元気な barimi です。
名刺といえば、いわば会社の顔。
このコーナーは、世の中にある面白い名刺を紹介したいと思います。
第一回はいきなり手前味噌で恐縮ですが、面白法人カヤックの漫画名刺。
実はこの名刺、私がつくっているので、今日はデザイナー視点から、どうしてこの名刺をつくったか、ウラ話などなど紹介しちゃいます。
弊社代表の名刺
この名刺のポイント！
歴代のカヤック名刺は、7つ道具がある名刺、ピラミッド形に折れる名刺、トレーディングカード風名刺、など毎回工夫を入れています。
今回4代目になるこの漫画名刺は、最初に配ったときに会社の雰囲気を伝えられるもの、また配った人に喜んでもらえるもの、そして他の社員にも会いたい！と思ってもらえるもの、そして、そして、もちろんオリジナリティのあるもの！
これらを軸に、どんな名刺がいいのかを考えてつくりました。
漫画に込められた会社のメッセージ
なぜ漫画なのか？とよく聞かれるのですが、それは、KAYACスタイルの一つである「それって漫画っぽい？」を分かりやすく取り入れてるからです。
というのもありますが、実は自分が漫画が好きだったので、取り入れたいなあと思ったのもきっかけですね。
初めは漫画のページのように、ストーリーとコマがありその中で似顔絵を展開しようと思っていたのですが、1コマのほうが、分かりやすく、かつ、顔も覚えてもらえると思ったので、今のような1コマの構成にしています。
肩書きはみんな同じ
カヤックの社員の肩書は、代表取締役であっても、管理部であっても、全員に「Creator」と入ります。
「つくる人を増やす。」を経営理念とするカヤック。
事務も経営も、カヤックのあらゆる仕事はCreativeであれ。そんな意志のあらわれでもあるのです。
また、漫画風の柄以外の要素は同じにしてあります。
全部ばらばらだと名刺の管理がしにくいのと思ったのが1点。それから、ある程度固定要素があったほうが、トレーディングカードのようにメールアドレスや名前がステータスっぽく見えるので、集めて楽しめる要素を取り入れれると思ったからです。
このように、バランスをもって構成しています。
でも、みんな違う柄
一人ひとりの顔写真をもとに、オリジナルの漫画風イラスト付きの名刺になっています。
いくつか写真を用意してもらい、その人のベストショットを元に、1枚1枚のイラストを描きあげています。
テイストやタッチはインスピレーションに任せているので、どんな柄になるかは、できてからのお楽しみ！になっています。
そして全員違う柄なのでコレクター魂をくすぐること必至です！
弊社代表のコンチバージョン名刺。
古い社員によっては、いくつかバージョンがあります。
たまに、バージョンアップもしているんですよ！
インターネットの会社っぽい施策！
裏に書いてある、URLにアクセスすると、名刺にセリフを入れることができます。
インタラクティブな施策として、名刺専用サイトをつくっているのです。
名刺をハブとして、ユーザー参加型のコンテンツを展開。
インターネットの会社だからできることですよね！
また、セリフを入れてもらうことで、オリジナルのコマがつくれるので、「つくるひとを増やす」名刺となっています。
サービスとしての展開
実はこれ、漫画名刺制作サービスとしても展開しています。
実績もあるので、もしご興味ある方がいらっしゃいましたら、ご連絡くださいませ。
また、自分で作ってみたい！という方のために、ハウツー記事も掲載しています。どうぞ御覧ください。
最後に裏話？！
カヤックの社員は、現在100名程度。
この名刺、1つ1つ手書きなので、つくるのに時間がかかります。
なので、社員の人でも漫画名刺ではない人もいるのです。いつもお待たせしてすみません！><
出来上がった名刺を受け取って、うれしそうにしている社員を見ると、ほんとつくってよかったなあ。と思いますね！
面白法人カヤックでは、面白くって、つくるひとを増やすツールを企画&デザインできるデザイナーを募集しています！
おもしろ名刺募集！
面白い名刺を知っている！もしくは、作っている！という方いらっしゃいましたら、タレコミお願いします。
↧
明日のクリエイティブに繋げる!! 寝る前に眺めるiPadアプリ3選
家に帰ったら基本ベットから動かない。新卒のおかずです。
なぜって.....iPadがいつも枕元にあるから。
僕が帰宅してベットで寝ちゃう前に、寝ながら眺めるiPadアプリをご紹介。
ネタ集めには最適なアプリではないかと。
Stumble Upon
WEB : http://www.stumbleupon.com/
AppStore : http://bit.ly/9pbcPa
いまやFacebookの次にトラフィックを生み出すサービス。
ランダムに良い感じのサイトに飛んでくれます。
ブログのネタ探しに最適!
Pulse
WEB : http://www.alphonsolabs.com/
AppStore : http://bit.ly/au23gj
サムネイルで眺めるRSSリーダー。
シェア機能にRead It Later付いてくれないかな。
Google Reader アカウントでログイン
Read It Later
WEB : http://readitlaterlist.com/
AppStore : http://bit.ly/9kHSTu
あとで読むアプリ。Mac,iPad,iPhoneで同期して、通勤中に見てます。
これのおかげでソーシャルブックマークは使わなくなりました。
一日にストックした情報をおさらい！
おまけ
Instapaper
http://www.instapaper.com/
あとで読む系のサービスだったら
Instapaperもありますね。
Flipboard
http://www.flipboard.com/
雑誌形式に整形してくれるUI面白い。
ROUSE
http://www.rouseapp.com/
まだリリースされてないですが、21世紀のイメージブラウザー。
Feedly
MacではいつもFeedly使ってるから、iPad版がでないか待ちくたびれているよ。
FeedlyのiPhone版は開発が進んでいる模様。
http://blog.feedly.com/2010/02/23/feedly-mobile-prototype-a-quick-tour/
ちなみに寝る前にiPadを利用する人は、iPad所有者の７割だそうです。
→http://markezine.jp/article/detail/10712
他にも結構使ってますけど、最近寝る前はこれくらいかな。
肝心なのは、ソースですかね。そのうち見てるRSSなんかも載せてこうかと。
↧
音楽が与えるデザインへの影響とは(作業用BGMサイト紹介もあるよ！)
夏の炎天下でも自転車通勤のhashimotoです。
通勤中に音楽を聞いたりすることもあるのですが、
デザイン作業中にも音楽を聞いたりします。
ということで、突然ですが
作業用BGMにデザインは影響されるのか！？
を検証してみたいと思います。
作業中は無音だぜって方も遠慮せずに続きをどうぞ！
ではさっそく、
直近のお仕事でした JavaScript、HTML5、CSS共有コミュニティサイトの
jsdo.it
は…
レゲエ
でした！！
どうですか？レゲエっぽくないですか?
>jsdo.itを見てみる
つづいて jsdo.itのflash版
wonderfl
は…
エレクトロニカ
でした！
どうですか？電子音聞こえてきそうな感じですか？
>wonderflを見てみる
続いてIphoneアプリ、ケーキを均等に等分できる夢のようなガイドアプリ
cakecutter
は…
演歌
でした！
魂を揺さぶられるようなデザインになってませんか？
他の人はどうなんでしょう？調査しました。
gunji
「こえ部の作業してるときはたいていJpopのテンションが高い曲ばかりを200曲くらい聞いていますよ。最近NONA REEVES率が高い」
※なるほどこえ部はJpopでできているようですね。中高生に人気なのも理由があるかもしれません。
ねじ
「僕は本気のときは、BIGINを聴くことが多いです。精神集中。」
※安心レーダーはBIGINでできているのかもしれませんね。
ということで、
結論!!
「作業用BGMはたいしてデザインに影響しない。」
おそまつさまでした。
オマケ:おススメの作業用BGMサイト
曲を選ぶのではなく、サイト名のとおり曲のムードを選びます。
選んだムードの曲が流れるってわけですね。
ムードに対する選曲もあってる感じです。
grooveshark です！
名前がかっこいいです。
好きなアーティストを検索して聞くのもいいですが、
ジャンルごとのラジオがオススメです。
画面のど真ん中にある検索フォームが男らしいですね。いいから検索しろよ！ここから！みたいな。
↧
More Pages to Explore .....
