Web制作者のためのおすすめChrome拡張15
2018年1月16日 Webサイト制作, 便利ツール 普段使っているChromeをより便利にしてくれる拡張機能。私も様々なものを入れていますが、その中でもWeb制作時に使える便利拡張をいくつか紹介します。Firefoxに対応しているものもありますよ！ ↑私が10年以上利用している会計ソフト！ Web Developer Chrome拡張｜Firefox Add-on｜GitHub｜公式サイト Webに携わる人は入れておいて損はない拡張のひとつ！長年利用させていただいてます。1クリックでCSSやJavaScriptを無効化したり、画像の非表示、様々なデバイスサイズでの表示、クラスやID名の表示、定規やカラーピッカーまで揃っています！カラーピッカーはCSSで定義されたものだけでなく、画像からも抽出できるのがすごい。日本語版もあるので試してみてくださいね。 CSS Peeper Chrome拡張
ワイヤーフレームの作り方のコツ｜制作時や評価時に意識すべきこと | 株式会社PLAN-B
サイト制作をする前に必ず作らないといけないワイヤーフレーム。 「ワイヤーフレームってデザインの下書きでしょ？」 というような認識の方もいらっしゃるのではないかと思いますが、それは間違いということをこの記事を読んで知っていただきたいです。 これからワイヤーフレームを作成しないといけないという方や、制作会社からあがってきたものを評価しなければならないという方は、ワイヤーフレームをなんのために作るのかをぜひ知っておいてください。 PLAN-Bクリエイティブユニットのワイヤーフレームの考え方をご説明します。 ワイヤーフレームはデザインの下書きではないワイヤーフレームに対する勘違い作成する側も評価する側も一度は陥ってしまうのではないかというのが、ワイヤーフレームにデザインを求めてしまうことです。自分自身初めてTOPページのワイヤーフレームを作成した時に、コンセプトを表現するようなデザインにするにはど
Adobe XDがどんどん便利になってる！Web制作に使える無料素材のまとめ
先週のCreative Cloudアップデートで、Adobe XDが正式版としてリリースされました。Adobeユーザーはもちろん、Windowsがメイン環境の人にもUI/UXデザインの本命と言えるでしょう。 昨日のAdobe Creative Cloud道場のライブ動画ではAdobe XDの近い将来の機能として、タブレット用のレイアウトを作成したら、人工知能Adobe Senseiでスマホ用の複数のレイアウト候補を自動作成し、あとはそこから選び出せるようになるとのことです。作業には時間をかけず、クリエイティブに時間をかけることができますね。 Adobe XDでWebサイトやスマホアプリを制作する際に役立つ、ユーザーフローやワイヤーフレーム、グリッド、スタイルガイド、UIコンポーネントなどの無料素材を紹介します。
ECサイトで破ってはいけない８つのルール
ECサイトは他のジャンルのサイトに比べて独自の文脈や風習が多く、私たちはそれに慣れ親しんでいます。ユーザーは習慣の生き物ですので、ECサイトをデザインする際は、その慣れ親しんだ文脈を無視するわけにはいきません。 今回はECサイトにおいて「破ってはいけない」ルールをガイドラインとしてまとめました。 1. ナビゲーションのラベル あなたの扱う商材のブランディングは大事ですし、Webサイトにおいてもその一貫性を保つことは非常に重要です。しかしこれをやりすぎると、とりわけナビゲーション部分に関してはUXを損なうケースがあります。 例えばもし、カテゴリーページに曖昧な名前をつけたりしてしまうと、２つの弊害が生まれてしまいます。 １つ目は、ユーザーがあなたの意図していることを理解できないという弊害です。 HowiesのサイトではLITBという項目があります。これは何を意味するのでしょうか？ これは「L
編集者なら持っておきたい「本当に使える」無料の画像編集ツール5選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。エディターの坂口です。まだまだフォトショが使いこなせないので、フリーの画像編集ツールを使い倒しています。 最近、画像編集スキルが求められる案件が急激に増えたため、より簡単で確実なツールを求めて取捨選択を行いました。その結果、「最低でもこの5つを押さえておけば大丈夫」と言える無料の画像編集ツールが浮かびあがって参りましたので、この機会にご紹介したいと思います。 [目次] 必要な画像編集はこれ一本で大体クリア！「PhotoScapeX」 動画をGIFに一発変換「PicGif Lite」 GIFの容量を瞬間圧縮「Compressor」 集中線が思いのままに「集中線追加ツール」 画像に矢印や枠線をつけたいなら「Skitch」 ※本記事は主にmacユーザー向けの内容となっておりますが、ご紹介する5つのうち、「PicGif Lite」以外はwindowsでも利用可能です 必要な画像編集はこ
MONO AIR | トンボ鉛筆
MENU トップ エアータッチシステム エアータッチシステムの仕組み エアータッチシステムをもっとわかりやすく エアータッチシステムの効果 モノエアーをもっと知る 商品ラインナップ キャンペーン ムービー
ついに「Adobe XD」の日本語版リリース！Webサイト制作がはかどり過ぎて楽しい | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。長野チーム・デザイナーのずんこです。 突然ですが、今日は何の日かわかりますか？ ・ ・ ・ 答えは、デザイナーのみなさんお待ちかねの「Adobe XD」日本語版のリリース日です！ webデザインの現場でも存分に使える「Adobe XD」。アドビさんのご厚意とPRのため、一足早めに使わせてもらいました。 早速、その使用感についてレポートしていきます。 そもそも「Adobe XD」とはSketchやProttのいいとこ取りソフト 「Adobe XD」の正式名称は「Adobe Experience Design CC」。新しいUXデザインツールとして、プレビュー版が今年の春にリリースされ話題になりました。 公式の記事はこちら。 アドビの新しいUXデザインツール、Adobe XD (Preview 1) 登場！ 使い方をクイックに解説 「Adobe XD」は、デザインが作成できるだけで
必要な物は紙とペンだけ！ペーパープロトタイピングのススメ
まずは紙。家にあるチラシの裏の白い部分でも可能なのですが、方眼のものが製図しやすいです。お気に入りのノートを使ってみてください。後述するプロトタイプ制作ツールのMarvelから、無料のプロトタイピング用紙（PDF）が配布されているので、こちらを使ってみてもいいですね。 基本的にどんなペンでも構わないのですが、太いペン、細いペン、薄い色（灰色）のマーカーの3種類あれば文句なしです。マーカーはなんやかんやコピックが使いやすいのかなーと思います。 その他 紙とペンだけでOKですが、よく使うアイコンが手軽に描けるUI Stencilsという定規兼ステンシルがあると便利です。iPhone用ステンシルだけではなく、様々な種類が用意されているので、興味のある方はUI StencilsのWebサイトを覗いてみてくださいね。 ペーパープロトタイプの描き方 1. ざっくりとしたレイアウト組み まずは画面をレイ
新人Webデザイナーへ向けた、考え方から実践までの話 | Web制作に関するブログ | 株式会社シロクロ
Web制作会社 シロクロ Web制作に関するブログ新人Webデザイナーへ向けた、考え方から実践までの話 新人Webデザイナーへ向けた、考え方から実践までの話 2016年6月15日 Webデザイナーとしての心構え、普段やるべきこと、実際にデザインするときの手順など、弊社の新人デザイナーに伝えていることをまとめました。学生や新人Webデザイナーの方に役立てていただければ幸いです。※ディレクターが打ち合わせやワイヤーフレーム制作などを担当し、デザイナーは純粋に画面を作る役割として話を進めます。 はじめに何のためのデザインか色んなWebサイトを見ることWebサイトを模写することデザインする前にWebサイトの目的／目標を理解する同業他社のWebサイトを調べるワイヤーフレームのままデザインしないデザイン作業時世界観（トーン&マナー）とレイアウトを決める文字、色、装飾、余白のルールを決める必要であれば構
ワイヤーフレーム、モックアップ、プロトタイプの違いとは？ | POSTD
開発者と仕事をしていると、スケッチ、ワイヤーフレーム、モックアップ、プロトタイプといった用語をよく聞くかと思います。しかし、あなたはこうした用語の意味を本当に理解しているでしょうか？ ワイヤーフレームやプロトタイプは、それぞれどんなときに利用するのか、知っていますか？ まず、アプリの構築を始める前に、スケッチ、ワイヤーフレーム、モックアップあるいはプロトタイプからスタートするべきだという理由を見てみましょう。 構築したいものがどんなものか、ブレインストーミングをしたり考え出したりするため。こうした作業により、あなたの期待するものが明確になる。 開発者にかかる費用を節約し、構築に必要なものを明らかにすることができる。 こうした作業の結果は投資家や最初の顧客、共同設立者に提示する目的で使える。 顔を突き合わせることのない開発チーム とコミュニケーションを取るためには、これらの用語を正しく区別し
デザインに自信がない人も大丈夫！無料UIキットでWeb制作スピードをアップしよう。
ウェブサイトのデザインが決まらないときは、PhotoshopやSketchで編集できる、UIコンポーネントやPSDテンプレートを活用してみましょう。アイデアを形にしやすくし、写真や文字テキストを編集するだけ手軽にデザインを完成させることができます。 今回は、2016年のデザイントレンドを盛り込んだ、無料ダウンロードできる UI コンポーネントや PSD テンプレート素材をまとめてご紹介します。本格的にデザインをはじめる前のモックアップやワイヤーフレームとしても活用できるアイテムを中心に揃えています。 詳細は以下から。 Web制作スピードをアップする、無料UIコンポーネント、PSDレイアウト素材まとめ Chat UI Kit ミニマルなレイアウトに、カラフルな配色を活用したUIコンポーネントは、Photoshop と Sketch 用ファイルがそれぞれ用意されています。 Carbon Mat
【入門編！】Webデザインをする上で役立つツールまとめ
Webデザインを入門から学びたい人向けに便利なツールを紹介しています。Webデザインと一言で言っても、配色やフォント、バナー作成や画像のサイズなどいろいろなスキルが求められるものなので、使えるようになっておくと良いでしょう。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 Webサイトをゼロからデザインするのはなかなか大変なことです。配色やレイアウト、使用するフォントや画像など考えなければならないことがたくさんあります。 そこで今回はWeb
未経験Webデザイナーが独学で勉強する方法
Webデザイナーに求められるスキルは、HTML・CSS・JQuery・WordPress・タイポグラフィ・配色・コピーライティングなど多岐に渡ります。より多くの知識・技術を身につけていれば、Webデザイナーとして活躍できるチャンスは増えるでしょう。そこで今回は、これらのスキルを独学で学ぶための方法をご紹介します。 ＜この記事に関連する記事＞ 初心者Webデザイナーの独学におすすめの本10選 グラフィックデザイナーからWebデザイナーに転職するには？ Webデザイナーになるには？未経験のための実践的フロー 目次 Webデザイナーの仕事内容と必要なスキル Webデザインを独学で勉強する方法 独学でWebデザインを学習するときにおすすめのサイト 独学をするときの注意点 まとめ Webデザイナーの仕事内容と必要なスキル 独学で勉強をする前に、Webデザイナーの仕事内容とそれに伴って必要となるスキル
Web制作時に備えておきたい便利なチートシートのまとめ -Bootstrap, WordPress, CSS3, Git, SublimeTextなど
BootstrapやFoundationなど人気のフレームワーク、CSSの各フレームワークの比較、WordPressのテーマ作成やコピペで利用できるコード集、Gitのコマンドやフロー、iOS/Androidのグラフィックガイドライン、ChromeのデベロッパーツールやSublimeTextやEmmetなど、Web制作に役立つ便利なチートシートを紹介します。 紹介している主なチートシート Bootstrap 3, Foundation 5のチーシート CSSの各フレームワークの比較 WordPressのチートシート iOS, Androidのデザイン用のチートシート jQueryのチートシート HTML5, CSS3のチートシート ファビコンのチートシート 検索エンジン最適化2015年版のチートシート Chromeのデベロッパーツールのチートシート SublimeText, Emmetのチー
Web制作会社のデザイナーが残業まみれになる本当の理由とは？ - Tortoise Shell
残業が多いとよく言われるWeb制作会社ですが… Web制作会社には、よく次のようなイメージがつきまといます。 激務 残業だらけ 給料が安い どうしてWeb制作会社のデザイナーは残業まみれになってしまうのでしょうか。 営業が安い値段でスケジュールを考えずに案件を取ってくるだとか、クライアントから納期直前で無茶な修正以来があったりだとか、様々な要因があると思います。 しかし、理由の本質はそこではありません。 どうして残業まみれになってしまうのか？ 残業まみれになる本当の理由とは、受託開発という性質上、売上が人月計算で長時間働くことがそのまま会社の利益になるような事業の構造になっているからです。 ソシャゲーを思い浮かべていただければ分かりやすいと思いますが、あれはユーザーにお金を払わせるための課金システムを実装してるから、売上の上がる仕組みが全て自動化されていて、人が動かなくてもお金が入ってきま
デザイナーがバナー制作でお小遣い稼ぎをするための全知識 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、ソウルドアウト株式会社のなごです。 Web制作で収入を得たい・増やしたい人にとって、バナー制作は空いた時間でサクッとできるのでおすすめです。 昨今は、クラウドソーシングによってバナー制作を外注する企業が増えてきているので、そこまで高度な技術がなくとも、5,000円～50,000円のスポット収入が得られます。 今回は、バナー制作によって、簡単にお小遣い稼ぎをするために必要な知識をすべてまとめました。社会人や学生、主婦の方など、空いた時間にお小遣い稼ぎをしたい人にも、Webデザイナーとして独り立ちするために実績を積みたい人にもおすすめです。 「成果が出る」バナーを作るには？ バナー広告の制作には、デザインスキルだけでなくWebマーケティングやコピーライティングのスキルも重要です。とくに副業や就転職を見据えてプロレベルのスキルを身に着けたい……という方は、Webの知識を総合的に学べる
CSSだけで作る「多階層」なドロップダウンメニュー
以前書いた「CSSだけで作る動きのあるドロップダウンメニュー｜Webpark」という記事が検索エンジン経由でそこそこアクセスがあり、よく質問をいただきます。そのなかで多階層にできないのかという質問があったので作ってみました。 IE7の場合擬似要素が使えませんので、次の階層があることを示す矢印が表示されません。ドロップダウンの機能はIE7でも問題ありませんので、IE7に対応させる場合は矢印を画像にするなどすればよいと思います。 それではHTMLからいきます。 HTML かなり長くなるのでメニュー1の部分だけ載せています。 <ul id="dropmenu"> <li><a href="#">メニュー1</a> <ul> <li><a href="#">子メニュー</a> <ul> <li><a href="#">孫メニュー</a></li> <li><a href="#">孫メニュー</a>
Webデザインのスキルを磨こう！Webサイト模写のススメ
2014年8月17日 Photoshop, Webデザイン 先日、Webデザイナーになってもうすぐ2年がたつというMさんから、「どうすればデザインのスキルを磨くことができるのか？」という旨のご相談を頂きました。今回は彼女の相談メールでもふれられている、デザインのスキルアップに有効なWebサイトの模写のやり方について掘り下げてみようと思います！ ↑私が10年以上利用している会計ソフト！ 頂いたご相談メール 実は最近スランプぎみになっていて、サイトデザインを作成してもなぜかダサい、野暮ったいデザインになってしまいます。 デザインスキル向上させるために、いいデザインのサイトを模写するといいときいて模写もしてみたのですが、ぴったり一致するように作るのに意識がいってしまい、あまりデザインスキルが上がったと実感できないでいます。（模写したデザインを自分のオリジナルで活かせない） もし模写するときはどう
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ブロガー必見！アイキャッチ画像を緊急で差し換える方法 - はてな村定点観測所
スマホ対応に熱心なのはいいが、中途半端な最適化なら無いほうがまし！ | 生田昌弘の「Web担当者に喝！」
