Web担当者必見！ワイヤーフレーム作成時の注力ポイント9個と便利ツール20選
ホームページを作成する際、必ずといっていいほど作成するのが本番用デザインの設計図である「ワイヤーフレーム」です。 ワイヤーフレームは一般的にWebディレクターが作成しますが、デザイナーに渡した時に「どう作ればいいかわからない」などのフィードバックを受けた経験はないでしょうか。 プロジェクトを円滑に進めるためのコミュニケーションツールでもありますので、あくまで設計図とはいえ適切に作成したいものです。 そこで今回は、ワイヤーフレーム作成時に気を付けたいポイントと便利なツールをあわせてご紹介します。 ワイヤーフレーム作成で悩んでいるWebディレクターの方は、参考にしてみてください。 参考： 新人Webディレクターの基礎、制作の現場で使うワイヤーフレームの作り方｜ferret ワイヤーフレーム作成の注意ポイント9個 1. アイデア出しは個人でしっかりと行う http://mindmap.jp/00
ブラウザ上で画像を加工・編集できるおすすめサイト6選【全部無料】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、ディレクターのはるかです。 資料作成時など、写真やキャプチャをサクッと加工・編集したいとき、ありませんか？ でも、ちょっとしたリサイズ・トリミングやファイルの変換などのために有料のソフトを買うのは気が引けてしまいますよね。 そこで本記事では、知っていると便利な写真加工や画像編集が簡単にできる無料のツールをご紹介します。フリーソフトはもちろん、ブラウザ上でサクッと作業できるものもありますよ！ 【こちらもおすすめ】 ※ 【2021】無料で商用利用可なフリー画像・写真素材サイト12選+2 ※ センスがなくてもそれっぽい！無料インフォグラフィック作成ツール5選 ※ ノンデザイナーのための無料ビジュアルコンテンツ作成ツール9選 ※ 動画挿入でインパクトあるオリジナル資料を作成する方法 デザインの世界に飛び込んでみませんか？ デザインツールを使えるようになりたい、クリエイティブな仕事がした
カラーコード変換ツール | Hex、RGB、HSV、CMYK、XYZ、LAB、HSLに対応
カラーコード変換ツールについて使い方基本的に、気になったところをクリックすれば、その色の色コードを調べることができます。Hex(16進数)からRGB(10進数)に変換したい場合は、Hexに直接カラーコードを入力するか、画面上部のカラーピッカーで色を選択して下さい。例えば、RGB(10進数)からHex(16進数)に変換したい場合は、R、G、B、それぞれに10進数でRGB値を入力して下さい。色コードをコピーしたくなったら、画面上部のナビバーの、コードの部分をクリックして下さい。補色と反転色補色は、色相環上の正反対に位置する色です。メインカラーに対するアクセントカラーの候補となります。反転色は、カラースケール上のRGB値を反転させた色です。こちらもメインカラーに対するアクセントカラーの候補となります。HSVとHSL色空間HSV、HSL値におけるSは「彩度」です。この値を減らすと、薄くなり、背景色
Chromatic Vision Simulator
About "Chromatic Vision Simulator - Web Edition" This software is a color vision experience tool for color normal individuals that can simulate three most common deficient types of congenital color vision, i.e. Protanopia, Deuteranopia and Tritanopia. Although this is a web-application coded with HTML5 + Javascript and is based on the "Chromatic Vision Simulator" smart-phone edition, it works with
色覚シミュレーションツールについて – NPO法人 カラーユニバーサルデザイン機構 CUDO
コンピュータ技術の利用によりP型やD型、T型色覚の人の「見分けにくい色」を知ることができるようになりました。カラーユニバーサルデザイン機構ではこのツールを「色覚シミュレーションツール」と呼んでいます。 本来、人は自分以外の人が色をどのように感じているのか体験することはできません。色覚シミュレーションツールにおいても、P型やD型、T型色覚の人の色の見え方そのものは体験できませんが、「色の見分けにくさ」を体験することができ、大変役立ちます。 ＊フォトショップやイラストレーターでは、色覚シミュレーションツールのことを「校正ツール」と呼びます。 ＊色覚シミュレーションツールによって表現される色が異なる場合がありますが、「色の見分けにくさ」は正しく再現されています。 抑えておこう！色覚シミュレーションツールの「色」の表し方 色覚シミュレーションツールを使う前に、知っておいていただきたいのは「色」の表
Web初心者がとりあえず使ってみるべき無料Webツール14選 | LISKUL
テクノロジーの進歩が激しいWeb業界。Webマーケティングツールの開発でも同様、様々な人が知恵を振り絞り、Web上での売上アップを目指したツールやサービスが今日も開発されています。 ただその一部は料金が高かったり、使い方が難しかったりと、一般の人にはなかなか手を出しづらかったりするもの。 そこで今回は、Webにほとんど触ったことがないような人でも試せる「無料」のWebツールを厳選してみました。「サイトを作る」⇒「ユーザーを集める」⇒「サイトを分析する」⇒「獲得率を高める」の時系列順にまとめてみましたので、ご自身のサイトのフェーズに合わせて参考にしてみてください。（※サービスにより無料でできることが限られているツールもあるためご注意下さい。） 紹介ツール一覧 Webサイトを作る1：本腰を入れてページを作る（Unbounce） ・テンプレートが100種類以上あって、全部カッコイイ！ ・自由度が
Webサイトのプロトタイプ制作に使える無料オンラインツール
2016年3月19日 Webサイト制作, 便利ツール Webサイトを制作する際に大切なものの多くは、制作開始する前の段階にあります。サイトの設計・計画がうまくいっていないサイトは、制作開始後、様々なトラブルに見舞われることでしょう…。ということで今回はモックアップ・プロトタイプと呼ばれる設計画面を作成できるオンラインツールをいくつか紹介します。サイトの大まかな動きをチーム内でシェアしたり、フィードバックしあったりと、便利に使えるものばかりです！ ↑私が10年以上利用している会計ソフト！ 2016年3月16日 追記：Adobeがリリースしたプロトタイピングツールも試してみました！→ Adobe Experience Design（XD）を使ってアプリのプロトタイプを作ってみた ViewFlux ViewFluxはデザイン画像のシェアやフィードバックが簡単に行えるツール。必要なページのデザイン
WebデザイナーもGit使うといいよって話 | Cherry Pie Web
※この記事では「Webデザイナー」は、「ノンプログラマ」の意味で使っています。 psd、ai などの材料データの管理ではなく、サーバーにアップするファイルの管理の話です。 サルでもわかるといわれても、やっぱりわからない・・・ Web制作をやっている人は、少なからずバージョン管理システムの話を聞いたことがあると思います。 特にGit（ギット）っていうのは、内容まで知らなくても名前くらいは聞いたことがありますよね。 で、ネット上ではバージョン管理システムのメリットに関するブログ記事なんかもたくさんあって、変更履歴をたどれるとか、複数人で同じファイルを修正したりといった時のトラブルに対応できるとか、なんか便利そうだなーとは思っていたわけですが、ずーっと導入は見送ってきました。 その理由は・・・ 「Git入門」とか書いてある記事を読んでも導入方法が書いてあるだけで、実際に使うシチュエーションが思い
はてブの個別ブクマページ（新デザイン）の見やすさをCheck My Coloursで調べた結果がひどい - みやきち日記
個別ブクマページがすげえ見づらくなった はてなブックマーク、トップページだけじゃなく、個別ブックマークページ（エントリごとのコメント一覧のページ）も一部デザイン改変したんですね。たとえば、ITmediaニュースのこちらの記事の個別ブックマークページは、以下のように表示されます。 すげえ見づらい。何この白さ。 画面のコントラストが低すぎて、見ているうちに目が痛くなってきます。しばらくがんばって読んでみた後、何気なくTVを見たら、目が疲れすぎてBBCやCNNの画面下部の文字が読めなくなってて呆然としました。座ってる場所からTVまでの距離はいつもと同じなのに。701ページもある『木村政彦はなぜ力道山を殺さなかったのか』（増田俊也、新潮社）をKindleで一気読みしたときだって、こんなに目が疲れたりしなかったのに。 Check My Coloursで調べてみた この見づらさが個人の感覚の問題なのか
HTML5のCanvasを使ったパターン背景を簡単に作成出来るWebサービス・Patternizer
珍しいなぁと思ったのでメモがてらご紹介です。 HTML5のCanvasを使用してパターン背景を 生成出来る、というWebサービス。線を描いて 数枚重ね、パターンのような背景を作成する ことが出来ます。まだ実用段階とは行きません けど。 簡単にHTML5製の背景を作成出来るジェネレーターです。Canvasは非プログラマーにとっては若干ハードルが高い印象ですので、この手のジェネレーターで使い方を覚えていくのもいいかもしれません。 こんな感じ。線の太さ、角度などを調整し、複数の線の連続を重ねてパターンを生成します。 使い方はこんな感じ。直感で分かるんじゃないですかね。 使い方まず、patternizer.jsというスクリプトを読み込みます。 <script src="js/patternizer.js"></script>で、マークアップ <canvas id="bgCanvas"></canv
［速報］アドビがHTML5とモバイルにフォーカスした新ツール群「Adobe Edge Tools & Services」を発表。アニメーション作成、レスポンシブデザインなどが効率的に
［速報］アドビがHTML5とモバイルにフォーカスした新ツール群「Adobe Edge Tools & Services」を発表。アニメーション作成、レスポンシブデザインなどが効率的に 米アドビは24日（日本時間24日深夜）、サンフランシスコでイベント「Create the Web」を開催。CSSやJavaScriptを使ったアニメーション作成、画面の大きさによって動的にレイアウトが変化するレスポンシブなWebデザイン、複数のモバイルデバイスへの対応、HTML5やCSS3に対応したコーディングなど、最新のWeb技術に対応した開発を支援する新ツール群「Adobe Edge Tools & Services」を発表しました。 発表された新ツールやサービスを日本語で解説するWebサイトもすでに公開されています。サンフランシスコで開催されたイベントの内容を、ダイジェストで紹介しましょう。 Adobe
PNGの画質を劣化せず極限までファイルサイズを落とす、たった1つの方法 | フリーソフトラボ.com
ウェブ上で使用される画像ファイルのフォーマットには、主にJPEG、GIF、PNGという3種類の圧縮形式があり、この中で可逆圧縮かつフルカラー、つまり元画像の画質を見た目上一切劣化させることなくファイルサイズを縮小できるのがPNGですが、欠点は高画質な分ファイルサイズが大きくなってしまいがちなこと。 このため、フルカラーのPNGをウェブ上で使用する場合は専用ツール（有名なものではAzConvPNGなど）を使用してファイルサイズの最適化を行い、画質を劣化せずにできる限りサイズを落とした上でサーバーにアップロードされることがよくありますが、それでも削減できるファイルサイズは良くて1割といったところでしょう。 実は、一般にはほとんど知られていませんが、この他にもフルカラーPNGを画質劣化なしに、さらに大幅にファイルサイズを削減できる裏技的な方法が存在します。やり方は少し面倒ですが、うまく使えば非常
継ぎ目のないシームレスな背景画像の無料素材とジェネレーターのまとめ
タイル状に継ぎ目なく配置できるシームレスな背景用の画像が作成できるジェネレーターと無料素材を配布しているサイトを紹介します。
オンラインでHTMLを編集、リアルタイムにプレビューできる「HTML Instant」
Dreamweaverなどの専用ソフトがあれば事足りますが、そういった環境がない場合に、HTMLソースの出来栄えを確認したいことだってありますよね。 今回はそんなとき、オンラインでHTML編集でき、かつリアルタイムにプレビューできるエディタをご紹介します。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! リアルタイムにプレビューできるオンラインHTMLエディタ「HTML Instant」 「HTML Instant 」は、HTMLタグを記述すると、その場でリアルタイムにプレビューを表示するオンラインHTMLエディタ。 リッチテキストエディタにもなっているので、タイピングすることなくHTMLタグを挿入したり、画像を掲載（URL指定）することもできます。 リアルタイムにHTMLソースをプレビュー ↑画
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
カラーホイール | カラースキーム - Adobe Color CC
食わず嫌いはいけないのでAdobe Muse CCを使ってみた。 | cityJumperWEB.com
「ITmedia News スマート」更新終了のお知らせ - ITmedia ニュース
Responsive Web Design Test Tool - Designmodo
ウェブデザインに使える16のジェネレーターツール - DesignWalker
http://e0166nt.com/blog-entry-862.html
