こんにちは！霙(@xxmiz0rexx)です！ 2015年ももう終わろうとしている時に、遅ればせながらやっとデザインツールにSketchを導入してみました。 まだインストールして1週間ほどなんですが、入れて良かったという感想しかないです…。爆速で仕事が終わっていくやんけ、、、。そんなわけで今年最後の記事は、今年最後に手に入れたデザインツール『Sketch』をご紹介させてもらおうと思います。もしアプリをデザインする人でまだ使っていない人がいたら参考にしてみてください。Webデザインにも使えますが、やはりアプリデザインにこそ真価を発揮すると思います。 目次 Sketchを使って感動したこと 取り急ぎ入れたSketchプラグイン 気になっているプラグイン（未使用） これだけは覚えておきたいSketchのショートカットキー さいごに Sketchを使って感動したこと まだ使っていない人からしたら、

寒い冬が終わり、ついに花で溢れる春がやってきました！ ワクテカしながら春に関するデザインや素材を集めたので、今日はそれをまとめてご紹介したいと思います。 春デザインの参考画像 バナー・メインビジュアルなどで、春っぽいあしらいのものを集めてみました。 コードアワード コードアワード ピンクのベタ塗り背景に桜の花びらを散らしています。今をときめくフラットな感じの仕上がり。 minne 【締切りました！】「minneマルシェ in 門司港グランマーケット2015春」出展作家さま大募集！ | ハンドメイドマーケットminneお知らせブログ イラスト内に桜の木と花びらを配置したデザイン。春カラーの「グリーン×ピンク」とマルシェ（フランス）カラー「ブルー×レッド×ホワイト」が絶妙にマッチしています。 脱毛なら脱毛サロンのエピレ｜epiler【公式】 脱毛なら脱毛サロンのエピレ｜epiler【公式】 切

ログイン画面のロゴ変更 まずはおなじみのカスタマイズから。 WordPressロゴをサイトのロゴに変更します。複数のメディアを運営している時などに判別しやすいです。 functions.php内 //ログイン画面のロゴ変更 function login_logo() { echo '<style type="text/css"> #login h1 a { background: url('.get_template_directory_uri().'/images/login_logo.png) no-repeat; width: 320px; height: 70px; background-size:100% auto; } </style>'; } add_action('login_head', 'login_logo');

Webサイトにドロップダウンメニューを作る際、親メニューの横に三角(▼)アイコンなどを表示して、 サブメニューがあることがひと目で分かると便利ですよね。 さらに、そのサブメニューを表示している時は、アイコンの向きを上向き(▲)に変えたほうが矛盾がないので、 今回はそれをCSS3のアニメーションと回転を使ってクルッとさせる方法を試してみましたφ(*’д’* )ﾒﾓﾒﾓ。 矢印の向きが切り替わるドロップダウンメニューの作り方 まずはデモ画面です。こんな感じになりました。地味だし今更だけど、このクルンとした動きがやりたかったんです。 今回は勉強がてらアイコンをSVGコードで表示してみましたが、ふつうの画像でもOKです。 記述法 html <ul class="dropdown"><li>DropDown <svg id="arrow" width="16" height="16" viewBox

