2013年10月31日木曜日

JSONやHTML、CSSなど様々なコードの整形ツールをまとめた・「Code Beautify」

Code Beautify Code Beautifyは様々なコードの整形を行えるツールをまとめたWebサイトです。コードごとに整形ツールは分けられています。対応コードはHTML、CSS、JSON、XML、JavaScr [...]





参照元記事:かちびと.net http://kachibito.net

2013年10月30日水曜日

簡単にできるPhotoshopの手書き風の記事10選

a0002_005728

優しくナチュラルな雰囲気を出したい場合は手書き風のデザインは相性がいいです。 Photoshopで簡単にできる手書き風の記事を集めました。 写真加工 Photoshopできれいな水彩画風デザインに挑戦! | Webクリエ […]



参照元記事:FEVDES BLOG http://blog.idea-clippin.com

●●っぽい表現ができる「CSS3」サンプル集

こんにちわ!ザ・マーズナレッジという会社をやっている、デザイナーのイシジマミキです。 Webフォントの充実、スマートフォンの流行、そしてCSS3の表現力アップにより、画像を使わなくても凝った表現の見出しが作れるようになりました。 どんなデザインがあるのか。海外 [...]



参照元記事:Find Job ! Startup http://www.find-job.net/startup

JSON、CSS、RSSなどのコードを綺麗にしてくれる『Code Beautify』

よくあるツールですが、まとまっていて便利そうなのでご紹介。JSONやCSSなどなどを綺麗にしてくれるツールですね。 ↑ こんなことが出来ます。 ↑ たとえばCSSを・・・。 ↑ きれいにしたり・・・。 ↑ XMLをツリー表示させたりできます。 いろいろと便利なものが揃っているので覚えておいてもいいですね。 » Code Beautify



参照元記事:IDEA*IDEA http://www.ideaxidea.com

2013年10月28日月曜日

「ロングシャドウ」エフェクトをPhotoshopの3D機能で簡単に作る方法

フラットデザインとロングシャドウが定着しつつある今日このごろ。いつ廃れるかは誰にも分からないが、いわゆる「ロン [...]


The post 「ロングシャドウ」エフェクトをPhotoshopの3D機能で簡単に作る方法 appeared first on 株式会社LIG.






参照元記事:株式会社LIG http://liginc.co.jp

2013年10月26日土曜日

Illustratorで文字を芝生に変える方法

イラストレーターで文字を芝生に変える方法をご紹介します。



参照元記事:Web Design Library http://www.webdesignlibrary.jp/

2013年10月24日木曜日

Photoshopであっという間に芝生を型抜きしたような文字を作る方法

こんにちは。デザイナーの白浜です。 今回は芝生を型抜きしたような文字をあっという間に作る方法をご紹介します。 [...]


The post Photoshopであっという間に芝生を型抜きしたような文字を作る方法 appeared first on 株式会社LIG.






参照元記事:株式会社LIG http://liginc.co.jp

SNS色々ありすぎ!各ソーシャルボタンの特徴を簡潔にまとめてみた

お疲れ様です。ディレクターの鮫島です。 今年もあと2ヵ月で終わりですね。来月になれば後1ヵ月。1年経てばやはり [...]


The post SNS色々ありすぎ!各ソーシャルボタンの特徴を簡潔にまとめてみた appeared first on 株式会社LIG.






参照元記事:株式会社LIG http://liginc.co.jp

GitHubを使ってみよう!導入と簡単な流れ、よく使うコマンドなど。

GitHubを覚えよう覚えようと思ってなかなか手をつけてこなかったので、そろそろ本腰入れて使おうと色々やってみたのでまとめておきます。 1.GitHubとは? 2.GitHubを使えるようにする 3.Git及びGitHu […]



参照元記事:YATのBLOG » YATのBLOG http://wp.yat-net.com

アニメなキャラクターアイコンをさくさく作れる「アニメ風アバターメーカー」を使ってみました

