●HOME
●カテゴリ  

●WEBサービス

●WEBデã‚イン

●WEBåˆä½œ

●ツール

●フォント／タイポグラフィ

●便利サイト

●情報収集

●留学

●考察

●英語
 

●留学相談
●その他  

●海外就職相談
 ●このブログについて
 ●お問い合わせ
  




バンクーバーのうぇぶ屋








Bootstrapだけじゃない！マッハでフラットや美しいデã‚インのUIが導入できそうなワイヤーフレームやUIキット等色々！


便利サイト
 










フラットデã‚インにしろ、レスポンシブにしろ、僕は周りで良く使われているなと思う物は一応手を付けてみるようにしてきました。それが自分の土俵なら尚更っすね。
その上で、なぜ今それが流行っているのか、なぜそのデã‚インを採用する人が増えているのか、そういった物を理解するには、自分の手で作るのがてっとり早いと思っているからです。まぁ、フラットについては正直やってみたけど良く分からなかったのが正直な所ですが（笑）作ってて思った事なんて、今のミニマル思考の強いデã‚インの流れに沿っていて、フレームワークに非常に当てはめやすいデã‚インだなーくらいでしょうか。
つってもやはりアレですね。フラットデã‚インってシンプルな分、細部へのこだわりが色濃くでるデã‚インだなぁと思いました。ただシンプルにしたらなんか素人臭いし、ゴテゴテに装飾しまくったらむしろフラットじゃなくなる。フラットな分シンプルなコードで書こうって言うならコーディングへの配慮も考えなきゃいけないし、見かけはシンプルだけど考える事は多いなぁオイって個人的には感じたわけです。
…みたいな話をこの前参加してきた勉強会で話したら「つっても、今やフラットにしろ何にしろ、見かけの良いデã‚インを導入するのなんかデã‚イナーじゃ無くてもフレームワークあたり使えば速攻で出来るしなぁ。Bootstrapはもちろんのこと色々。」みたいな話を聞いたわけです。
・・・ほほう？
というわけで、今日はそんなフラットデã‚インを採用する上で、簡単に実装できますよ的なフレームワークやUIキットなんかを色々ご紹介させて頂きましょう！

もちろん、これらを利用することを検討されても良いでしょうし、むしろこういったフレームワークやUIキットからフラットデã‚インを勉強しても良いでしょうし、とりあえず見ておくにèŠã—たことは無いかなと思います！
（どうでもいいけど、タイトルに『マッハ』と使いましたが別に作業速度が1200km／hになるわけではありません。感覚的には「早いよねー」くらいのノリです！）
 

ライブラリやUIキット、フレームワーク等を使う


 

Buttons – A CSS button library built with Sass and Compass


スクリーンショット 2013 08 06 3 45 11 AM
こちらのサイトも面白いっすよ。『ボタン』に特化していますが、様々なテイストのボタンを実装できるCSSライブラリです！Sass & Compass用のファイルもダウンロード出来るので、Sass使いの方はそちらから見ても良いかもですねー！
 

Atlassian User Interface


スクリーンショット 2013 08 06 4 08 24 AM
こちらはソフトウェア開発会社のAtlassianという会社のUIガイドラインを元にしたフロントエンドライブラリ！Atlassian自体非常に有名な会社なので、見てみて損は無いかもしれません！
 

Furatto


スクリーンショット 2013 08 06 3 44 38 AM
フラットなデã‚インを実装するためのフロントエンドフレームワーク！ボタン、イメージ、テーブル、見出し、グリッド、様々なフラットデã‚インのフレームワークが実装されているので非常に使いやすいですし、完成度が高いので応用も効きそう！個人的に使ってみたいフレームワークの一つです！
 

Flat UI Kit – HTML/PSD Design Framework


スクリーンショット 2013 08 06 3 47 42 AM
僕もずっと愛読させてもらっているdesignmodoさんからのUIキット！Pro版もあるけど、フリー版も相当なクオリティ。ここから学んだことも個人的に相当多いのでご紹介。
 

Topcoat


