作成：2016/01/4 更新：2018/05/01 Web制作 > 毎回使うわけではないけれど、いざとなったら意外と役に立つもの。今回はディレクターからコーダーまで「それなり」に使えそうなツールをまとめました。作業労力を軽減してくれる系です。 エンジニア速報は Twitter の@commteで配信しています。 便利なツール ロゴの特許、商標の検索 キーワードを入力すると登録番号・出願・商標・出願人・登録日の他、ロゴイメージなどを見ることができるサービス、特許情報プラットフォーム。ロゴを作成し商標登録後はここでチェックしておきたいですね。 検索の他、実用新案、意匠、商標の簡易検索ができます。意外と紹介している人が少ないのと、たまに使うことがあるのでメモしておきます。 J-PlatPat 特許事務所は検索で沢山出てきますので、ここでは割愛します。商標登録とロゴマーク作成を一括で頼めるサービ

最近、ウェブデザイン周りの優良ツールがたくさん出てきていて、しかもちゃっかりみんな買っちゃうしアドオン系のソフトウェア界隈にも良い流れを感じるこのごろ。今回は、ぼくが買ったツールのうちこれは手放せないなとおもったものをピックアップしてアフィリンク付きでゲス顔で紹介したいと思います。主にMacです。 マークアップ系 Slicy PSDファイルから画像素材が出力できるアプリ。PSDファイルを読み込ませるだけでほとんど自由自在に画像素材を書き出せます。使い方はPhotoshopのレイヤーやフォルダに.pngなどの拡張子をつけておくだけ。 マークアップするときの画像書き出し作業が全然億劫じゃなくなったのが一番嬉しい。一度読み込ませると、あとはPSDが更新されたら自動で書きだす機能なんかもあります。スマホのRetina用に半分の画像も一緒に書き出せたり、MacのRetina用に二倍の画像も一緒に書き

ワイヤーフレームとは、簡単に説明するとコンテンツやレイアウトなどを示した設計図や構成図のことを言い、これをしっかり作っておくことでデザインやコーディングといったその後の作業をスムーズに進めることができます。 単にワイヤーフレームと言っても「ツールやソフトを使用する」「基本的に全て手書きで行う」など人によって作り方は違うと思いますが、個人的にワイヤーフレーム作成時に便利だなと感じたツールや素材を紹介します。 また、専門ギャラリーや参考になるショーケースなども併せて紹介するので、あまりワイヤーフレームを見たことないという人はそちらも参考にしてみてください。 便利ツール インストールしたりソフトへの拡張機能として使うものなどもありますが、今回はオンラインで使用するツールを紹介します。 中には使用する為には登録が必要なものや場合によっては有料になるツールもありますが、ほとんどフリーで作成も保存もで

FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ

ポスターやWebサイトのデザインをする際の配色は奥が深く、デザイナーであっても毎回悩む問題の1つ。 ただ、デザインにおいて配色の役割は大きく、たった1つの色でそのサイトやモノの印象がガラっとかわることはよくあります。 ベースカラーやアクセントカラーの組み合わせが決定しても、その色で本当に正しいのかどうか不安になることもあるかと思います。 今回ご紹介するのは、そんな悩みを一発で解決する、配色を決定する際に役立つ便利なWebツールです。デザイナーの方はもちろん、ディレクター、エンジニアの方でも、覚えておくと使えるものばかりなのでぜひ利用してみてください。 Web配色ツールのご紹介 それでは、Web配色ツールを10個ほどご紹介します。求める色がすぐに見つかったり、色を組み合わせる時の見本となるサイトばかりなのでぜひ訪れてみてください。 HUE/360 HUE/360は、1つのキーカラーと調和する

※この記事は、2015年4月15日に公開された記事を再編集したものです。 世の中には、物事を美しく魅せるための「比率」が存在します。 建築や、Webデザイン、通常のデザインなど「なんだか綺麗」と思わせなけらばいけない場面で利用されるこれらの比率。具体的には黄金比、白銀比、青銅比、白金比、第二黄金比など、利用される比率は複数存在します。 そこで今回は、その中でもよく使われる黄金比・白銀比を簡単に、自動で計算してくれる便利なサービスを5つ選んでみました。 黄金比とは 黄金比とは、「Golden Ratio」の日本語訳で、1：1.618という人間にとって最も安定し、美しく感じられる比率のことです。 正方形の一辺にその約60％分の長方形を足した時、自然とバランスが取れていると感じることができます。名刺などの縦横比もほぼ黄金比で構成されており、有名なものをあげると、パルテノン神殿、モナ・リザ、ミロの