髪型や輪郭・服・目鼻口など数百種類のアイテムを組み合わせてオリジナルのキャラアイコンを簡単に作成できるアプリが「アニメ風アバターメーカー」です。自分や好きなキャラクターに似せるなど、かなりのバリエーションでアイコンを作成できそうだったので、実際に使ってみました。 アニメ風アバターメーカー 〜すてきなプロフィールアイコンを! -…


続きを読む...






参照元記事:GIGAZINE http://gigazine.net/

2013年10月23日水曜日

Excelのテーブルを修飾ごとHTMLへ。数式も保持して表計算も可能なHTML/JavaScriptを生成する「Excel to HTML」。アドバンスソフトウェア

Webアプリケーションにおいて、ユーザーの入力に対して簡単な計算や変換をした結果...



参照元記事:Publickey http://www.publickey1.jp/

ガーリーデザインに使える!可愛い商用可フリー素材・素材サイトまとめ

かわいいガーリーデザインに使える!商用可フリー素材・素材サイトまとめ

可愛らしいものが大好きです、Kanaです。 私がガーリーなデザインをする際によく使う素材や、素材サイトをまとめました。 可愛らしいレース柄や、お花、パターン素材など、使い勝手のよいものばかりです。 ガーリーデザインのポイントをまとめた、ガー...

▼続きを読む



参照元記事:Kana-Lier カナリエ http://kana-lier.com

2013年10月21日月曜日

効率あがった!フリー素材と「すごい」Illustratorテクニック総まとめ

フリー素材は沢山あるけれど、どこに何があるか分かりにくい。ロゴやイラストを作るのにまたあのサイトを探さないといけない。そういったことで1回まとめました。今回厳選したつもりですが、それでも量が膨大になったので簡潔にリストア… read more →



参照元記事:コムテブログ http://commte.net/blog

ECサイトを作ったら設定したい。Google Analyticsコンバージョン設定 完全ガイド

Google Analyticsの必須機能の一つが「コンバージョン設定」。ですが、コンバージョンタグを単純に完了画面に設置して終わりになっていませんか? 実は他にも色々やるべき事があるのです。 今回は特にコンバージョン率の改善を求められるECサイトに特化して、 [...]



参照元記事:Find Job ! Startup http://www.find-job.net/startup

他人のコードを「破壊」しながらプログラミングを学ぶ方法:リバース・エンジニアリング



コードを学ぶベストな方法のひとつは、既存のコードを「リバース・エンジニアリング」することです。コードトーレニング企業の「Treehouse」が、コードの一部をわざと「破壊」しながら、コードを分析する... 続きを読む






参照元記事:ライフハッカー[日本版] http://www.lifehacker.jp/

2013年10月19日土曜日

知らないと損? Gmailアドレス1つで SNSアカウントをいくつでも取る方法 - ニュース TABROID

Gmailアカウント1つでオールOK SNS含めたオンラインサービスで、複数...






参照元記事:TABROID http://www.tabroid.jp/

MS Accessからの脱却に。SQLiteへの変換コマンド「MDB-SQLite」





参照元記事:MOONGIFT http://www.moongift.jp/

シンプルで軽量なCSSフレームワーク・「LAYERS CSS」

LAYERS CSS LAYERS CSSはシンプルで軽量なCSSフレームワークです。レスポンシブWebデザイン対応で無駄な装飾等もありません。かなり使いやすい印象でした。シンプルなものをお探しの方は一見の価値はあるかも [...]





参照元記事:かちびと.net http://kachibito.net

2013年10月18日金曜日

PSDファイルのバリデーションツール・「PSD VALIDATOR」

PSD VALIDATOR PSD VALIDATORはPSDファイルのバリデーションを行うWebアプリです。エラー等の基準は、Psを利用する際のエチケットをまとめたWebサイトのPhotoshopetiquette.c [...]





参照元記事:かちびと.net http://kachibito.net

コピペで使える!Google Analyticsのレポート作成を高速化するテクニック