スクリーンショット 2013 08 06 4 22 28 AM
çºéº—で早いWEBアプリを作るためのCSSライブラリとして教えてもらったTopcoatというサイトも面白いっすねー。
 

Maxmertkit [追記：2013/08/06 15:55（バンクーバー時間）]


スクリーンショット 2013 08 06 3 53 15 PM
これ入れるの忘れてた！こちらもモジュールベースのCSSフレームワークの一つですね！非常に見やすくてシンプルです！
 

コードスニペットやコードを提供してるサイトを見てみる


 

CSSFlow Â· CSS Code Snippets & UI Kits for Web Developers


スクリーンショット 2013 08 06 3 30 40 AM
このサイト結構好きなんすが、様々なCSSで作られたボタンやらUIやらのコードスニペットを見ることが出来るサイトです！フラットな物から、細部にこだわったUIやボタンのコードを色々見て学んでしまいましょう！
 

HTML5, CSS3, JS Demos, Creations and Experiments | CSSDeck


スクリーンショット 2013 08 06 4 13 24 AM
CSSDeckあたりでFlatと検索しても、実際の沢山見る事ができますね！

Bootstrapを使う


 

Bootswatch: Flatly


スクリーンショット 2013 08 06 4 01 27 AM
『Bootstrapだけじゃない！』とか書きましたけれども…もちろんBootstrapも忘れちゃいけないですよね！
ちなみに、こちらのサイトはBootstrapベースの様々なテーマが紹介されているBootwatchというサイトで紹介されているフラットテーマ。
 

その他思いつき色々


 

Flat Drop down Menu using CSS | Dzyngiri


こういうチュートリアルとか見て実装するとかもアリっすかね。

25 Free Flat Style GUI Templates


フラットでまとめられたGUIテンプレートなんかも沢山出てますし、その辺見てみるとか。

25 Beautifully Designed Flat WordPress Themes | DesignWoop


まぁ当ç„だけどWordpressならもはやフラットテーマ大量にあるだろうしーみたいな。
 
以上、いかがでしたでしょうか？
最近はデã‚イン面におけるフレームワークも本当に色々見られるようになりましたね。今回ご紹介させて頂いた多くのCSSフレームワークの類もそうですが、僕の周りではデã‚インにそこまで明るく無いプログラマーが自分たちのサービスやアプリなんかを作るに当たって、とりあえずこれらのフレームワークの類でデã‚インし、まずはそれらしい形でリリース。その後収益化が可能になった時点でプロのデã‚イナーに頼むという人もちらほらいます。
よく、デã‚イン面におけるフレームワークを毛嫌いする人は多いように感じますが、これらを有効活用出来る場面がゼロかと言えばそう言い切れる事は無いと思うので、こういったフレームワークすらも提案材料に出来るよう、色々検討を重ねてみようかなと個人的には考える今日この頃っすね。
あ、あと念のためですがライセンス系はちゃんと確認するようお願いします！
それでは皆様、よきCSSフレームワークライフを〜。

関連する記事

iPhoneの壁紙を探す時に便利なモバイル用壁紙サイト色々！iPhoneの壁紙を探す時に便利なモバイル用壁紙サイト色々！
 使いこなせばもしや爆速！？ここ最近助けられたチートシート色々を厳選してご紹介！使いこなせばもしや爆速！？ここ最近助けられたチートシート色々を厳選してご紹介！
 海外旅行するなら知っておいて良さげなWEBサービスやアプリ達！旅行計画に使えそうな物から旅日記まで色々！海外旅行するなら知っておいて良さげなWEBサービスやアプリ達！旅行計画に使えそうな物から旅日記まで色々！
 僕が2012年に見てきた924件に及ぶWEB制作やデザインに関する投稿の全てを公開します！僕が2012年に見てきた924ä»ã«åŠãWEBåˆä½œã‚„デã‚インに関する投稿の全てを公開します！
 2012年北米でWEB制作者として生きてきた僕にとって絶対に無くては成らなかった英語圏サイト全部！2012年北米でWEBåˆä½œè€…として生きてきた僕にとってçµå¯¾ã«ç„¡ãã¦ã¯æˆã‚‰ãªã‹ã£ãŸè‹±èªžåœã‚µã‚¤ãƒˆå…¨éƒ¨ï¼
 クリエイターとして刺激されずにはいられないデザインエージェンシーのサイト色々！クリエイターとして刺激されずにはいられないデã‚インエージェンシーのサイト色々！
 来年こそは『服のセンス良いね』って言ってもらうために年末見る用のファッションサイト色々来年こそは『服のセンス良いね』って言ってもらうために年末見る用のファッションサイト色々
 『かっこいいサイトが見たい！』って時、知ってれば有意義な時間を過ごせそうなサイト色々全部紹介！『かっこいいサイトが見たい！』って時、知ってれば有意義な時間を過ごせそうなサイト色々全部紹介！
  









