僕はデザイナーでもなければプログラマーでも無く、どっちかと言えばディレクションがメインで、後はコンサル系の仕事が多いわけです。WEBサイトを通して提案することがもちろん多いので、ここ最近良く見る技術やデザイン、その他試した方がいいんだろうなって物は一通り触っておく事を意識してきました。去年はレスポンシブが多デバイス時代において必要なスキルの一つになるかと思い、とりあえず自分に出来る最短でレスポンシブデザインを作ることを念頭にリニューアルしたけど。作ってみると色々欠点や改善点も見えてくる。以前ならtext-indentで文字消して背景画像表示という技術は当たり前だったかもしれないけど、違う方法があるなら試してみる。デザインも、なんか質感のあるデザインがいいのかなと思ったら、フラットやんみたいに言ってる人が居るなら実際に試してみる。自分のブログやサイトって奴は僕にとっては全部実験場みたいなモンなーわけです!っつーわけで、今年はレスポンシブデザインに加え、アイコンフォントにフラットデザイン、あとはPhotoshopもCCになったし、CodaからSublimeに乗り換えたし、色々書けることも多いかなぁってことで、一通り僕が今見て聞いて試してを繰り返してきたことを共有させて頂ければと思います!もちろん、もっとこんな良い方法があるよー!的な助言が頂ければ超ウレシイです!あと、変なバグとかあったら教えて頂ければ泣いて喜びます!というわけで、今日はこのブログ2歳の誕生日リニューアルに当たって試したりした色々な物を全部まとめてご紹介!前年同様、便利だったリソース系も合わせてご紹介させて頂ければと思います!今日はとりあえず大体の流れのみご紹介させて頂いて、細かい所は後日気が向いたら記事にさせて頂ければと思います(笑)それでは行ってみましょう!!ワイヤーフレームはどうあるべきなんかみたいな?僕自身のWEB制作ライフを振り返っても様々な方法を試して来ました。パワポに始まってグリッドベースを意識しエクセルへ、ブラウザ完結させるべくwireframe.ccや、CaccoなんかのWEBサービスを試したり。最近だとグリッドベースのHTMLコーディングの普及により実現してきたワイヤーフレームコーディングの考え方。日本に居た時のように(制作技術が乏しい場合は)ディレクターがワイヤーフレームを作るなんて非効率になってきているのかもしれないと思いました。3年前から話題には上がり続けて居ましたし、何度か記事にしようと思ったこともあったんですがね。Magazineもはやワイヤーの段階からブラウザ内で完結させて、デザインも含め全部一枚のHTMLで済ませるという手法を取っている人も居ます。Foundationの出現によりだいぶグリッドベースのレイアウトを作るのは簡単になりましたし、同様に提案の幅も広がりました。ワイヤーフレームなんて提案材料の一つにすぎないわけですが、こんな色々な手法や流れがあるということだけ知っておいても良いかもしれません。ぶっちゃけ個人的には手書きが一番多いですがね(笑)ワイヤーフレームのステップ自体は僕自身ものすごく悩んでいた物の一つですので、これらももっと楽な方法が無いか色々模索し、試して行ければと思っています!さて、フラットデザインってどうやって学ぼうかというわけで、色々見まくってみた。運の良い事に6月はえらい沢山のフラットデザインに関する記事やら何やらが多かったので、とにかく色々見てみた。Designmodoフラットデザイン一つとっても偉い色々な考え方があり、たとえばiOS7とか「フラットやー!!」って話題になったけど、アレフラットじゃ無いじゃんという話しもあったり、人によって偉い意見の違うモンやなフラットて。みたいななんか掴みどころの無い物を追いかけている気分になったす。どんな時代、どんなトレンドも意見の統一された物とかあんま見たこと無い気がしますし、こういうのがトレンドって奴なんすかねーってのが個人的な結論でしょうか。Depotなんかロングシャドウとかくるんじゃね?ってのとか出てきたし。Designmodoあとはお馴染みのDesignmodoさんからフラットデザインの原則なる記事が上がってたりと、色々参考にさせて頂きました。見て回って、個人的にはフラットデザイン関連の情報は探せば探すほど、これがフラットデザイン!ってのが見当たらず。「まぁ、いっか、実際作ってみればなんか見えるかもだし〜。」ってノリで作らせて頂く事にしました。Design』の記事に出てきた6原則が一番参考になったかな。基本はミニマルの考え方と同じようで、必要最低限の情報のやり取りを意識した設計に加えて、基本エフェクトの無いシンプルなタイポとカラー中心の設計。それで一応はフラットデザインと言えそうな気がしました。わけで出来たのが、今みてるブログのデザイン。これで一度自分で試してみたので、今度デザイナーの人たちと色々論議してこようと思います。久々にMeetUpでも出てくるかね。Spriteを使って表示していました。Spriteに関する情報もこれまでいくつも取り扱って来たのですが、最近はやはりアイコンフォント化の方を採用している人が周りにも多く。んじゃぁやってみるかなノリで試してみた感じです。Appに代表されるようなアイコンフォントのジェネレーターサイトも多く、使い勝手も非常に分かりやすいので、手もつけやすいですね。今回はIcoMoonを使わせて頂きましたので、軽く使い方もご紹介させて頂きましょう。IcoMoonを使ったアイコンフォント作成手順1.とりあえずアクセス使い方は非常に簡単。icons』から事前に作成しておいたアイコンのSVGファイルを読みこめばそれで終了。2.アイコンファイル(SVG)をインポートSVGファイルはイラストレーター書きだす事が可能なので、アイコン用のイラレデータを用意してSVGで書きだすだけでOK。それぞれのSVGファイルを用意して一つづつインポートしていきましょう。3.アイコンを編集/選択すると上記のような形で、インポートしたアイコンが表示されます。インポートしたアイコンは軽い編集も可能ですし。矢印関連のアイコンフォント等は一つ作っておけば、上、右、左、下とそれぞれ編集してコピーを繰り返して作っても良いかと。最後にすべてのアイコンフォントを選択して、ページ下にある『Font』ボタンを押せばダウンロードが可能になります。4.ファイルのダウンロードダウンロードしたファイルの中には、アイコンフォントが使用されたHTMLファイルもありますので、こちらを参考にしながら組み込めば問題無さそうですね。Compass自体はちょこちょこ使わせてもらってはいたんですが、そいやぁがっつり使ったことないなぁってことで、色々人に教わりながら、勉強しながら、情報集めながら色々試してみようかなと思います!今更ながらSublime使ってみたちなみに、にぃにさんも使ってたし、僕は自分が作る事は少ないけど、周りが使ってる物はとりあえず意見言えるよう使ってみることにしてるので、今回僕はCodaからSublimeに移行してみました。2ってエディタがすごくイイ。Blog使い方は上記のサイトを見ればとりあえずは十分じゃないすかね!あとは色々Tips関連の記事は沢山あるので、自分に必要そうなものをチョイスして導入してみるとよろしかと。株式会社LIGSass系のフレームワーク色々Sassによる開発を始めるにあたっていかに楽に開発を進めるかを考えた時、まぁ最初にフレームワークの存在が頭に浮かぶわけです。Sass対応のフレームワークも色々ありますね。framework.後はSassプロジェクトのスタートアップリソースも結構多いので、その辺覗かせて頂くのも良いかなと思います。System自体の仕様変更の経緯から、僕のレスポンシブデザインに対する考え方も少しづつモバイルファーストな方向へ移行しつつある感じです。今回のレスポンシブデザイン作成の流れについては、以前書かせて頂いた記事をご覧頂ければと思います。普通に書こう!みたいな仕様になったようですね。Systemを使う場合は考え方を逆にし、PC用のスタイルを作り、レスポンシブ化して各画面毎のサイズに合わせるという考え方から、最初に768px以下の画面を中心に作成し、それをPC用に合わせるといった考え方にシフトすると作りやすいかもしれません。Systemの仕様が変更となり、僕のレスポンシブデザインの作り方もちょっと変わりそうなので共有ご参考までにどうぞ〜。人気記事の一覧ページを作りたい!今回やりたかった事の一つに人気記事一覧を作りたいと思っていました。これまでもサイドバーに人気記事の一覧は表示していたんですが、サイドバーには最近の人気記事紹介を、一覧にはこれまですべての記事からの人気記事紹介をとった感じで使い分けたいと思っていました。Pluginプラグイン無しで閲覧数から人気記事を表示する方法が紹介されてあります。今まで見てきた中で最もシンプルかつ使い勝手良さそう。これを使って人気記事一覧を作成。PV数を取得して全体の人気記事を作るに至りました。期間限定の人気記事をこちらでは表示しています。このページ自体まだ作った間もないので、あまりサイドバーとの差異が無いですが、数ヶ月もすれば立派な人気一覧のページになっていると思いますので、とりあえず放置w!以上、まずはブログのリニューアルに当たって特筆すべき所をダダーっとまとめてご紹介させて頂きました!今回のリニューアルはこのブログ程度の物なので、シンプル且つ効率優先で作らせて貰っていますが、当然チーム間での開発や連携、規模によっては全く異なるアプローチになってくるでしょう。作っててちょっと感じたのは、フラットデザインにするしない以前の問題として、情報をいかに簡略化し、伝える必要のある情報だけを抽出し、コンテンツの情報整理が出来る事は今後は恐らくデザイナーにしろ開発人にしろ考える必要のある必須条件になり。その為にはライティング力はデザイナーには必要不可欠な物になっていくんだろうなとちょっと感じました。それから、開発効率に関しては言うまでも無くチーム内で上手く連携を取るための手段、効率アップについてはめまぐるしい勢いで変化しているので、都度『今使っている技術や制作工程が果たして正解かどうか』みたいな話し合いが今後は今まで以上に密にしていく必要があるなーとか思いながら作業してましたね。