いくつものアナリティクスレポートを見て、エクセルにまとめ直して、再計算して・・・時間もかかるし面倒ですよね。 今回は知りたいデータを手早くまとめるためのテクニックとして、絶対に覚えておいたほうがいい『正規表現』の使い方とチートシート(日本語版)を紹介いたします [...]



参照元記事:Find Job ! Startup http://www.find-job.net/startup

2013年10月17日木曜日

これからはスマホ対策ではなく、スマホ・ファーストになるという話

最近、「Webでの集客が最近とても厳しくなった」というお問い合わせとか、メルマガのご質問を結構いただくのだが、共通して言えることがございまして、それは「スマホ対応してない」というのが明らかな原因のケースがよくある。 PC […]

これからはスマホ対策ではなく、スマホ・ファーストになるという話 is a post from: More Access,More Fun!






参照元記事:More Access! More Fun! http://www.landerblue.co.jp/blog

アイコンフォントについての備忘録

アイコンフォントについての備忘録


デザインとの相性や使いたいものが同セットになっているかなど少しでも選択肢は多い方が良いので、ダウンロードできるサイトを見つけてはメモしていたのですが、結構な数になってきたのでそれらの整理も兼ねたアイコンフォントについての備忘録です。



参照元記事:NxWorld http://www.nxworld.net

2013年10月16日水曜日

CSS3コードがコピペできる200以上のアイコン集『CSS3 Icons』

これ、便利なのでは・・・。メモ的にエントリーしておきます。 ↑ 使い勝手が良さそうなアイコンがいろいろあります。 ↑ コードもコピペできます。ブラウザ互換情報もあって便利すね。 まだまだ増える予定らしいので期待したいところ・・・。興味がある方は以下からどうぞ。 » UIPlayGround | CSS 3 Icons | CSS 3 Icons Generator | CSS 3 Icons Code Generator



参照元記事:IDEA*IDEA http://www.ideaxidea.com

2013年10月15日火曜日

Android標準ナビの音声が初音ミクになる!天使の無料アプリ登場

3-Hatsune_Miku


Androidに標準搭載されているグーグルの高機能ナビゲーション「ナビ」アプリですが、その音声案内のボイスを初音ミクに変更する無料アプリが登場して話題を呼んでいます。






参照元記事:ガジェット速報 » HOMEで表示させる http://ggsoku.com


Webデザインのスキルを磨こう!Webサイト模写のススメ

thumb_art先日、Webデザイナーになってもうすぐ2年がたつというMさんから、「どうすればデザインのスキルを磨くことができるのか?」という旨のご相談を頂きました。今回は彼女の相談メールでもふれられている、デザインのスキルアップに有効 [...]



参照元記事:Webクリエイターボックス http://www.webcreatorbox.com

CSSだけで作る「多階層」なドロップダウンメニュー

以前書いた「CSSだけで作る動きのあるドロップダウンメニュー|Webpark」という記事が検索エンジン経由でそこそこアクセスがあり、よく質問をいただきます。そのなかで多階層にできないのかという質問があったので作ってみました。



参照元記事:Webpark http://weboook.blog22.fc2.com/

2013年10月14日月曜日

漢字が使える!全部無料!日本語フォント41個【2013年最新版】

今回は漢字が使える日本語フォントを41種お届けします。全て無料で使えるものばかりですので、気に入ったものがあればぜひとも使ってみてください。 1.花園明朝 DL先 Hanazono fonts 2.ミウラ Liner_jr DL先 MopStudio 3.うつ [...]



参照元記事:Find Job ! Startup http://www.find-job.net/startup

2013年10月11日金曜日

ロングシャドウを実現するPhotoshopプラグイン『Long Shadow Generator』

そのままですが、メモ的にエントリーしておきます。フラットデザインの次はロングシャドウ・・・と言われたり言われなかったりのデザインを実現するPhotoshopのプラグインです。 ↑ いろいろ設定できるようです。 対応しているのはCS6とCCのようですね。詳細は以下からどうぞ。 » Long Shadow Generator for Photoshop – A PS extension to create long shadow with one click!