人気記事  ã‚ªã‚¹ã‚¹ãƒ¡è¨˜äº‹  


高卒でバカなのに最高に楽しい僕の生き方と守りぬいてきたこと 199.9kä»ã®ãƒ“ュー
 è‡ªåˆ†ã®ã‚„りたい事を仕事にしてる僕らに見られる10個の特徴 125.5kä»ã®ãƒ“ュー
 ä»Šæ›´èžã‘ない？！WEBデã‚イナーなら最低限知っておきたい有名フォントの数々 108.5kä»ã®ãƒ“ュー
 ç¾ä»£ã«ãŠã‘る留学が無意味だと思う5つの理由と、目標とすべき5つのこと 83.5kä»ã®ãƒ“ュー
 ã€Žæµ·å¤–に住めば英語は出来るように成る』は本当か？５年間カナダに居座った僕が体感したTOEICとかの意味 82kä»ã®ãƒ“ュー
 è‹±ä½œæ–‡ã«æ™‚間をかけるな！英語圏のWEBåˆä½œç¾å ´ã§ã‚ˆãä½¿ã‚ã‚Œã‚‹è‹±èªžè¡¨ç¾ãƒ†ãƒ³ãƒ—レート集！【メール編】 60.4kä»ã®ãƒ“ュー
 è…かっこいいタイポグラフィを駆使した映像の数々！息をのむ程魅入った映像総まとめ 48kä»ã®ãƒ“ュー
 ãƒãƒ¼ãƒ é–“のコミュニケーションを円滑にしたい時に試してみるべきツールやWEBサービス色々 46.2kä»ã®ãƒ“ュー
 èª°ã§ã‚‚簡単にかっこいいロゴが作れる『Squarespace Logo』 43.6kä»ã®ãƒ“ュー
 ã‚·ãƒ³ã‚°ãƒ«ãƒšãƒ¼ã‚¸ãªã‚µã‚¤ãƒˆã‚’デã‚インする上で、知っておいて損は無いかもしれないプラグインとか色々！ 43.5kä»ã®ãƒ“ュー
  
  • 日本の人材不足が深刻で世界ワースト2位なのは、それが日本の良い所だからという話2017.10.29
  • 『学び続ける』という事は『つらい』事なのか？僕が自由を手に入れるまでに見てきた学びのステージングの話2017.09.02
  • 英語学習者の強い味方、英文チェックツールの「grammarly」が超優秀でオススメ！2016.06.07
  • 2016年は情報収集力が鍵！IT業界の人がチェックするべき海外ブログやメディア25選！2016.03.17
  • 現代における留学が無意味だと思う5つの理由と、目標とすべき5つのこと2016.03.15
  • 今だからこそ安定を求めるべきなんじゃないかっていう考えについて2016.03.05
  • 海外就職に成功した日本人WEBデベロッパー達が使ってるオンライン学習サイトのまとめ2015.11.10
  • やりたいことを実現する為に、頭磨り減るくらい考える事の大切さについて2015.01.18
  • グローバル時代に備えて！IT業界の英語レジュメ（履歴書）とカバーレターの書き方！（テンプレート付き）2014.05.12


    •
    Pagetop




    ●クリエイター留学の『Frog』
    ●このブログについて
    ●お問い合わせ
    ●海外就職相談
     







    © 2015 Frog Creator Production Inc. All Rights Reserved.