Web制作者は絶対チェックしておきたい、デザインやコーディングに取り入れていきたい便利なツールのまとめ
Webサイトのデザインやコーディングは、やるべきタスクが年々増えてきました。それらの手間がかかる面倒な事が楽にできるツールやアプリも年々リリースされています。 これからのWeb制作にどんどん取り入れていきたいツールやアプリを紹介します。 Adobe Experience Design(Adobe XD) Adobe XDはWebサイトやスマホアプリのデザインやプロトタイプを作成するベクターベースのツールで、PhotoshopやIllustratorともスムーズに連携して利用することができます。 以前は「Project Comet」の名称で発表されていた新ツールが、2016年3月に「Adobe Experience Design(Adobe XD)」としてプレビュー版が公開されました。現在はOS X版のみですが、2016年後半にはWindows 10への対応も予定されています。
ロゴをデザインする時に役立つ！便利なオンラインサービス・無料素材のまとめ23選
個人ブログでも企業サイトでも新しいサービスを立ち上げる時に重要なのは、ロゴのデザインです。ロゴの作成は、デザインセンスがある人には簡単な作業でも、デザインが苦手な人にとっては悪夢かもしれません。 ロゴのデザインやカラーやフォントを難しいと感じる人は、ぜひこの記事を参考にしてください。ロゴのデザインにとても役立つ23のサイトをご紹介します。 ロゴ・ジェネレーター（ロゴ作成ツール） カラーを選ぶためのツール ロゴ用の無料アイコンがダウンロードできるサイト ロゴ用の無料フォントがダウンロードできるサイト ロゴのアイデアがもらえる情報源 ロゴ・ジェネレーター（ロゴ作成ツール） ロゴ・ジェネレーターはロゴ作成のための一番簡単な手段です。以下のサイトを使えば手早くロゴが作成できます。無料や低価格で利用できるので費用の節約にもなります。 それでは、一つずつご紹介します！ Logaster 会社名と業種を
ブックマークレット10選
こんにちは、デザイナーのサリーです。セブ島のお土産に名物のシニガンスープの素をたくさん貰いました。 シニガン？な私は裏面（おそらくフィリピン語）を見てもさっぱり作り方がわかりません、クノールなのに… パッケージイラストとクックパッドを頼りにどうにかこうにか料理してみようと思います。 今日はデザインやコードをチェックするのに便利なブックマークレット10個を紹介します。 デベロッパーツールやブラウザの拡張機能を使った方が良さそうだと思ったもの、個人的に使いづらかったものは除外して、実用性のあるブックマークレットを選んでみました。 「ブックマークレットってなんだろう？」な方に説明をしておくと、 ブックマークレット 通常ウェブブラウザでブックマーク（お気に入り）を選ぶと、登録しておいたURLに遷移するが、URLの代わりにJavaScriptのプログラムコードをブックマークしておくことで、それを選ん
Webサイトのプロトタイプ制作に使える無料オンラインツール
2016年3月19日 Webサイト制作, 便利ツール Webサイトを制作する際に大切なものの多くは、制作開始する前の段階にあります。サイトの設計・計画がうまくいっていないサイトは、制作開始後、様々なトラブルに見舞われることでしょう…。ということで今回はモックアップ・プロトタイプと呼ばれる設計画面を作成できるオンラインツールをいくつか紹介します。サイトの大まかな動きをチーム内でシェアしたり、フィードバックしあったりと、便利に使えるものばかりです！ ↑私が10年以上利用している会計ソフト！ 2016年3月16日 追記：Adobeがリリースしたプロトタイピングツールも試してみました！→ Adobe Experience Design（XD）を使ってアプリのプロトタイプを作ってみた ViewFlux ViewFluxはデザイン画像のシェアやフィードバックが簡単に行えるツール。必要なページのデザイン
配色パターンを決める際にお世話になっているサイトをご紹介
「なんかいつも同じような配色になってしまう」「思い切った配色ができない」と悩んだときに個人的にお世話になっているサイトを紹介します。 かなり有名なサイトばかりですが参考になればうれしいです。 メインの色を決めるたいときに まず、ウェブサイトのメインとなる色を決めるときに使っているサイトを紹介します。 WEB色見本 原色大辞典 - HTML Color Names この手のサイトは色々ありますが、私はこのサイト一筋です。様々な色が載っていますが、以下のページの色を参考にすることが多いです。 日本の伝統色 和色大辞典 - Traditional Japanese Color Names 世界の伝統色 洋色大辞典 - Traditional World Color Names ビビッドカラー - Vivid Colors カラーピッカーもよく使います。 カラーピッカー - 原色大辞典 アクセント
これぞレスポンシブ確認ツールの決定版！OSを選ばずにウェブサイトをすぐに確認できる -Viewport resizer
ウェブページの表示サイズをデスクトップやスマフォ・タブレット用に変えてレスポンシブの確認をするツールはたくさんありますが、これはかなりおススメのツールです。 Viewport resizer Viewport resizerの特徴 Viewport resizerの使い方 Viewport resizerの高度な使い方 Viewport resizerの特徴 Viewport resizerはブラウザベースで動作するブックマークレットで、WindowsでもMac OSでも即時にツールを起動して、表示しているウェブサイトをあらゆるサイズに変更して確認できます。 フルカスタマイズが可能。 その場でサイズ変更してのカスタマイズも可能。 1クリックでスマフォやタブレットの縦・横向きを変更できます。 Media Queriesをサポート。 Metaのviewportタグを適合させます。 ページのリロ
美しいバランスを生み出す黄金比をウェブページのレイアウトに使ってみたい人に役立つ -The Golden Grid
黄金比（1:1.6180）をベースに作成されたグリッドを使った、ウェブページのレイアウトに役立つテンプレートとツールを紹介します。 The Golden Grid [ad#ad-2] The Golden Gridの仕組み The Golden Gridのセット内容 The Golden Gridの仕組み 「The Golden Grid」は960 Grid Systemに水平方向のガイドを加えたもので、グリッドを構成するカラムと溝を黄金比ベースにしたものです。 黄金比については以前の記事で少し取り上げました。 黄金比をサイトのデザインに取り入れる簡単な3つの方法 「The Golden Grid」は長方形の幅と高さ（a/b）が黄金比（1.6180）をベースに構成されており、マージンの横と縦（x/y）も黄金比をベースにしています。
住太陽の「SEO 検索エンジン最適化」
私がSEOを始めたときから住太陽さんやその書籍からたくさんのことを学ばせていただきました。 このサイトには多くの人が学ぶべき正しいSEOの情報が詰まっています。このサイトの情報をもとにして自身のウェブサイトに合うようにアレンジすることで、成功に近づけると思います。 日本でトップのSEOコンサルタントを3人挙げろと言われたら、絶対に住太陽さんを含めます。実績と経験、知識ともに間違いなくトップです。でも、住さんの最も素晴らしいところは、知識の共有です。住さんが惜し気もなくこのサイトで公開している情報は、ウェブのどこにもない独自のもので、かつ極めて有用です。僕自身も多くのことを学ばせてもらっています。 SEO(検索エンジン最適化)の意味SEO(Search Engine Optimization: 検索エンジン最適化)とは、自社のウェブページがGoogleやBingなどの検索結果で上位に表示され
サイト制作に役立ちそうなWeb 2.0的ツールが400以上まとまっている『Web2Rain』 - 100SHIKI ～ 世界のアイデアを日替わりで ～
ただのリンク集といえばそうなのだが、うまいことカテゴリー分けされていて使いやすそうなのでご紹介。 Web2Rainはサイト制作に役立ちそうな2.0っぽいツールを集めたサイトである。全部で400を超えるツールがまとめられているようだ。 サイトはゼロから作ってもいいが、便利なツールが日々登場しているのでこうしたツールをうまく使ってスピーディに仕上げたいところだ。 紹介されているツールはきちんと機能別にタグ付けもされているので、ピンポイントな要望にも応えてくれるだろう。またタグクラウドやキーワード検索にももちろん対応している。 日々登場するネットツールの全容をつかむことは難しい。こうした探しやすいサイトは知っておいても悪くないですな。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Ngi-d.net
色見本と配色サイト - color-sample.com
Adobe® BrowserLab
Fireworks初めての方にオススメしたいサイトと参考書 | Webデザインのタネ