参照元記事:IDEA*IDEA http://www.ideaxidea.com

CSSのテストを行うためのリソースをまとめている・csste.st

csstest00

CSSのテストを行うためのリソースを収集、公開しているWebサイトがあったのでメモ。どのようにテストを行うか、なぜ行うか、ツールの紹介などなど。 CSSのテストのためのリソースのまとめ。変更はさほど難しくないけどテストっ [...]





参照元記事:かちびと.net http://kachibito.net

2013年10月10日木曜日

バリエーション豊かなピクトグラム素材配布サイト「ヒューマンピクトグラム 2.0」

バリエーション豊かなピクトグラム素材配布サイト「ヒューマンピクトグラム 2.0」


デザイナーの方なら1度は見たことあるかと思う素材サイトを他にもいろいろと運営している方のサイトなので有名なのかもしれないんですが、知らなかったので備忘録兼ねて紹介します。通常ピクトグラムといったら公共交通機関やバリアフリーの標識などのように固い・真面目なイメージがありますが、「ヒューマンピクトグラム 2.0」ではバリエーション豊かな様々なタイプのピクトグラムが数多く掲載されており、更に禁止事項を守れば無料で自由にすることができます。



参照元記事:NxWorld http://www.nxworld.net

配色はiPhoneだけでOK!WebデザイナーのためのiOS版Adobe Kuler入門

こんにちわ!ザ・マーズナレッジという会社をやっている、デザイナーのイシジマミキです。 みなさんはWebサイトの配色、困っていませんか? 配色は難しい 配色は難しいものです。メインカラーをオレンジに決めた時、他の色が白やグレーばかりになってしまったり、 街で見か [...]



参照元記事:Find Job ! Startup http://www.find-job.net/startup

いくつ当てはまるか要チェック! 生産性を下げる要因となる44の思考や行動パターン



生産性を下げる要因はたくさんあります。 自分の思考や感情、周囲の環境は、仕事の能率に大きく影響します。しかし、そのように大きな影響を与えるものが何なのか、自分では気付いていないこともあるでしょう。 ... 続きを読む






参照元記事:ライフハッカー[日本版] http://www.lifehacker.jp/

PSD/AIファイルをアプリ無しでプレビュー、コラボレーティブワークのためのファイル共有「corabbit」正式版が登場 【@maskin】

screenshot_493


[読了時間: 2分] クラウド型サービスの普及により、コラボレーティブワーク(共同作業)の時代の到来が期待される。 チーム各位がそれぞれの能力を存分に発揮して、音楽のジャムセッションのように即興でプロジェクトを進める。そんな、創造性の新潮流である。 ところは現実は「ファイルはクラウドで共有、だけど作業は別途メールかチャット」「新バージョンです、差し替えお願いします」という成長途上の様相だ。 そんな中、KDDIウェブコミュニケーションズは2013年10月9日、コラボレーション型の共同作業を支援するサービス「corabbit(コーラビット)」の正式版をローンチした。 screenshot_493




「corabbit」は、複数メンバーで構成されるチームに適したオンラインサービス。 2012年10月にβ版がスタートしていたが、本日をもって正式版が公開。さらに、PC (Windows/Mac OS X)上のファイルを自動で同期してくれるアプリのβ版も同時に公開された。 ストレージ(5GB~)を持ったファイル管理機能とそれと連携するコミュニケーション機能があり、特定のプロジェクトに参加するメンバーとファイルを共有し意見を公開するするだけでなく、その変更履歴を確認したり、画像のプレビューを行うことができる。 hp-banner-collaboration-made-easy ファイル共有自体は、一般的なクラウドストレージと同様の使い方だが、チームそしてプロジェクトという単位で公開範囲が限定される。 ファイルは、ドラッグ・アンド・ドロップでファイルをアップロードする仕組みで、同じ名前のファイルを追加すれば、古いファイルは履歴として保存されるため、うっかり上書きして消えてしまった、等というトラブルもない。なお、アップロードされたファイルは AES 256-bit で暗号化される。