こんにちは！！霙(@xxmiz0rexx)です！この記事はSublime Text Advent Calendar 2014 – Adventar 4日目の記事です。 何を書こうか迷ったんですが、技術系とかおすすめパッケージとかは皆書くだろうなーと思って、私はおもいきってSublime Textのアイコンを作ってみました！ もちろん.icnsファイルも作りましたので実際にお使いいただけます。 Macの方限定になってしまいますが、是非ダウンロードして使ってください(*´∨`*) 私とSublime Text 出会ってから丸2年が経ちました。 私は皆さんのようにそんなに沢山のパッケージを使ったりはしていないのですが、 おもにSublime Textのコードの見やすさ、編集のしやすさに惚れ込んで二年間ほんとうに毎日使ってきましたｗ 仲間内の勉強会でSou-Labさん、kojika17さんに教えて

前回のIllustrator備忘録を喜んでくれた方がいらっしゃったので第二弾を書いてみます。 今回は放射状ストライプ（別名サンバースト）の簡単な作り方と、作った放射状ストライプをPhotoshopのカスタムシェイプに登録する方法です。 またもやイラレ使いさんには当たり前の技かと思われます。 放射状ストライプはよく見ると三角形がまるく並んでるだけのものですので、めちゃめちゃ簡単に作ることができます。 それをカスタムシェイプに登録しておけば、使いたいときにすぐ使えるのでとても便利です♪ ①Illustratorを開き、長方形ツールを選択 ②アートボード上でクリックし、今から作る長方形の幅と高さを指定します ③ペンツールを選択します ④ペンツールで長方形の底辺の中心をクリックし、アンカーポイントを追加する ペンツールがパス上に来ると＋のマークが出るので、そのタイミングでクリックするとパス上にアン

こんにちは、霙(@xxmiz0rexx)です。 最近ちょっとやりたいことがあってJavaScriptを使って実現させようとしているんですが、 謎の呪文の羅列を前に1行目で断念しまして、 基礎を学ぶためにドットインストールで勉強してみました！ サンプルコードを拾ってきてカスタマイズすることは出来るんです。 組み立て方もふんわりなら分かります。 でも、自分で書くとなるとまず1行目に何が必要なのかが分からない。本当に基礎の基礎を学ばなければならない状態です。 そこで、教えてもらった無料の学習サイト 基礎を学ぶ状態の時って、本で学ぶよりも人に教えてもらった方が理解が早い気がします。 実際にコードを書いてもらいながら「この部分はこういう意味」「この場合はこう」とかを 手取り足取り教えていただくと飲み込みが非常に早いのです。それをバーチャルでやってくれるのが、『3分動画でマスターする初心者向けプログラ

javascriptを使用せずCSSのみで画像を3D回転させる事ができてしまう時代が既に到来していたようです。面白そうなので早速試してみました！ 3D CSS Tester CSS3を利用して画像を3D回転させることができるジェネレーター。 横の数値を変更すれば即座に反映されます。 反映された3D回転は、コードが書き出されているので コピーしてそのまま使用することも可能です！！ 作ってみた ただ単に書き出されたコードをまるまるコピーして、画像を差し替えただけですが ちゃんと動いたことに感動しましたー！！ヾ(*´∀｀*)ﾉｷｬｯｷｬ ※CSS3のZ軸を用いた3D回転を使用しているため 非対応ブラウザの方には表示されなかったり止まって見えたりすると思います。とりあえずChromeかiPhoneで見て頂ければ動くかと。 参考：CSS transforms の利用 – MDN （FireFoxの対

フリーランスでWEB製作をされている@sou_labさんから ドラッグ＆ドロップするだけでサイズ表記付きの良質なワイヤーフレームが作れてしまう 超便利なFW拡張機能の存在を教えて頂き、実際に使ってみたのでご紹介したいと思います。 FW持ってるけど使ったことない・・という方にも是非読んでいただきたい記事です！！ ワイヤーフレームとは デザインにとりかかる前にサイトの骨組みを視覚化し、 要素の漏れを防いだり、全体のイメージを掴むために用意するものですよね。 実はわたしは今まで作ったことがなかったのですが、 しっかり骨組みをしておけばデザイン時・コーディング時の作業がスムーズに進みますし、作っておいて損はないモノですね。 Placeholderとは そんなワイヤーフレームですが、自分用ならともかく クライアントさんにお見せする場合は、要素ごとにwidthやheightの数値なども記載してあった方

わたしにとってのブログ元年がもうすぐ終わろうとしています。 今年はこのブログを立ち上げ、良くも悪くも生活が一変した年でありました。 そんな激動の年の最後の記事は、感謝の記事で締めくくりたいと思います。 なお、単純にお世話になったサイト様だと数が多すぎるので、わたしが今年 頻繁に足を運ばせて頂いた事が選定の基準となっております。 商用可能な素材系 9search 何度お世話になったか分からないくらい頻繁にアクセスさせて頂いております！ 商用可能でクレジット表記不要なフリー素材を探す時に、わたしが必ず最初にのぞきにいくサイト様です。 パーツごとにわかれていたり、サムネイルを表示してくれていたりでとても探しやすいです！ PAKUTASO/ぱくたそ 商用可能な写真素材サイト様です！ 高画質でノイズ処理なども施されているため、他よりも目を引くクオリティの高い写真素材が沢山あります。 なにか写真が必要

こんにちは、霙(@xxmiz0rexx)です。御茶ノ水に何やらけしからん分厚さのホットケーキがあると聞いて、一眼片手に駆け付けて来ました！ おしゃれな廊下を通り抜け、店内へ。 15時というカフェがもっとも混みそうな時間に行ってしまったため1時間ほど待つことになってしまいましたが、その分お散歩してお腹を減らせたので逆に良かったかもw たくさん注文してみた メイプルホットミルクとメイプル抹茶ミルク ほどよい甘さであったまる〜♡けっこうサイズが大きいのも嬉しいポイントです！ 牛粗挽きハンバーグサンド つなぎを使わずに作られたハンバーグのサンドイッチ。シンプルな味付けで美味しかった〜！！ 鉄板フレンチトースト ハニー＆マスカルポーネ これはもう名前からして確実に美味しいwハニー＆マスカルポーネて！！上にのってるのは松の実をあげたもの。サクサクがアクセントになって美味しいです！ ついにメインがきまし

こんにちは、霙(@xxmiz0rexx)です。 Web系ブログのはずなのにウッカリ記事にしてしまう魅惑のスイーツ…ついに『パンケーキ』タグを作ってしまいましたw ブームに乗っかっていろんなお店に食べに行っているわけなんですが、今年のはじめに私の中でのNo1パンケーキが確定しましたので 満を持して本日はそれをご紹介したいと思います。 表参道に佇むおしゃれカフェ『NUMBER A（ナンバー・エー）』 表参道駅から歩いてすぐの路地にあるこちらのお店。外観はこんな感じでおしゃれオーラがとどまるところを知りません。 看板とバイクとライトの光があわさって目眩がするほどかっこええｗ 店内はこんな感じ。さすが表参道。背の高い机と暗めの照明でハイセンスな空間でございます。 No1パンケーキ お店の雰囲気をお伝えしたところで、いよいよパンケーキのご紹介！！わたしが思い出しては溜息を漏らしている罪深いパンケーキ

こんにちは、霙（@xxmiz0rexx）です。 先日お仕事でShift JISのhtmlファイルをもらったので、なんの気なしにST2たんで開いたところ、ビックリするくらいきれーーーーに文字化けしてくれましたｗ 知らなかった、UTF-8以外は対応していなかったんですか…！そりゃそうかｗ 調べたらUTF-8以外の文字コードにも対応可能になるプラグインを見つけましたのでご紹介します。 『ConvertToUTF8』はファイルを開くときに 文字コードをUTF-8に直して開き、保存時に元の文字コードに戻して保存してくれるプラグインです。 開くとき少し時差があるというか、文字化けしてる様が見えますが、次の瞬間なおりますｗ 『ConvertToUTF8』導入方法 1.SublimeText2を起動し、⌘+Shift+P！ Package Controlを使って簡単にインストールできます :) というわけ

固定ページの内容をサイドバーに表示しようとしたら、一部のAndroid端末やiPadの初期型などで ページ内で使用しているhtmlタグがそのまま表示されてしまうという問題があり悩んでいたんですが、やっと解決したので記事にします。 <?php $page_id = XXX; $page = get_page($page_id, 'OBJECT' , edit); $page_include = apply_filters( 'the_content',$page->post_content); echo $page_include; ?> 上記の書き方だと、前述したとおり一部の端末でhtmlタグがそのまま表示されてしまうのです。 海で 焼きそばと ラーメン片手に ビール飲みたい こうなるはずが、 <ul> <li>海で</li> <li>焼きそばと</li> <li>ラーメン片手に</li>

こんにちは。みぞれです。最近アプリのデザインをするようになって アイコンのサンプルが大量に欲しくなったので、思い切ってサイトにしてみました。 日本のサイトだからこそ国産アプリ多めです 海外のギャラリーサイトもクオリティが高く参考にはなるんですが、私たちが作るのは日本人向けのアプリ。やっぱり参考にするのも国産アプリのアイコンの方がしっくり来ると思うのです。 とくに上記のような日本独特のアイコンデザインをしたい時はやはり国産アプリから探さねばなりません。 （画像のアプリはこれから登録予定です・・・ごにょごにょ） 色別、タグ別、タイプ別、カテゴリ別。 アイコンを探す時に色(ベースカラー)から絞れたり、タグから絞れるように作りました。 色 時には「女の子向けだからピンク系でいきましょう！」などと、色から始まる製作もあると思います。そんな時は色で絞ればOKです。 タグ 例えばクライアントさんに「本の

こんにちは、霙(@xxmiz0rexx)です。スマートフォンサイトによくあるサムネイル＋記事タイトルの形をコーディングしていたところ、 うっかりミスではまってしまったので備忘録です。 症状 画像のとおり、リストタグの上部に謎の余白が出来てしまいました。 デベロッパーツールで細かく見てみても、paddingもmarginもおかしくないしfloatが悪さしているわけでもなし。 heightは90px程度のはずなのに何故か110pxもある。 いくつかスマートフォンサイトを作って来ましたが、こんなことは初めてでとっても戸惑いました。 初歩的すぎてｗ 原因・対処法 下の図はブラウザ幅いっぱいに伸びていたリストタグに余白を与えたもの。 リストスタイルの「・」が出てますね…。お前だったのか… というわけで該当のリストタグに以下の指定をしたら直りました。

こんにちは、霙(@xxmiz0rexx)です！ 最近ロクにブログも書かずに何をしていたかと言いますと、水面下でいろいろな事に首を突っ込んで活動をしておりました。その中の1つを本日発表させて頂きます :) ユニットを組んで、iPhoneアプリを共同開発しました！！ 自由大学でiOSアプリの作り方を学んでから半年ほどが経過したでしょうか。 作る作ると言って全然X-Codeを起動する時間もなく年を越してしまったとある冬の日、 友人のデベロッパーさんと打ち合わせ後にアプリの話になったのがキッカケになりました。 「一緒になにか作りたいよね」 「いいね！おもしろそう！！」 「……じゃあいつやるか？」 「「今でしょ！！！！！」」 という会話があったかなかったかは置いておいてｗ やるなら今！！ってことで、そこから約1ヶ月ほどでアプリが完成いたしました :) アプリ名はFeedDrop(フィードロップ) 雨

最近、会社でも個人でもアプリの制作に関わることが徐々に増えてきた霙(@xxmiz0rexx)です。 勉強のため、そしていざ制作！となった時の強い味方をメモしておきたいと思います。 まずはインプットから。アプリのデザインはWEBデザインとはまた違うものなので、時間のある時にギャラリーサイトを眺めることは引き出しを増やすのにとても大切なことだと思います。 Mobile Patterns 画面の種類ごとに分けられているのでとても見やすいです。 アプリデザインは全体を見たいというよりはフィード画面の参考画像が欲しい！などと具体的な要望が多いのでありがたいですね。 iOS Mobile Patterns Library こちらも画面の種類ごとに分けられております。アプリのギャラリーはこういうモノなのかな。WEBデザインだとパーツごとに分けられてるのが多いですよね！ こちらは拡大レンズがついているので

今や様々なデバイス向けに施さなければならないWEBデザインですが、スマートフォンが普及し始めてまだ数年。 自分の中で考えが確立されていなかったり、何から手を付ければ良いのやら分からない、というWEBデザイナーさんもいらっしゃると思います。 今回ご紹介する書籍はそんな方におすすめな、”デザインの考え方”がたっぷり詰まった読み応えのある一冊です！”作り方”ではなく、”考え方”！他の技術書とは違う切り口で非常に楽しく読めました！ 目次 案件の前提条件 作る前に8割が決まる デザイン前の下準備 理由を考えたデザイン モジュールの作り方 最適なソフトはどれ？ スマートフォンならではのデザイン タブレットならではのデザイン 大まかな内容 書籍の内容についてさらっとご紹介させて戴くと、前半の内容はデザインをする前に考えること。 まずは画面に向かわずに考えるところから！というのが石嶋さんのやり方だそうです

最近公式にリリースされたLINEで送るボタンについてちょっと仕事で調べる機会があったので今後のためにメモします。 公式の設置方法｜LINEで送るボタン にて記述例をコピペしたところ何やら変な動き？ 記事上でLINEで送るボタンを押すと当然アプリが立ち上がるんですが、 LINEでの共有が終わったあとブラウザに戻ると、そこにはLINEのサイトが開かれていました。 まぁ何も不思議なことではなくて、公式にも ボタンタップ後、LINEが起動する前にWebブラウザが表示されます。 とあるようにそういう仕様なので、LINEで送るボタンのaタグにtarget=”_blank”を指定してあげればとりあえずはOKです。 記述例 Webサイトの場合 <a href="http://line.naver.jp/R/msg/text/?LINE%E3%81%A7%E9%80%81%E3%82%8B%0D%0Ahtt