こんにちは。 どんな仕事であっても、世の中の流行りを知ることは大切です。 今日は、世の中の「旬な話題」がひと目でわかるサイトを9つ集めてみました。 yahooリアルタイム [browser-shot url=”http://search.yahoo.co.jp/realtime” width=”550″] 王道ですね。TwitterやFacebookなど、発言場所を絞り込んだ検索も兼ね備えています。 Googleトレンド [browser-shot url=”http://www.google.co.jp/trends/” width=”550″] 急上昇キーワードがわかります。 ついっぷるトレンド [browser-shot url=”http://tr.twipple.jp” width=”550″] ホットワードを筆頭に、ITからつぶやきから、あらゆる情報を網羅しています。アンテナが

mnml ThemeはGoogle Chromeのデベロッパーツール用のカスタムCSSです。 Google ChromeでのWebサービス開発においてデベロッパーツールがなければもはや開発が成り立ちません。そんなデベロッパーツールをより見やすく使い勝手よくしてくれるのがmnml Themeです。 こんな感じの黒を基調としたUIになります。 コンソールも黒系に。見やすいですね。 もちろんリソースから見た場合も。 mnml Themeを適用すると黒背景を基調とした見やすい画面になります。エレメンツ、リソース、コンソールなどがぐっと見やすくなるのではないでしょうか。もし自分好みじゃなかったとしても、このCustom.cssをベースにすれば手軽にカスタマイズできそうです。 mnml ThemeはGoogle Chrome用のソフトウェア（ソースコードは公開されていますがライセンスは明記されていませ

Enterprise チームで使用している様々なWebアプリのパスワード&ログイン情報を、一元管理できるツール「Meldium」 数々のWebサービスやアプリケーションが登場し、私たちはとても便利にそれらのツールを使っているが、次々と現れる新アプリケーションごとに、IDやパスワードを管理するのは骨が折れるものだ。そこで活躍してくれそうなのが、特に中小企業や少人数のグループで有効に利用できる「Meldium」だ。 「Meldium」は、グループで使用しているアプリケーションについて、それぞれのログイン情報の管理を一元化してくれるツール。使い方はいたってシンプルで、ログイン情報の管理者は「Meldium」で各チームごとにアカウントを作成し、チームのメンバーは、ChromeやFirefoxといったブラウザの拡張機能をダウンロードするだけ。たったこれだけの手順で、それぞれのユーザーがアプリケーショ

このように@mediaを使用して出力先や解像度、サイズなどで条件分岐をしていき、必要のない要素を非表示にしたりして、見栄えを切り分けて製作していきます。 レスポンシブWebデザインのメリット・デメリット 前述のとおり、RWDでは同じCSSファイルで各デバイスのスタイルを共有します。そのため、共有しているスタイル変更の影響を受けやすく、制作をデスクトップとモバイルで分担している場合などは細かいレギュレーションを最初に決める必要があります。 とはいえ、モバイルとデスクトップをHTMLから切り分けた場合、完成後の更新の手間も二重にかかってしまいます。CSSで分岐して必要なプロパティのみ上書きしてデバイスに最適化するだけで同じ素材を共有できることは、サイト運営者にとって非常に魅力的です。 RWDのメリット デバイスごとに切り分けず1つのHTMLファイルで管理可能 スタイルを共有してテイストの統一性

Webサイトを高速化にするために必要な項目を教えてくれるGoogleツール「PageSpeed Insights」を使ってみました。自分のWebサイトで何をすれば高速化につながるのかを優先順位をつけて教えてくれるので、試してみる価値はあるかと思います。使い方もとても簡単なのでオススメです。 [ads_center] 使い方 PageSpeed Insightsにアクセスして、URLを入力して「ANALYZE」をクリックします。 そうすると、こんな感じでWebサイトを高速化させるために必要な項目を優先順位をつけて教えてくれます。とても便利ですね。 赤色のマークがついた「High priority」が一番優先順位が高く、その後に黄色の「Medium priority」、青色の「Low priority」と徐々に優先順位が低くなっていきます。高速化をやりたいけど、どこから手をつけていいかわからな

よくあるツールだが、シンプルで使いやすかったのでご紹介。 Diffcheckerを使えば、2つのテキストの差分をチェックすることができる。 テキストは貼り付けてもいいし、ファイルのアップロードにも対応している。 プログラミングの練習や、ファイルの履歴管理に便利かもですな。覚えておいても損はないか、と。

こんなこと気になりませんか？ 「自分以外のサイトがどうやって検索結果上位表示に成功しているのか？ネットで儲けているのか？」 今回はそれを知るための方法とSEOツールを紹介します！ ネット上は激戦です。でも、勝ち目がないところでの勝負を避け、弱点だけを攻められれば勝利は間違いありません。ライバルサイトが何を武器にし持ち、どこが弱点なのか、ライバルサイトを丸裸にしてやりましょう！！！ その手順は以下の通りです。ツールの使い方も含めて説明します。 著者情報：この記事を書いた人 ウェブさえ web業界14年目。フリーランスwebデザイナーとして活動後、法人化。今でも年間100件以上のウェブサイトの企画・制作に関わっています。 ウェブさえにできること【お仕事のご相談＞サービスメニュー】 Follow @websae2012 分析する手順 1.まずはキーワードのピックアップ 2.次は検索してみる 3.