画像のプレビュー、特定箇所へのコメントも


冒頭の画面は、あるプロジェクトの中に作成されたフォルダにロゴ画像をアップロードして、プレビュー画像を拡大しながら、その部分について3人のメンバーで意見交換をしているところ。 プロジェクトメンバー限定でファイルを共有するだけでなく、そのファイルについて議論したり、以下のように特定の箇所についてコメントを残したりすることができる。 hp-banner-feedback-that-makes-sense2 画像プレビューの機能が豊富で、無料版でもPNG、JPG、GIFに対応。有料版では、さらにPSD (Photoshop) や AI (Illustrator) のファイルプレビューに対応。 協議の末、ファイルを前のバージョンに戻すことも1クリックで可能。 また、複数のリビジョン(変更履歴)のファイルを4つまで同時に並べて比較することなど、コラボレーティブワークのための機能が豊富だ。もちろん、出先でのプレゼンテーションにも便利だろう。 気になる「corabbit」の料金プランだが、個人使用を前提としたPROプランと、チームでの複数のプロジェクトを作成できるチームプランの2つが用意されている。 いずれも、5GBのストレージが使用できる無料プランが用意されており気軽に試用できるが、フル機能はいずれも有料版からとなる。 なお、1つのプロジェクト/チームに限定されるPROプランは月額990円から。この価格で、100GBストレージと5プロジェクトメンバー、履歴数5が保存できる。 複数のチームやプロジェクトで使用する場合は、チームプランを選択する形となる。1990円月額のプランは、ストレージは100GBで、メンバーは10人、プライベートプロジェクトを10件まで作成できるようになる。プロジェクトは無制限作成できるが、プライベートプロジェクトを使用することで、一部の人にのみ共有することができる。ストレージの最大は、チームプランで最大1TBとなる。 プラン詳細はサイト上の情報を確認して頂きたい。なお、チームの数、プロジェクトの数によって、いろいろ組み合わせがありそうだが、チーム有料プランであればどんなパターンにも対応できそうだ。



【関連URL】 ・コラボレーションを簡単に | corabbit https://corabbit.com/ja/home http://techwave.jp/archives/51769346.html

蛇足:僕はこう思ったッス maskin2011009rev.fw プレビューが画像のみならず、HTMLやプレエンテーション、PDFに拡張されたら、かなり色々なシーンで活用されるように思うので期待。 さて、クラウド的発想のツールが整いつつあり「紙のワークフローがなくなった!どこでも仕事ができるノマドだよ!」という個人的には極めて残念な盛り上がりを尻目に、場所や組織、ITリテラーシーレベルといった枠組みを超越した創造的ワークスタイルを求めて25年。すこしずつ、夢に描き続けたことが現実になりつつあると感じています。 IT業界においてこの15年挑戦してきたのは「テレコミュニケーション」「CMS」、「コラボレーティブワーク」の3つ。テレコミュニケーションはインターネットマガジンで特集をやったり、自ら「打ち合わせはSkype等でいいですか?」と提案し続け、この10年でかなり進化。今では打ち合わせはChatWork(ビデオ)を使用することの方が多い。CMSは、日本にブログを普及させるべく、いろいろなプロジェクトに入り込み今や、ネット上の情報公開は一般的なものになった。最後のコラボレーティブワークについては、初代TechWaveはソーシャル編集部として、編集者ではなくソーシャル(社会的諸関係)でネタを収集して投稿するというスタイルをとった。湯川さんとのネタバトルが、初期のTechWaveの原動力となった。 コラボレーティブワークは、創造性およびCMS普及後の社会の新たな原動力となると思っている。ジャムセッションのように、管理型とは真逆の発想でメンバー全員の力を発揮し、プロジェクトに命を吹き込むもの。その先鋭的存在となる可能性のある日本発のcorabbit。ぜひ、世界に突き抜けて欲しいものだ。

