配色に悩んだ時に役立つ便利なサイトやカラー関連ツールまとめ - NxWorld
「いつも同じような感じになってしまう」「このキーカラーに対してどんなアクセントカラーが合うのか」といったデザイン（配色）時の悩みを手助けしてくれるものやインスピレーションをもらえるもの、オリジナルのカラーパレットを簡単に作成・出力できるなど、配色・カラーに関連する便利なサイトやツールのまとめです。 似たようなサイトも多いですが、使いやすさ・見やすさ・情報量などの点でそれぞれ違いがあるので、こういったツールをお探しの方はひと通り試して自分に合ったものを見つけてみてください。 December 22, 2014 追記 「Material Design Color Palette Generator - Material Palette」「Material UI | Material UI Colors」「flatuicolorpicker : Best Flat Colors For UI D
ウェブページの要素を一瞬で調べられるブックマークレット「XRAY」 - あなたのスイッチを押すブログ
ブックマークレットとは… ブックマークレットは、ブラウザのブックマークに登録しておく事で使える便利機能。登録したブックマークレットを使用すると、ウェブページが表示されるのではなく、ウェブページ上で何かしらのアクションを起こすことができます。 例えば、私のブログの画像サイズを調べたいとします。そうしたら、予め登録しておいたブックマークレット「XRAY」を選択します。（※ブックマークレットの登録の仕方については後述します） すると、画面上にメニューが表示されます。 この状態で、調べたいウェブページ上の要素をクリック。すると、ページの遷移はせず、先ほどのメニューに要素の詳細が表示されるんです。要素上にもタテヨコのサイズが表示されていますね。 メニューの中には画像のサイズだけでなく、marginやpadding、要素の持つclassなども表示されます。 人のウェブページを参考にしながら自分のブログ
Adobe製品の代わりに使える無料アプリ10+
2014年6月27日 Illustrator, Photoshop, 便利ツール PhotoshopやIllustratorなど、Adobeの製品はクリエイターの必需品のひとつとなっています。しかしその値段からなかなか手が出せない…という方も多いのではないでしょうか？今回はAdobe製品の代用として使える無料アプリをいくつか紹介します。金欠の学生さんや、様々な理由から脱Adobeを考えている方の参考になれば幸いです！ ↑私が10年以上利用している会計ソフト！ Photoshopの代わりに GIMP 長年Photoshopの代用として愛され続けているGIMP。Photoshopの拡張子であるpsdファイルが開けることはもちろん、Photoshop用のブラシなども利用可能。画像の編集・加工ツールとしてPhotoshopとほぼ同様の機能を備えています。日本語の公式チュートリアルも充実！私もお金の
レスポンシブなサイトを一発でデバイス確認できる便利ウェブサービス - あなたのスイッチを押すブログ
最近、レスポンシブウェブデザインのサイトも増えてきましたね。このブログもレスポンシブ対応していて、色んなデバイスで閲覧できるようになっています。 ただ、制作会社のディレクターとしては、作ったレスポンシブのページをデバイス確認するのが非常に面倒なのです。 PCのウェブブラウザのウインドウサイズを伸び縮みさせてもいいのですが、それでは "どのデバイスで、どんな風に見えているか" が分からない。サイズ感が掴みにくいのです。 かと言って、検証機を５台も６台も並べて確認するのは非常に時間がかかってしまいます。 そこで私が利用しているのが「Responsive Checker」というウェブサービス。 URLを入力するだけで、擬似的に様々なデバイスでサイトを確認できます。また、任意のサイズに変更することもできるので、使い勝手も良い。オススメのウェブサービスです。 レスポンシブなサイトを一発確認 冒頭でお
1分1手間！自分の文章を正しく校正してくれるツールで新たな発見を - あなたのスイッチを押すブログ
日本語文章校正ツール 日本語は文章の構成がバラバラになりやすい言語です。主語や述語が抜けることもありますし、助詞の使い方も非常に複雑。 なので、コンピュータを使っても、その文章の正しさ・間違いを見つけるのは難しいのです。 そんな中でも、ウェブサービス「日本語文章校正ツール」は意外な便利さを発揮してくれます。 使い方は至ってシンプル。 上記のURLにアクセスすると、テキストの入力フィールドがあります。この中に文章を入力するのですが、私の場合は執筆したブログの本文を全文コピー＆ペーストしてしまいます。 すると、その文章の内容を判定して、日本語の間違いを指摘してくれます。また、その「間違った日本語」が、入力したテキストの中のどの辺りにあるのかも、ハイライトで教えてくれます。 「設定をカスタマイズ」にチェックを入れると、校正のレベルを選択できます。基本的にはすべてにチェックを入れておいて問題ありま
毎日のソーシャルを記録しよう！回数をつぶやくActterというWEBサービスを作成、公開しました。
This domain may be for sale!
無料で配色シミュレーションができるカラーパレット系サービス6選【2022年最新】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのモモコです。 今回はデザインの重要な要素の一つである、色選びの時に使える配色シミュレーションができるツールやサイトをご紹介します。Webカラーのカラーパレット系サービスを中心にチョイスしましたので、配色などでお悩みの方はぜひご参考にしてみてください！ 独学でつまずいていませんか？ 配色やデザインの基礎を効率的に学びたい、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGでもWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。「今すぐスクールの概要を知りたい！」という方は、ぜひこちらより資料をご請求ください。 coolors https://coolors.co/ 直感的な操作で色の組み合わせのシミュレーションができるサイト。スペースキーを押すことで自動で配色を行なってくれます。何度でも押せる
今までfoursquareにチェックインした都道府県を塗りつぶしてくれるツールを作ったよ - koogawa blog
#foursquare でチェックインした都道府県を塗りつぶしてくれる地図機能欲しい。MapKitでそんな事できるかな— Og🌗エンジニア🏝宮崎 (@koogawa) 2014年5月5日 思いつきでこんなツイートをしてみたのですが、なんとか無事に完成させることができました。 最初は自分用に作った物なのですが、何人かの方から「面白そう」という嬉しいお言葉を頂き、せっかくなので公開してみました。下記のリンクからご利用いただけます。 4sqGeoChart 10人ぐらい使ってもらえたら嬉しいな、と思っていたのですが、気付いたら100人以上の方が使ってくれているようです！どうもありがとうございますm(＿ ＿)m （5/10 22:41 追記）ユーザー数1000人突破しました！＼(^o^)／ せっかくなので、実装方法をメモしておきます。 地図側 今回の肝となる「地図を塗りつぶす」という機能をどう
[Å] ブログカスタマイズに便利なツール、Chromeの「要素の検証」の使い方をご紹介！
[Å] ブログカスタマイズに便利なツール、Chromeの「要素の検証」の使い方をご紹介！
![[Å] ブログカスタマイズに便利なツール、Chromeの「要素の検証」の使い方をご紹介！](https://cdn-ak-scissors.b.st-hatena.com/image/square/9c9c1cd8f93c96b173a59e68bf9ab6b6f9e72ec2/height=288;version=1;width=512/http%3A%2F%2Fwebmemo.biz%2Fwp-content%2Fuploads%2F2014%2F04%2FslooProImg_20140407002802.jpg)
あなたの最適なツイッター投稿時間がわかるツール「Tweriod」 | ブログのスイッチ
手間ひまかけて書いたブログの記事は、できるだけ多くの人に見てもらいたいものです。 そんなブログの更新情報を多くの人に届けてくれるのがツイッターです。 おそらく、普段のつぶやきだけでなく、そういう使い方をしている人は多いのではないでしょうか。 「Tweriod」を使えば、あなたのフォロワーのアクティブな時間がわかる 私もブログを更新したら必ずツイッターで更新情報をお知らせするのですが、気になるのがその投稿時間。 投稿時間によって、アクセスが多かったり、リプライが多かったりします。 今回、紹介する「Tweriod」を使えば、あなたのフォロワーのアクティブな時間がわかります。 つまりフォロワーがアクティブな時間にブログの更新情報をお知らせすれば、それだけ多くの人に見てもらえるわけです。 前置きが長くなってしまいましたが、実際に「Tweriod」の使い方をご紹介していきます。 「Tweriod」の
最近お世話になったWeb制作に関するお役立ちツール＆プラグイン | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーの白浜です。春ですね。4月生まれなので春はなんだか気合が入ります。 さて、挨拶とは関係ありませんが、最近Web制作をする上で役に立ったツールやプラグインをご紹介したいと思います。 画像作成編 無料で半透過マルチアイコンやファビコン（favicon.ico）作成 http://ao-system.net/alphaicon/ アルファチャンネルを持った綺麗なマルチアイコンが一発で作れます。仕上がりが綺麗だったのでお気に入りです。favicon画像作成のお供に。 OGP画像シミュレータ | og:image Simulator http://ogimage.tsmallfield.com/ 画像をアップロードするだけでFacebookのタイムライン上にどのようにトリミングされて配置されるかを一発でシミュレートしてくれます。 「あっこのままだとロゴが欠ける…」とかぱっと見で
簡単にSEO状況を確認することができるChrome拡張機能「AdMatrix Analytics」｜男子ハック
気になるページで拡張機能を使うだけで簡単に各種情報を一覧表示SEO状況を確認できるとタイトルに書かせてもらいましたが、具体的に何ができるのかというと指定したキーワードに対しての「h1」などのタグの状況や、被リンクの状態、タグの内容などを確認することができる拡張機能です。 ChromeとFirefox用に拡張機能が提供されていて、Webページを表示した状態で拡張機能をオンにすると画面下に被さる形で情報が表示されます。 テキスト量やSEOキーワードの状況などが表示されて便利。タブを切り替えることで被リンク数なども表示できます。 サイトマッピング機能をオンにするとサイト内のタグに対してマークがついてサイト内でどこにタグが使われているか簡単にわかります。 自分のサイトで使うもよし、参考にしたいサイトで使うもよし、解析ツールというよりも情報を見やすく表示してくれるツールという印象が強いですがなかなか
2013年Web制作に使い始めてよかったツール・サービスまとめ 〜そして時は2014年へ〜
2013年Web制作に使い始めてよかったツール・サービスまとめ 〜そして時は2014年へ〜 2013.12.19 | この方法お勧めです！ | 初心者向け | 制作あるある 皆様しわっす。WP-Dではジミーな技術系記事を書いてますエメラルドこと井村です。 パープルリーダーから「ゆく年くる年」というお題をいただきまして、たまにはまとめ記事的なものを書いてみたいと思います。 日々新技術に猛進する猛牛のような制作者の皆様には役に立たない記事だと思うので、日本酒でもたしなみながらくるくるスクロールしていただければこれ幸いであります。 個人的な話になりますが2013年3月に独立しまして、制作環境なども自分の好きな物を使うことができるようになりました。またフリーランスにとっては作業効率が自分の手取りに直結するので、作業の自動化・効率化は死活問題でもありますよね。 紹介しているツールやサービスは2013
劣化なし！画像を「圧縮、縮小」する無料ツールやフリーソフトまとめ
作成：2013/04/19 更新：2013/06/02 Tool > Webサービス 検索で上位を占めているサイトのページ表示速度を見ていると、1～2秒台が増えてきました。画像のファイル容量が大きいと、ページ速度が落ちるので当然SEOに良くありません。 僕もページ速度を早める為に色々試してますが、画像圧縮は高速化する上で一番簡単だと思います。 今回は、ブログやサイトを作るときに、「便利だな」と思った画像を圧縮するためのオンラインツールやフリーソフトをまとめました。この中から使いやすいのをチョイスしましょう。 エンジニア速報は Twitter の@commteで配信しています。 圧縮系のフリーソフト・サービス一覧 １．TinyPNG ２．PNG Minimizer ３．Compress PNG Images Online ４．PNGGauntlet ５．PunyPNG ６．JPEG Mini
Coveloping
box-shadowでふわりとした影をつくるCSSのジェネレーター、レスポンシブのチェック、アスペクト比の計算機、CSS/JSの軽量化など、たくさんの便利な時短ツールがありますが、それらの便利なツールを一つの場所にまとめたCovelopingを紹介します。 FacebookのOPGチェックやGoogle Mapsの地図生成ツールもあり、新しいプロジェクトを始める時にも役立つものが揃っています。 Coveloping 便利ツールは現在23種類、アスペクト比の計算や一つのカラーに黒と白を加えたバリエーションを生成したり、box-shadowでふわりとした影をつけたり、jQueryのアニメーションのエフェクトなどがあります。 これからもどんどん増えていくそうです。 その中から、いくつか紹介します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Youtubeから手軽にgifアニメを作れる・「GIF YouTube」
PSDファイルで利用されているフォントを調べるツール・「.psd fonts」
PDFに関する小粋なツールが集まった『Small PDF』 | 100SHIKI
CSS3アニメーションをブラウザ上で簡単に作成・編集できる『bounce.js』 | 100SHIKI
これはいい！HTML5とCSS3の便利なツールがまるっと揃っている -Web Directions