すべてのアプリ製作者に捧ぐ！アイコンデザインのギャラリーサイト『iconDrop』をリリースしました。
こんにちは。みぞれです。最近アプリのデザインをするようになって アイコンのサンプルが大量に欲しくなったので、思い切ってサイトにしてみました。 日本のサイトだからこそ国産アプリ多めです 海外のギャラリーサイトもクオリティが高く参考にはなるんですが、私たちが作るのは日本人向けのアプリ。やっぱり参考にするのも国産アプリのアイコンの方がしっくり来ると思うのです。 とくに上記のような日本独特のアイコンデザインをしたい時はやはり国産アプリから探さねばなりません。 （画像のアプリはこれから登録予定です・・・ごにょごにょ） 色別、タグ別、タイプ別、カテゴリ別。 アイコンを探す時に色(ベースカラー)から絞れたり、タグから絞れるように作りました。 色 時には「女の子向けだからピンク系でいきましょう！」などと、色から始まる製作もあると思います。そんな時は色で絞ればOKです。 タグ 例えばクライアントさんに「本の
アプリデザインの参考になるギャラリーサイト＋クオリティを格上げできるセンスのいい素材配布サイトの紹介
最近、会社でも個人でもアプリの制作に関わることが徐々に増えてきた霙(@xxmiz0rexx)です。 勉強のため、そしていざ制作！となった時の強い味方をメモしておきたいと思います。 まずはインプットから。アプリのデザインはWEBデザインとはまた違うものなので、時間のある時にギャラリーサイトを眺めることは引き出しを増やすのにとても大切なことだと思います。 Mobile Patterns 画面の種類ごとに分けられているのでとても見やすいです。 アプリデザインは全体を見たいというよりはフィード画面の参考画像が欲しい！などと具体的な要望が多いのでありがたいですね。 iOS Mobile Patterns Library こちらも画面の種類ごとに分けられております。アプリのギャラリーはこういうモノなのかな。WEBデザインだとパーツごとに分けられてるのが多いですよね！ こちらは拡大レンズがついているので
[商用利用OK]デザインに行き詰まった時に刺激をもらえるUIエレメント検索サイト『UICloud』
あけましてめでとうございます。年末年始 魔の9連休により完全にダメ人間化した霙(@xxmiz0rexx)です。2013年一記事目は最近出会った素敵なサイト『UICloud 』のご紹介をしたいと思います ;) 『UICloud 』は、ボタンやフォームなどの細かいパーツからダッシュボードのデザインまで幅広いUIデザインを検索でき、ありがたい事にすべてpsdデータがダウンロードできる素晴らしいサイトでございます。 サイトで使われている言語は英語ですが、検索する単語は慣れ親しんだWEB用語（buttonとかsearch formとか）ですし、 ライセンス表記もぱっと見て分かるところ（サイドバー最上部）にあるので特に困ることはないですね :) クオリティの高いデザインばかりなので見ているだけで刺激になりますよ！ もちろん、商用利用可能なので素材をそのまま使ってもOK! いくつか見たところライセンスは
![[商用利用OK]デザインに行き詰まった時に刺激をもらえるUIエレメント検索サイト『UICloud』](https://cdn-ak-scissors.b.st-hatena.com/image/square/993bc9cefa19f98c78d4c063c1a5117651643204/height=288;version=1;width=512/http%3A%2F%2Fwebimemo.com%2Fwp-content%2Fuploads%2FUICloud.png)
メインマシンをWindowsからMacにした時に教えてもらった「Macではこれできないの？」→「できるよ」Tips
2011年7月にMacBook Airを購入して約1年半。 職場でもメインPCをWindowsからMacにして頂けたこともあって 段々と扱いに慣れてきた霙(@xxmiz0rexx)です。 今回はそんな私の「Windowsでできたアレ、Macではできないの？？」 という購入当初の疑問とその答えをまとめます。 まだMacに慣れていない人、もしくはこれから購入を考えている人はチェックしてみてください！ 1.保存しますか？「はい」「いいえ」をキーボードで WindowsではYとNでできたアレ。Macではどちらのキーを押してもうんともすんとも言いません。 おまけにタブキーを押しても無反応。 解決法 Macにもショートカットキーがありました！ 保存しない→⌘D キャンセル→esc 保存する→return これずっと悩んでいたので解決した時のスッキリ感がやばかったｗ 例えるなら「スゲーッ 爽やかな気分だ
恋する速度を爆速化。Sublime TextでZen-Codingを使用する際の設定メモ
先日「恋に落ちるエディタ」Sublime Textの勉強会に参加してきた霙(@xxmiz0rexx)です。 エディタの便利さ、優雅さ、魅力などを語るのは別の機会にするとして、 今回はそのSublime Textで、爆速コーディング用プラグイン「Zen-Coding」先生を使えるようにする設定方法を学んできましたので、備忘録もかねて記事にしたいとおもいます。これから使ってみようと思っている方は是非！ Sublime TextにZen-Codingプラグインを入れる手順 他のアプリみたいに設定画面で操作できないので変な感じですが、やってしまえば意外とあっさり終わります。 1.Sublime Textをダウンロードする まずはSublime Textがなくては始まりませんね。 公式サイトに行ってダウンロード、そしてパソコンにインストールしましょう！ 参考：Sublime Text: The te
スマホサイトにおすすめ。jQueryプラグイン『PageSlide』を使ってFacebook風メニューを再現してみました
こちらもおすすめです！(2013.08.27)→『ヌルヌルの秘訣はCSS！Googleスマホ版で採用されている使い心地のよいスライドメニューを再現した『jSlideMenu』 』 こんにちは、霙（@xxmiz0rexx）です。 スマートフォンサイトでのメニューの表示方法をあれこれ考えた結果、素敵なjQueryプラグインに辿り着きましたのでご紹介したいと思います。 コンテンツ量が多くてもメニュー分のスペースを考えずに構成できるのでかなり気に入っています :) FacebookやPathなどで使われているあのメニュー表示の動きをjQueryで簡単に再現できるプラグインです。 普段はCSSで非表示にしておいて、ボタンを押した時に┃＼( °Д°)三ｶﾞﾗｯと引き戸を開けたようにメニューが出現しますｗ ＊追記＊ ライセンスはMITなので商用サイトでも使用OKです！ 参考：PageSlide: a j
良質なワイヤーフレームを超簡単に製作できるFireworks拡張機能『Placeholder』がめちゃめちゃ便利!!
フリーランスでWEB製作をされている@sou_labさんから ドラッグ＆ドロップするだけでサイズ表記付きの良質なワイヤーフレームが作れてしまう 超便利なFW拡張機能の存在を教えて頂き、実際に使ってみたのでご紹介したいと思います。 FW持ってるけど使ったことない・・という方にも是非読んでいただきたい記事です！！ ワイヤーフレームとは デザインにとりかかる前にサイトの骨組みを視覚化し、 要素の漏れを防いだり、全体のイメージを掴むために用意するものですよね。 実はわたしは今まで作ったことがなかったのですが、 しっかり骨組みをしておけばデザイン時・コーディング時の作業がスムーズに進みますし、作っておいて損はないモノですね。 Placeholderとは そんなワイヤーフレームですが、自分用ならともかく クライアントさんにお見せする場合は、要素ごとにwidthやheightの数値なども記載してあった方
せっかく購入したCodaをちゃんと使うために準備したものと覚えておきたいショートカットキー21個のメモ
去年MacBookAIRを購入してから、念願だったMac専用のwebオーサリングツール『Coda』をインストールしたんですが、 DWとの違いにかなり戸惑ってしまいあまり使いこなせていなかった霙（@xxmiz0rexx）です。 使い方さえ覚えてしまえばさらに快適なコーディングライフを送れると思うので、機会を作ってちゃんと覚えてみようと思い記事にしました。 プラグインを入れて快適に使う まずはCodaの環境を整えます。DWではpタグやhタグなどはショートカットキーで挿入していたので、 まったく同じキーではないにしても同じような事ができないかと思い探したところ、Zen-CodingのCoda版プラグインである『TEA for Coda | One Crayon 』を入れれば良いという結論に達しました。 このプラグインを入れておけば、例えばpタグやhタグ、strongタグなどを素早く挿入することが
パンケーキ激戦区の原宿でひときわ輝く新星『レインボーパンケーキ』に行って来た！
こんにちは、最近あまいものを大量摂取中の霙(@xxmiz0rexx)です！！ 先日美味しくてオシャレで有名な、原宿でウワサの『RAINBOW PANCAKE 』さんに行って参りました！ まずお店の中がかわいい～！！ 柔らかい色あいの壁と、窓に貼られた虹がすごく素敵な空間を創り出してます。 お店の内装は人気番組『ビフォアアフター』に出演された建築家「池田佳人さん」によるものだそうですよ～！ ちなみに、日本では7色だけどハワイでは虹の色は6色と考えられているんだそう。国によって色や色数が違うの面白いですね！ 細部にまでこだわった可愛らしいパンケーキ！ もう笑っちゃうくらい美味しいですｗｗ写真で充分伝わりますよね！？ 私のおすすめは断然マカデミアナッツソースのパンケーキですね！！！！もう美味しすぎてこのソースの中で溺れたいｗｗｗｗひたすら甘くてミルキーな感じが最高すぎるｗｗｗｗｗ あとここはお食
デザインの参考に。素敵なデザインのiPhoneアプリ紹介サイト5選
最近資料としてiPhoneアプリ紹介ページのデザインを集めているので、 その一部を記事にまとめたいと思います。 参考にしたいアプリ紹介ページ 画像をクリックでサイト全体のキャプチャを表示します 1:girls pic サイバーエージェントさんによる女の子のための写真共有アプリ「girls pic」のページです。 レースや配色など女の子が好むガーリーなデザイン。fontの選び方とかも勉強になります。 2:instagr.am みんな大好き「Instagram」のページ。iPhoneの画面がJavaScriptによって切り替わります。 少ないスペースで複数のスクリーンショットを見せることができる上にアプリの雰囲気が伝わってかなりイイですね！ 3:UNIQLO CALENDAR iPhone ユニクロカレンダーのページ。余白たっぷりで大きめのスクリーンショットを配置。 ちょっと変わった配置の仕方
Illustrator備忘録:放射状ストライプの簡単な作り方とそれをPhotoshopのカスタムシェイプに登録する方法
前回のIllustrator備忘録を喜んでくれた方がいらっしゃったので第二弾を書いてみます。 今回は放射状ストライプ（別名サンバースト）の簡単な作り方と、作った放射状ストライプをPhotoshopのカスタムシェイプに登録する方法です。 またもやイラレ使いさんには当たり前の技かと思われます。 放射状ストライプはよく見ると三角形がまるく並んでるだけのものですので、めちゃめちゃ簡単に作ることができます。 それをカスタムシェイプに登録しておけば、使いたいときにすぐ使えるのでとても便利です♪ ①Illustratorを開き、長方形ツールを選択 ②アートボード上でクリックし、今から作る長方形の幅と高さを指定します ③ペンツールを選択します ④ペンツールで長方形の底辺の中心をクリックし、アンカーポイントを追加する ペンツールがパス上に来ると＋のマークが出るので、そのタイミングでクリックするとパス上にアン
jQueryのページ内スクロールがうまく行かない時の意外な落とし穴
こんにちは、霙です。 つい先日、今まで何回やっても失敗していたことが解決したので、記念に記事にしたいと思います。 この記事は忘れん坊さん、うっかり屋さんなどにおすすめの記事ですｗ どうして君だけ動かないの！！ このブログを作っている時、様々なサイトを参考にしながら自分の理想のデザインへと近づけていった訳ですが、 どーーーーーーしても、ページ内スクロールのjQueryだけがうまく動きませんでした。 jQueryのページスクロールのアレ、いっつも実装してもちっともなめらかにならないんだけど何なのｳﾜｧｧｧｧｧｧヽ(`Д´)ﾉｧｧｧｧｧｧﾝ! 他のjQueryは動くのにいつもソレだけ動かないッッ！！！！less than a minute ago via Janetter Favorite Retweet Reply霙（ミゾレ） xxmiz0rexx ちなみに今回わたしが参考にさせて頂いたのはW
デザインから選ぶjQueryツールチップ5つ
ちょっとした解説や情報を表示したい時、あらかじめデザインに当てはめておくよりも 必要な時だけに表示させる方が より目を引く場合があります。 そんな時に利用できそうなツールチップの中から使ってみたいデザインのものをピックアップしてみました :)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