著者プロフィール:TechWave 編集長・イマジニア 増田(maskin)真樹

8才でプログラマ、12才で起業。18才でライター。日米のIT/ネットをあれこれ見つつ、生み伝えることを生業として今ここに。1990年代はソフト/ハード開発&マーケティング→週刊アスキーなどほとんど全てのIT関連媒体で雑誌ライターとして疾走後、シリコンバレーで証券情報サービスベンチャーの起業に参画。帰国後、ブログCMSやSNSの啓蒙。ネットエイジ等のベンチャーや大企業内のスタートアップなど多数のプロジェクトに関与。坂本龍一氏などが参加するプロジェクトのブログ立ち上げなどを主導。 Rick Smolanの24hours in CyberSpaceの数少ない日本人被写体として現MITメディアラボ所長 伊藤穣一氏らと出演している。現在、TechWaveをリボーン中。中長期プランニングやアドバイザリー活動で定評がある。(@宇都宮ー地方から全国、世界へを体現中)

mail メール maskin(at)metamix.com | ChatWork(Voice/Video) | 詳しいプロフィールはこちらTwitter @maskinFacebook





参照元記事:TechWave http://techwave.jp

Web design inspiration | #836




In From up North’s inspiration galleries we present the latest of our findings from the wonderful world of design. Amazing high quality artworks in various categories from great designers all over the globe. If you would like to send us suggestions for these galleries, please click on the button “Submit” located in the header, and […]



参照元記事:From up North http://www.fromupnorth.com

YouTubeの動画にアノテーションを入れてチャンネル登録者を増やそう

YouTubeで投稿した動画を見てもらえたら嬉しいですが、チャンネル登録もしてもらえたら、もっと嬉しいですよね! 視聴者にチャンネル登録してもらうには、動画の中でチャンネルしてくださいと催促するのが一番効果的です。 動画 […]

YouTubeの動画にアノテーションを入れてチャンネル登録者を増やそう+PlusOneWorld の記事です。







参照元記事:+PlusOneWorld http://plus1world.com

2013年10月7日月曜日

デザイナーが選ぶデザイナーのための無料写真素材サイト、厳選10個!

そもそも「素材」というのは「何かを作るための原材料」ですから、デザイナー・グラフィッカーなどにとっての「写真素 [...]


The post デザイナーが選ぶデザイナーのための無料写真素材サイト、厳選10個! appeared first on 株式会社LIG.






参照元記事:株式会社LIG http://liginc.co.jp

2013年10月5日土曜日

CSSで三角形をつくる方法をアニメーションで説明してみた

CSSで三角形をつくる過程をアニメーションで説明しています。わかりやすいな。 ↑ ボーダーあるよね。 ↑ いろいろあって・・・。 ↑ 出来た! ↑ 吹き出しによく使われますよね。 CSSまわりに興味ある方は見ておくといいかもです。 » Animation to Explain CSS Triangles – CodePen



参照元記事:IDEA*IDEA http://www.ideaxidea.com

Twitter 人気のつぶやき 9/21~10/4 2013

thumb_key-ios7WebクリエイターボックスのTwitter: @webcreatorboxでは毎日Webに関する記事や美しいデザイン・写真などを紹介しています。その中で今週人気だったつぶやきトップ10を紹介します。見逃してしまった人はこ [...]



参照元記事:Webクリエイターボックス http://www.webcreatorbox.com

フラットUIなカレンダー「CLNDR.js」





参照元記事:MOONGIFT http://www.moongift.jp/

2013年10月4日金曜日

ページの装飾に便利!BizVektor固有のデザイン指定方法を紹介!!

BizVektorをご利用のみなさま、ページ制作をしている時に、cssで見た目を装飾したいけど書くのが手間だなと思ったことはありませんか? 実はBizVektorには固有のcssクラス名がいくつか用意されているんです。 ...



参照元記事:BizVektor [ ビズベクトル ] スマホ対応無料WordPressテーマ(テンプレート) http://bizvektor.com

2013年10月2日水曜日