それなりに使える、Web制作者がお世話になる便利ツール
作成：2016/01/4 更新：2018/05/01 Web制作 > 毎回使うわけではないけれど、いざとなったら意外と役に立つもの。今回はディレクターからコーダーまで「それなり」に使えそうなツールをまとめました。作業労力を軽減してくれる系です。 エンジニア速報は Twitter の@commteで配信しています。 便利なツール ロゴの特許、商標の検索 キーワードを入力すると登録番号・出願・商標・出願人・登録日の他、ロゴイメージなどを見ることができるサービス、特許情報プラットフォーム。ロゴを作成し商標登録後はここでチェックしておきたいですね。 検索の他、実用新案、意匠、商標の簡易検索ができます。意外と紹介している人が少ないのと、たまに使うことがあるのでメモしておきます。 J-PlatPat 特許事務所は検索で沢山出てきますので、ここでは割愛します。商標登録とロゴマーク作成を一括で頼めるサービ
この使いやすさはヤバイ！かっこいいWEBサイトが簡単に作れるXPRSが凄い！ | バンクーバーのうぇぶ屋
これはすごい！普通にWEB制作者としても勉強になる程使いやすいインターフェースで、これまで使ってきたどんな簡単サイト制作サービスよりシンプルで、何より使い勝手がめちゃめちゃ洗礼されたXPRS（エクスプレス）というWEBサービスをご紹介します！ とにかく使いやすいさがピカイチ！ これ、勉強になる部分が多いなぁと関心してしまうくらい操作方法がとにかく分かりやすい。元々は複雑なWEBページデザインをWEB上でやっちまおうなんて物だったんだから、自由度を求めると、とにかく操作がわかりにくいし、想像していた表現とはまったく違う動作をするなんて事良くありましたが、今回のXPRSは直感的に操作しても自分の想像していた通りに作れるし、日本語タイプも問題無く動作。テンプレート数とか、機能面の見劣りとか、色々他と比べてしまう部分があるにしても、それでもこの使い勝手の良さは一度試してもらう価値がある物かと思いま
シームレスな背景パターンを作成できるジェネレーター・「Background Image Generator」
Background Image Generatorはシームレスな背景パターンを作成出来るジェネレーターです。背景の色や素材、形状、ノイズ等を選んでダウンロードするだけとお手軽で素敵。この手のツールは久しぶりに見た気がします。パターンはSubtle Patternsを参考にしているそうです。Subtle PatternsはライセンスがCC-BYなので自作出来るならしたほうが良いですね。 Background Image Generator
photoshopのアセット機能を使って爆速でスライスしよう
こんにちわ。 マークアップの田村です。 2週連続でクリエーターブログを書かせていただきます。 今回はコーダーの皆さんはぜひ使っていただきたい「photoshop2014」のアセット機能を紹介したいと思います。 アセット機能とは？ photoshopヘルプから引用させていただきます。 PSD ファイルのレイヤーまたはレイヤーグループのコンテンツから JPEG、PNG または GIF 画像アセットを生成できます。サポートされている画像形式の拡張子をレイヤー名またはレイヤーグループ名に追加すると、アセットが自動的に生成されます。また、生成される画像アセットの画質およびサイズパラメーターを指定することもできます。 PSD ファイルからの画像アセットの生成は、マルチデバイス Web デザインで特に役立ちます。 上記に記載の通り、スライスで画像を書き出すのではなく、レイヤーから画像を生成できます。 切
ngrokでローカルをリモートに公開 – A Memorandum
世間では「Vagrant Share」なるものが便利で注目を集めてるようですが、Vagrantを使ってない人がローカルで開発しているものを一時的に外向きに開放するのに「ngrok」が便利じゃないか（これならWebデザイナーさんでもできるんじゃないか）、と言うことで記事を書いています。 動作イメージはこんな感じ。 ngrokを使うとローカルから「http://localhost:80」とか任意のポートで起動してるサイトを、たいした設定をすることもなくネットワークの外から「http://任意の文字列.ngrok.com」でアクセスさせることができちゃいます。要はトンネル。お客さんとかにリモートからローカルのサーバを直接見てもらうこともできるってわけですね。 使い方は簡単 使い方は簡単で、各プラットフォームに用意されたファイルをダウンロードして実行。ローカルのサーバが80番ポートなら「./ngr
テストサーバーへのアップが面倒なときはngrokでローカル環境を外部公開してみよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。エンジニアのまろです。 テストサーバーにアップするのって面倒ですよね。FTP環境だったり、Gitでの環境だったり。どちらもコマンドでアップするんですけどなんか。。。 あと外部サービス連携も面倒ですよね。開発中と本番のURLが違うのはもちろん、localhost:8080なんて外部からアクセスできないし、それの設定なんてこれまた面倒。そんなときにngrok使いましょう。というお話です。 ngrokとは https://ngrok.com/ localhostで動いているサーバーを外部（LAN外）からアクセスできるように、リレーしてくれるツールです。 例えば「http://localhost:8888」が「http://c3f4avrc.ngrok.com」になって公開される感じです。 簡単すぎて、今回はボリューム少な目です。 ※無料ですが、ngrokを継続して使っていくために任意
Sublime Text 3 の便利ショートカットキー | ジョブテク
ファイルの操作 ファイル名を検索して開く Windows:Ctrl＋P Mac:Cmd＋P 表示された入力欄にファイル名の一部を入力すると検索結果が表示されるので選択して開きます。 使用言語の指定 Windows:Ctrl＋Shift＋P Mac:Cmd＋Shift＋P 表示された入力欄に使用する言語名の一部を入力すると検索結果に「Set Syntax」が表示されるので選択します。 使用言語を指定することで言語にあった色分けや入力補完を表示してくれます。 文字の大きさを変える Windows:Ctrl＋Shift＋+、Ctrl＋- Mac:Cmd＋Shift＋+、Cmd＋- カーソルの操作 複数のカーソルを配置する Windows:Ctrl＋クリック Mac:Cmd＋クリック クリック位置にカーソルを配置し一度に複数個所を編集することができます。 ※下図のように複数個所に同じclass名を
webfont|test
Test up to three fonts You can choose a Google Font or a Websafe font from the list, write the exact name of a System Font or Upload a custom font file. It's a tool to test and analyze webfonts that you intend to use in your websites or projects. You can compare fonts from different sources (Google Fonts, System Fonts or any font file downloaded from internet), analyze their x-height, weights, cha
アイキャッチ画像・ロゴ作成のための6つの優秀な無料ツール / Maka-Veli .com
事情があって、プロのグラフィック・デザイナーを雇えない場合はありませんか。コストが問題であったり、時間に追われていたり…といったことが原因で。あるいは、デザインの才能はあるけれど、ITに弱いという人もいるかもしれませんね。こうしたことが身に覚えがある方には、ブログ用のシンプルな画像やウェブサイト用のロゴを簡単に速く作ることができる優秀な無料ツールがある、というのは嬉しい情報ではないかと思います。 以下の6つのツールはロガスターのおすすめです。 文字通り数分で、シンプルかつ綺麗な画像やロゴが、誰でも作れます！ 1. LiveLuvCreate LiveLuvCreateはほとんどの人が使いやすいと感じる画像作成サイトです。 LiveLuvCreateを使えば、一つの背景画像から複数画像のコラージュまで、様々な種類のデザインレイアウトから選ぶことができます。三つのテキストエリアでは沢山
cssを書く人がブクマしておきたいジェネレーターサイト8選
あとは右側にcssと記載されている箇所がありますのでそこをコピーするだけです。 cssの:beforeで設定してあげて下さい。 シェイプをcssで作成したい場合下記サイトもおすすめ。 CSS3 Shapes ボックスのシャドウを簡単に生成「box-shadowジェネレーター」 http://www.bad-company.jp/demos/box-shadow/ ボックスにシャドウをcssで付けたいときに使用します。 各値を変更することでソースコードの値が変更されるのでコピーしてから、 コーディングしているcssにペーストするだけでcss3のbox-shadowが適用されます。 cssをsassに変換「CSS 2 SASS/SCSS CONVERTER」 http://css2sass.herokuapp.com/ cssをsassに変更できます。 昔cssで書いたのをsass/scssで
keyframes（CSS3）とSassでイケてるアニメーションをシンプルなコードで実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ LIGフィリピン支社代表のせいとです。 最近のブログではまとめ記事中心に書いていたのですが、このまえ編集担当の朽木に「最近エンジニアっぽい記事書いてないよね。」というグサっとくる一言をもらったので、今回はそれっぽい記事を書いてみようと思います。 はじめに モダンブラウザでは、CSS3のanimationプロパティ、@keyframesの2つを使ってイケてるアニメーションがJS抜きで実装できます。 そいつあすごいぜって話なんですが、1つ心配なことが。 それは、アニメーションのバリエーションが複数ある場合、コード量が長くなりがちという問題。 ただでさえ各ブラウザのベンダープレフィックス付ける必要があるので、その上アニメーションパターンをいくつも書こうとしたらもう…（´Д`） 実践その1 というわけで、Sassを使って簡潔に書くことにしましょう。 試行錯誤を繰り返し、いろんなサイト
サイト制作時のデザインやコードの「ぶれ」をなくすスタイルガイドを作成するためのテンプレート -Style Guide Boilerplate
ウェブサイトの制作時で大切なことの一つは、デザインやコードの「ぶれ」をなくすこと。 ウェブサイトを制作する際、プロジェクトに関わる全ての人が参考にできるデザインのスタイルガイドを作成するBootstrapベースのテンプレートを紹介します。 Style Guide Boilerplate Bootstrap Edition Style Guide Boilerplate -GitHub スタイルガイドは作成した時の利点が多く、もしまだ未の人は是非チャレンジしてみてください。 また、もう利用している人には、Bootstrapベースで簡単にスタイルガイドが作成できるので試す価値があると思います。 スタイルガイドを導入する利点 ウェブサイトのデザインや実装方法を定義し、一貫性を促進する。 モジュール形式の考え方を促進する。 ページを作成する際にパーツやエレメントで迷わないようにする。 ウェブサイト
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
12 Best Tools for Playing Around with Color
Sign Up & Log In - Moqups App
【連載Git入門 第3回】SourceTreeでGitを始めよう！ブランチを切ってみよう
レスポンシブの確認が快適に！ブラウザやOSを問わず各デバイスをシミュレートしてWebページを表示できるオンラインサービス
記事を複製できるWordPressプラグイン「Duplicate Post」 – ワードプレステーマTCD
Flipsblog.jp
Padletに新規登録
ソニック速報
