機能美こそが最優先？ / Maka-Veli .com
デザインってなんですか？ この質問と答えって、いたるところで議論されていますよね。 デザインは設計。こんな悲しい翻訳は無いと思います。 「良いデザインですね」この真意は「見た目が美しい」と、美しさを讃えていたり、専門的に見て「導線がしっかりしていて素晴らしいですね」と評価していたり（設計）多くの意味を含んでいると思います。（発言した側は特に意図していなくても） 設計はもちろん重要なデザインファクター。 シンプルでわかりやすい機能美は非常にハイレベルでハイクオリティなデザインだと思います。 特にWebサイトの場合、目的やターゲットがある程度絞られ、その中でいかにコンバージョンに到達できるかが重要になってきます。 設計が疎かでUI/UX面でストレスを与えてしまえば本末転倒。 限られたユーザーの時間の中でいかに効果的なシグニファイアから導線を、シンプルでキャッチーな見出しから適切
書いた記事をバカにされる / Maka-Veli .com
僕も書いた記事をよくバカにされる事があります。特にはてなブックマークとTwitterですかね。見かけた時はやっぱり気分が悪くなるものです。 中でも、記事の内容が上手く伝わらず、的はずれなコメントの時などでしょうか。 「それ、わかって書いてるよ～ ちゃんと書いてあるよ～」 なんてグチりたくなっちゃいますが、でもコメント貰える事って嬉しい事です。 言ってもらわないとわからない事も多いし、自分が間違っていたって気付かされる事も多いです。 ブログ・Webメディアは誰の為のモノか 結局ここだと思うんですが、サイトの目的はなんなのか、それが明確になってないと何でもかんでも腹が立ってしまうと思います。 「無償でユーザーに提供してるんだからいいだろ！」 って発信者が思う気持ちはわかります。 ただ、もしそのサイトが、広告収入を得るためにPVを稼ぐ事を目的としたサイトなら、ユーザーはお客様になる
ネーミングについて / Maka-Veli .com
アプリの名前とか、たまに逸品なモノを見かけます。（社名なんかも） 基本的にやはり覚えやすいモノは良いなと思います。 気になったのでちょっと調べてみたので書いていきます。 とにかく覚えやすく 単語と単語の組み合わせによる造語が基本的に多いと思うのですが この場合、使われる単語の意味がわかりやすいモノが良いかと思います。 また、使われる単語は２つがやはりわかりやすいかな、と。 6文字〜8文字くらいで メディアに出てくる際、ワードが長すぎると覚えにくいと思います。 というのも、長いと読まないから。 英語得意な人は覚えられるかもしれないですが、僕のように英語が致命的すぎる人間にとって10文字以上の英字は「めんどくせ」と、スルー対象になってしまいます（笑） 逆に、短すぎると見逃してしまう事も。 造語の場合、どうしても文字数は長くなりますが、なるべく皆が知っているワードを使って、短
他とは違う？ ”動き”や”レイアウト”にこだわる素敵サイトたち。 / Maka-Veli .com
ページ遷移やマウスオン、スクロール、パララックス、ちょっとした動作にこだわりを持たせると、サイトとしてのクオリティを高めてくれます。また、どんどんCSS等も表現の幅も拡がって斬新なレイアウトが目立ちます。そんな動きやレイアウトにこだわったサイトをいくつかご紹介。もちろんノンフラッシュ。 Find & Form | The Digital World Craves Old School Craft http://www.findandform.com/ 左上のロゴ、ページをスクロールすると変形します。 TAKESHI WATAMURA | 綿村 健 http://takeshiwatamura.jp/ ※音注意 斬新なレイアウト。マウスオンで全画面、透過でコンテンツが表示されます。 ALCHIMIE http://www.alchimie-swc.ch なんだか不思議なサイト・・
皆ユニークでポテンシャル高すぎ！Goodpatchさんに急遽遊びに行ってきた。 / Maka-Veli .com
急遽遊びに行く事が決定したので行ってきました。 本当に急だったので、カメラを忘れてきてしまって激しく後悔・・・ コトの発端は彼 ドリブルが上手いノブさん。みんな大丈夫。怖い人じゃないよ。 この怖い人はUIデザイナーの貫井 伸隆 氏 @ntwojp 先日、memopatchの記事で話題になっていた、日本人初のDribbbler。 簡単に言うと、彼のデザインに惚れ込んで僕がTwitterで絡んだコトがきっかけ。 フォローしてそんなに経ってないんですが、彼とは同い年で、Beats by dr.Dreを買ったとか両手ブラブラしてロンッ！とかうんちゃらかんちゃら会話しつつ、一気に仲良くさせてもらって、ふとした流れで急遽その日に行くコトに。（自分でも良くわからない流れなので割愛） Goodpatchさん、い〜い会社です 僕が急遽、会社に訪問させてもらうコトになって、忙しいのに悪いなーなん
社会を知らない事はデザイナーにとって致命的かもしれないがクリエイターにとっては好都合なことも。 / Maka-Veli .com
（久々に答えのない駄文です。図解もありません。ついでに見出しもありません。） デザインっていうのはモノと人なんかを、より良い形で繋げる為にあるものなんだと思うんです。 商業デザインの場合なんかだと、色んな目的や理由が存在するわけですけど、それは様々。その目的に対していかに上手くデザインというモノでアプローチできるかが重要になってくるんですけど、それが何に向かっているかというと、やはり社会に対してなんですよね。 つまりデザインの対象はいつも社会なわけです。 ということは、 デザインをする事は社会を理解していないと出来ません。社会を知らないと、どこかに「違和感」が生じてしまいます。どんなに綺麗なデザインでも、表現出来ていなければデザインとは呼べないじゃないですか。それはある程度クライアントの仕事、と切り捨ててしまえば終わりなんですが、それって良いデザイナーなんでしょうか？ よくデザ
#Font 和文（日本語）フォントメーカー 一覧 / Maka-Veli .com
和文（日本語）有料フォントをざざーっと見比べたい時って皆さんどうしてますかね？ って友人に聞かれて、そういえば欧文みたいにまたいでサクサク見れたらいいのになぁーなんて思ってて。僕は本とか雑誌とかで探したり、フォントメーカーサイトを見まわったりしてるんですが、何か良いのご存知ないでしょうか？ そんなわけで、よく使っていたり、買いたいなーって狙ってるの合わせて、和文フォントメーカーサイトを挙げておきますね。 モリサワ http://www.morisawa.co.jp/ AXIS http://www.axisfont.com/ フォントワークス http://www.fontworks.co.jp アドビ http://www.adobe.com/jp/products/type.html 大日本スクリーン http://www.screen.co.jp/ga_product/
上手いFacebookページのやりかた / Maka-Veli .com
よく、Facebook（以下fb）ページの活用がわからないって聞かれるので、割りと簡単な運営方法書いてみます。 とは言っても、僕もそんなに上手いわけではないです・・・あくまでも簡単な一例という事で。。 まずいいねを集めるのはサイトで いいね！（以下LIKE）は、fbページ内で活動するとやはり目に止まりやすいので良いのですが、これはコンテンツ力が物をいいます。 また、fb内で投稿をミスると大きな痛手なので諸刃の剣と考えた方がいいです。(これについては後ほど) ですので、サイトの方で集める努力をすると安全。うちみたいにLIKEBOXを前面に出しておくとか。 そもそも「人間の顔」は非常に視線を集めるのですが、更にそれが自分の知り合いだとしたら間違い無く目に止まりますよね。それができるのがLIKEBOX。信頼できる人が居たらなんとなくLIKEもしたくなっちゃう？ もちろん、わかりやすい
フラットデザインについて @maka_velicom が思う6つのこと。 / Maka-Veli .com
フラットデザイン、流行が止まりませんね。国内サイトや記事でも、以前にも増して見かけるようになりましたし、TLでもよく議論しているのを見かけます。iOSもフラットデザインに～みたいな話もあったり、TwitterBootStrap3.0もフラットデザインですね。そんな僕もロゴ変更時にフラットチックにしていますし。個人的にもけっこう好きです。なんで好きなのかと言うと、「色」が好きなんです。色そのもの。というわけで、以下、個人的に注意している点です。 あ、始めに言っておきますが、このブログデザインがフラットデザインの正解だ、なんて本当に1mmも思ってません。むしろ前のデザインにむりやり組み込んだこのデザイン、これでフラットデザイン語るなんてヤバいです。勉強し直す自戒も含めて、書かせて下さい。そして読んでくれた皆さま、心より御礼申しあげます。 英語圏と同じにしない テキストで大胆なタイポグラフィ
安易なデザインに気をつけるべし / Maka-Veli .com
そもそもデザインってなんだろう？ そのデザインは、一体誰の為のデザイン？ ユーザーの為のデザイン？ 運営の為のデザイン？ このスタンスでも大きく変わってくる。 仮にユーザーの為のデザインであれば、 それはマイノリティの意見よりマジョリティの意見を多く取り入れるでしょう。 運営の為のデザインであれば、目的を果たす為に半ば強引にでもユーザーを導く事を優先するはずです。 先日、ランディングページについて書かれた面白い記事がありました。 ランディングページのほとんどは、運営がこうさせたい、という理由でページ構成を考えている事がほとんど。 しかし、ユーザーからするとストレスでしかなく、ユーザーの99％が離脱をするという結果だそう。 ユーザーはランディングページでも、しっかりと知りたい情報が見やすく書かれていれば離脱はしないかもしれないですね。 このケースは完全に運営の為のデザイン
約400種の欧文フォントが全部無料（商用可）でWebFontも使えちゃうFont Squirrelって素敵 / Maka-Veli .com
もう数年前にコリスさんやCREAMUさんで紹介されてましたが、恥ずかしながら知らなかったです。こんなに素敵なサイトがあったなんて。 最近DesignModoで紹介されていたので知りました。 すげー関係無いけどCREAMUさんのブログ超好きです 全部フリー 基本的には全て商用可。だそうです。 100% Free For Commercial Use. ただしフォントそれぞれにライセンスはあるので一応、要確認。 とても探しやすく、種類も豊富。400近くはあるんじゃないでしょうか？ 個人的には探しやすい点がとても気に入りました。 そしてもう一つ素敵なコンテンツがあったのですが Webfont kit がDLできる。そして作れる。 うちのサイト名やナビゲーション等に@font-faceでLeague Gothicを使ってますが、この@font-faceでwebfont使う時に必要な
Facebookの「いいね！」対象はサイト（ページ）とFacebookページ別ってのがわかりづらい / Maka-Veli .com
いいね！（※以下LIKEと呼びます）というかFacebookってわかりづらい点が多いですよね。 ページ、記事へのLIKEはそのままの意味でいいんですが、ドメインに紐付けたLIKEとFacebookページ（※以下Fbページ）を設置しているサイトでFbページへのLIKEが別物って、ユーザーからしたらとってもわかりづらいと思いませんか？ サイト（ドメイン）へのLIKE FbページへのLIKE これ、ユーザーからすると、すっごくわかりづらいと思います。 一般ユーザー層から考えると、そもそも「Fbページ」って概念が理解できない、あるいはサイトと別物だという事も理解できない、なんて事は大いにありえます。 サイト（ドメイン）へのLIKEって、実際にはページなんですよね。 （ドメインなんて書きましたが、わかりやすいようにあえてそうしています） 注意点として、例えば hogehoge.com
楽しめなきゃ良いモノなんて作れない！ / Maka-Veli .com
だって楽しい事考えるのに、自分が楽しくないと出てこないでしょう ブログでは何度か書いてるかもしれません。 モノを創るのって、その人自身の影響力がとても大きいとおもいます。 単なる情報整理や要件に対する設計なんかは左脳バリバリ動かして情報を構築していくだけで、わりとそれっぽいモノは作れるとおもいます。そういう視点では、請負業務ってのは楽しんでなくてもけっこう出来ちゃうとは思いますが。 自分のハードルを超える 人がびっくりするような事を考えだす こういう事っていうのは、作り手が楽しんでいて、普段活動してない脳ミソがフル活動してないと出てこないと思うんです。 人間レベルなんて、意外と同じようなモノですよ。 他人が頭いいとか悪いとか、すごい人だとかすごくないとか、 そんなのチャンスを掴んだか、やり方のコツをつかんだか、仲間に助けられているか、せいぜいその程度だと思うんです。結果論です。
【スウォッチ】 綺麗だなと思った写真からカラーパレット化してストックしておく
エイプリル・フールですね。でもこの記事はネタじゃないので普通に読んでいただければと思います（笑）あ、そういえば今日はヒゲを剃りましたよ。ちょっと剃り残しちゃったけど、すぐ戻ります。 さて、Dribbbleとかってそれぞれの作品にカラーパレットが登録されていますよね。 それから検索できたり、便利。 Dribbbleのカラーパレット。.acoファイル(Color Swatches)もダウンロード出来る なんかキレイなカラーパレットって、見てると嬉しくなりませんか？ なりませんかそうですか 好きな写真からカラーパレットを作る 普段、綺麗だなーと思った写真から、メインの色を抽出してカラーパレットとして並べておくんです。 並んだカラーパレットには名前なんてつけてあげちゃって。 根暗でしょう？ でもけっこうデザインする時に役に立つんです。 色の組み合わせ、感情というかストーリーが出
スマホサイトでは「お気に入り/ブックマーク」への促しは有効な手段かもしれない / Maka-Veli .com
なぜ有効かというと ターゲットが、より一般層に近いから はい出た冒頭で結論。僕の悪い癖。 デバイス標準の機能というのは非常に有効です。 シェアボタンはそもそもシェアする先に自分が登録している必要があります。 しかし、他人へ発信する事やSNS登録する事に抵抗を覚えるユーザーはまだまだ多いです。 Webに浸かってると当たり前に思っている事が通用しないような、普段パソコンを触らない層にもアプローチできるのが今のスマホサイトだと思うんですよね。 （ここでは仮に”一般層”と呼ぶ事にします） 僕のブログのようなのは全体から見るとニッチですし専門的で、見てくださってる方々はそもそものITリテラシーが高いのでコレに当てはまりませんが、一般層は違います。 偶然、何かのサイトから訪れたり検索で訪れたり。その時に、「このサイト好きだなー、また見たいなー」と思っても、どうしていいかわからない状態に
自分がロゴを作る時に意識してるポイント / Maka-Veli .com
こないだロゴを変えてサイトデザインも変えたわけですが、ロゴはもっともっともっと時間かけてやりたいところだったんですが、自分の性格上、それだといつまで経ってもやらないので一気に勢いでやりました。自分のブログですから、また気が向いたらマイナーチェンジを加えていく予定です。 自分のブログなんかでなく、お客さまのロゴ制作をする上で注意している点がいくつかありますので、今回はその辺りを書いてみようと思います。せっかくなのでMaka-Veli.comロゴと併せて とにかく最初は「作らない事」これにつきます まず、とにかく下調べ とにかく競合他社を調べまくります。 どんなロゴを使っているか そのロゴからどんな雰囲気を感じ取れるか どんな人が顧客、潜在顧客なのか（ターゲット） ここで仰天。教えてもらったんですが、なんと有名アニメ（？）のキャラと丸かぶりでしたよ。 良い悪例なので晒しておきます
実際、LINEはどのくらいWebに影響を与えるのか。調査結果をまとめてみた。 / Maka-Veli .com
LINE流行ってますねー。子会社化して「LINE株式会社」になんてなっちゃいましたね。 CMも頻繁に出してきて、より身近に感じさせるようなイメージ戦略に変えてきてますよね。 （くっそー、石原さとみが可愛すぎる） そんなLINEが気になったので、気になる調査結果から有用そうなのを抜粋してみました。 ※下記、灰色枠内の情報は全てリンク先から引用させて頂いた物です。詳しいデータはリンク先をご覧下さい。 Pontaリサーチ：スマートフォンアプリに関する調査 2012年8月24日 http://www.loyalty.co.jp/news/2012/20120824/ スマホの普及率、20代では約半数に よく使用するSNSアプリは男女ともに「Twitter」がもっとも多く、男性は続いて「Facebook」、「LINE」、女性は「LINE」、「Facebook」という結果でした。「SNS
IE6～ でもドロップシャドウ、角丸、透過とか書けちゃう『CSS3 PIE』がけっこう素敵でした。 / Maka-Veli .com
超今さらなヤツらしいですけど、でもこれ、楽チンだなー。 ※2013/2月現在、2.0betaも出ていました。 という事で、このサイトにも一部だけ実装してみました。 微妙に見え方が違う・・・ 使い方 DLした「PIE.htc」というデータをサーバにアップ behavior: url("/PIE.htc"); を、指定したいCSSに記述 ※htcファイルをアップした場所を指定して下さいね div { border-radius:3px; border-shadow:1px 1px 1px #CCC; behavior: url("/PIE.htc"); } ※色に関しては、#CCCCCC 等、16進数で指定して下さい。 black とか、カラーネームはダメらしい。 独自プレフィックスで透過もOK -pie-background: rgba(100,100,100,0.5); というよ
背景、全画面で動画を再生。BigVideo.js #jQuery / Maka-Veli .com
いつかきっと使うメモ 今回の記事は以下から How To Build a Fullscreen Background Video Player | Vandelay Design Blog About the Author:Jake Rocheleau @jakerocheleau. Jake’s Google+ profile. より詳しく、技術的に読みたい方は今すぐGOです（記事は一応チュートリアルで全文英語です） jQuery / jQuery UI / Video.js / imagesLoaded を用いて、bigvideo.js と以下の指定で動くそう。 <script type="text/javascript"> $(function() { var BV = new $.BigVideo(); BV.init(); BV.show('動画.mp4'); });
Webサイトで写真を使う時に気をつけたい基本の3つ / Maka-Veli .com
1 人物写真、並べる時は顔のサイズで合わせる 人物の写真が並んでいる時、かつ人物そのものを紹介する時なんかにやると良い感じ。 撮られた写真をそのままリサイズして載せるだけでなく、一工夫。 並べるなら人物の顔サイズを基準にして並べた方がキレイです。 どうしても顔サイズで合わせる事が難しい場合でも、例えば人物の足、腰、肩、顎、目、なんかのラインを揃えるだけでもキレイに見えます。 （元々の顔が大きい、小さいの差はあるので、そこは現実になるべく合わせる方向で・・・） 未調整 こっちは写真をそのままリサイズして調整 調整版 こっちは顔サイズで合わせてリサイズ。不足している部分が出るんですが、そこは伸ばしたり合成して誤魔化してます。 あ、ちなみに人物でも「シーン」として撮影されている写真だったり、メリハリや動きをつける為にあえて大きさバラバラにするのもカッコイイので表現したいコンセプト次
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
