PhotoshopとIllustratorのほぼ全機能を搭載したAdobe XD並みに軽いプロトタイピングツールが発売
私は ある出来事 をきっかけにAdobe製品をやめて他社の製品でWebデザインをしようと考えていました。 最初に考えていたのがPhotoshopの代わりにAffinity Photo、Illustratorの代わりにAffinity Designer、そしてAdobe XDの代わりにSketchまたはFigmaのようなプロトタイピングツールを使用しようと考えていました。 最初はこうしようと思っていた しかし、さまざまな可能性を試した結果、今までPhotoshopとIllustratorとAdobe XDの3つのアプリでおこなっていたことをたった1つのアプリで完結させることができ、しかもあらゆる作業をAdobe XD並みの速度でできる方法があるという事に気づきました。 たった1つのアプリで完結させることができるという事に気づいた ここ最近はたった1つのアプリでWebデザインを完結させるワーク
キャンセルボタンに色をつけてはいけない理由
キャンセルボタンをデザインする時に、カラーで悩むことはありませんか？ キャンセルボタンに色をつけてはいけない理由、ニュートラルなグレーが適している理由を紹介します。 キャンセルボタンのデザインがアクションボタンと同じだと、ユーザーは迷ってしまいます。キャンセルできることを明確にすることで、認知速度が上がります。また、ボタンが3個以上だったり、ラベルが違っていると、ユーザーは余計に戸惑います。 Why Cancel Buttons Should Never Have a Color by UX Movement 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 キャンセルボタンに色をつけてはいけない理由 ニュートラルボタンのためのニュートラルカラー キャンセルに適したラベルとは グレーを使う時は十分に暗くする キャンセルボタンはニュ
PCサイトでのグローバルナビの最小化は避けよう
PCサイトで、メインコンテンツのカテゴリーをドロップダウンメニュー内に格下げすると、あなたの提供するものをユーザーが見つけにくくなってしまう。 Killing Off the Global Navigation: One Trend to Avoid by Jennifer Cardello and Kathryn Whitenton on February 9, 2014 日本語版2014年5月12日公開 従来、グローバルナビゲーションはWebサイトの全ページに表示され、以下の2つの機能を果たしてきた： ユーザーがどこにいようと、彼らが容易にトップレベルのカテゴリーを切り替えられるようにする。 トップページを経由しないで入ってくるユーザーにも、そのWebサイト上で利用できるものをすぐに感じ取れるようにする。 最近、グローバルナビゲーションのカテゴリーをドロップダウンメニューの中に入れるW
59分割ヤバイ｜深津 貴之 (fladdict)
こばかなさんと、グリッド分割の話をしてるときに出たネタなのだけど。 グリッドの59分割ヤバイよねぇというお話。 画面を59分割すると、様々な比率で端数がでない。汎用的なグリッド分割できて素敵。個人的にはnoteで図表を描く時は、 ・幅620px ・天地左右マージン15px ・グリッド59分割 10pxを意識すると、色々と便利だと思う。 これ全部、ピクセルパーフェクトに分割できる。 1分割 = 590px grid 2分割 = 290px grid 3分割 = 190px grid 4分割 = 140px grid 5分割 = 110px grid 6分割 = 90px grid 8分割 = 65px grid （厳密には10の倍数でないので△） 10分割 = 50px grid 12分割 = 40px grid 15分割 = 30px grid 20分割 = 20px grid 24分割
Chromeの新機能がすごい便利！imgやiframeにlazyload属性を加えるだけでLazyLoad対応に
「Blink LazyLoad」と呼ばれるChromeの新機能は、表示領域外の画像やiframe要素のロードを遅延させることで、Webページのパフォーマンスを大幅に向上させます。 LazyLoadは今まではJavaScriptを使用していましたが、ブラウザのネイティブな機能として、imgやiframe要素にlazyload属性を加えるだけで簡単に利用できます。 「Blink LazyLoad」の機能と使い方、注意点を紹介します。 A Native Lazy Load for the Web 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 「Blink LazyLoad」の機能 セキュアなLazyLoadのポリシー 後方互換性 LazyLoadの有効化 参考資料 終わりに 「Blink LazyLoad」の機能 重要度の低いコンテ
SCONE - Get a Comfortable Development Environment.
必要なファイルだけを納品したいですか？それなら、SCONE Diff におまかせください。様々な条件で絞り込んだファイルを、ディレクトリ構造を保ったままコピーできます。 SCONE Diff SCONE Diff Pro About SCONE Diff ? SCONE Diff は、差分ファイルを抽出するためのアプリです。 編集したファイルだけを納品するのに、困ったことはありませんか？ バージョン管理のない案件であったり、画像ファイルだけを納品しなくてはならなかったり……。 SCONE Diff は、日時（秒まで指定できます）、拡張子、正規表現などでファイルを自在に抽出します。 また、不可視ファイル（「.」から始まるファイル）や、Adobe© Dreamweaver が生成する「_note」を除外したり、Sass や圧縮前の JavaScript など、納品したくないファイルを除外するな
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拡張
AMP（Accelerated Mobile Pages）の基礎知識から対応・導入方法まで！まとめ | 株式会社ウェブ企画パートナーズ
「Accelerated Mobile Pages」と呼ばれるGoogleが推し進めてきたプロジェクトですが、とうとう正式導入されることになりました。「Accelerated」は「加速される」という意味で、つまりモバイルページ高速化プロジェクト、といったところでしょうか。 まずは導入後のイメージを御覧ください。（英語ですが公式サイトのイメージよりもわかりやすいです） このように、検索結果にカルーセル形式で表示され、リンクをタップすると物凄いスピードでページが表示されます。 自分の携帯で試してみたい方は、下記URLのGoogle検索画面から「ニュース」というキーワードなどで検索してみてください。 http://g.co/ampdemo（※スマホからアクセスしてください） 既にTwitterやアメブロなど、様々なメディアがAMP対応を導入しています。 Googleが過去に発表してきた、モバイル
数千ページのワイヤーフレームを書いてきたWebディレクターがUI設計時に気を付けている８つのこと。 - 笑顔を創りたいWebディレクターの日常
なんかすごい思い付きで www.adventar.org に参加してみたんですけども。 気づいたらいつの間にか自分の日になっていて面倒くさくなってきて激しく後悔したびっくりしたという。 ぼくはWebディレクターでありデザイナーさんではないし、すてきデザインができるようなビジュアルセンスのようなものは、誠に残念ながら母上から授けられずにこの世に生を受けているものですから、"いわゆる"デザインはやらないんですが、その前の画面設計についてはワイヤーフレームなるものでいっつもやっておりますので、その観点からなんか書きましょうとそういうことですお母様（謎） そんなわけで、うぇぶぎょうかいのむめいでぃれくたーのお時間です。 Webディレクターとしてはえーと、もうすぐ丸１２年になります。そうするとまあ、たぶん数千ページは「ワイヤーフレーム」をつくってきたんじゃないかと思います。正確な数字はわかんないです
一体何個置けばいいの？「シェアボタンの蔓延」について考える。
SNSのシェアボタンはWebサイトにあって当たり前の存在になりました。確かにコンテンツがシェアされると嬉しいですし、またユーザーからのフィードバック情報として今後のコンテンツ作りの参考にもなります。 でもそんなシェアボタンもちょっと立ち止まって考えてみる必要があるかもしれませんね。日本だと（弊サイトもですが…）「Twitter、Facebook、はてなブックマーク、Google+、Pocket」などのシェアボタンを設置するのが「当たり前状態」になっています。でもこれって本当に当たり前なんでしょうか？ そこで本稿ではWordpres関連のジャーナリストであるAndreas Hecht氏のポストをご紹介します。 （※以下は、「The Invasion of Sharing Buttons: Why Less is More」を翻訳・再編集したものです） 本当にシェアボタンを増やせばシェアされや
Webデザインでよく使う要素やカラーやタイポグラフィに一手間加えて、マンネリ化から抜け出すデザインテクニックを解説
Webデザインで今、注目されているトレンドはデザイン的にも面白く、かなり使いやすいです。最新のデザインやトレンドな機能をサイトに加えて、いつもの同じようなデザインから抜け出すために使ってみるのもよいでしょう。 ここで紹介するトレンドは、よく使用している要素やカラーやタイポグラフィに一手間加えるだけで、新鮮なデザインに変わります。 Essential Design Trends, February 2016 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 DuoToneのカラースキーム Split-Screenのデザイン 共有スペースのタイポグラフィ 総括 DuoToneのカラースキーム DuoToneのカラーパレットは存在自体は昔からありましたが、最近の使い方としてはフルスクリーンの画像にDuoToneのグラデーションを加えて強いイン
Googleがウェブマスター向けガイドラインを大幅改定 ―― いったい何が変わったのか？
[レベル: 初・中・上級] Googleは、ウェブマスター向けガイドラインを大幅に改定しました。 この記事では、主だった変更点を抽出して解説します。 認識しておきたい変更点が数多くあります。 新しいウェブマスター向けガイドラインの主だった変更点 セクション分け 以前は、次の3つのセクションに大きく分かれていました。 デザインとコンテンツに関するガイドライン 技術に関するガイドライン 品質に関するガイドライン 現在は、2つに分かれています。 一般的なガイドライン 品質に関するガイドライン 内容が減ったわけではなく、「デザインとコンテンツに関するガイドライン」と「技術に関するガイドライン」の2つが、「一般的なガイドライン」にまとめられた感じになっています。 「一般的なガイドライン」はさらに次の3つのサブセクションに分かれています。 Google がページを検出できるよう手助けする Google
Google Structured Data Testing Tool
SEO fundamentals Introduction Search Essentials SEO Starter Guide How Google Search Works Do you need an SEO? Crawling and indexing Sitemaps robots.txt Meta tags Crawler management Removals Canonicalization Redirects JavaScript SEO Ranking and search appearance Visual Elements gallery Title links Snippets Images Videos Structured data Favicons Site-specific guides Ecommerce International and multi
企業用Facebookページでやった方がいいカスタマイズ一覧 - マーケティングオートメーションツール SATORI
Facebookページを作った後は効果的なカスタマイズを行いましょう。 以前ご紹介した【2017】Facebook企業アカウント／ビジネスアカウント作成方法でFacebookページの基本を押さえたら、次はさらにユーザーに｢見てみたい！｣気持ちを起こさせるオリジナル要素を加え、さらに閲覧数の獲得、いいね！の獲得、消費行動への誘導、ブランディングの確立を目指しましょう。 まずはここを押さえよう 基本情報をチェック閲覧者が好んでアクションする効果的なFacebookページカスタマイズ一覧Facebookページカスタマイズ事例をまとめました まずはここを押さえよう 基本情報をチェック 写真や文章1つで大きく閲覧数が変わることもあります。作成したFacebookページをもう一度見直して、最初に押さえるべき基本情報を再度チェックしましょう。 プロフィール写真をいれているか？ 会社のロゴまたは製品のロゴ
こんな便利なのがあったとは！Web制作やビジネスに欠かせない無料ツール・サービス・素材 400+種類 総まとめ
こんな便利なのがあったとは！Web制作やビジネスに欠かせない無料ツール・サービス・素材 400+種類 総まとめ +400 Awesome Free Tools To Build Your Business 5つのジャンルに、Web制作やビジネスに役立つさまざまな無料ツール・無料サービス・無料素材がまとめられています。 Business -ビジネス サイト作成・ロゴ作成・請求書作成・法律文書作成・アイデアのマネジメント・かっこいいドメインなど Marketing -マーケティング ライティングツール・ブログツール・サイト分析・SEO・画像最適化・画像編集加工・マーケティング情報・ソーシャルメディア・カスタマーサービス・A/Bテストなど Design & Code -デザイン・コード デザインの無料素材・カラーや配色ツール・デザインのインスピレーション・写真素材・フォント・アイコン・コードやマ
まだTinyPNGで消耗してるの？「pngquant」+「Automator」で画像圧縮にかける時間を限りなくゼロにしよう！ - HOME'S Designer's Blog ｜ ホームズ デザイナーズ ブログ
2015-06-11 まだTinyPNGで消耗してるの？「pngquant」+「Automator」で画像圧縮にかける時間を限りなくゼロにしよう！ こんにちは。社内で最もカタチから入るWebデザイナー、アズマです。 最近は会社にコーヒーミルを持ち込んで手挽きコーヒーを淹れていますが、味の違いは完全にわかりません。意味ない。皆さん、デザインしてますか？ デザインはとても楽しいですね。 書き出したPNG画像を圧縮している時間を除けば。 画像圧縮にかける時間を圧縮したい！ ブラウザやアプリで表示する速さを少しでも上げてサービスの価値を高めるためには、 デザインしたファイルからPNGファイルを書き出すときに 圧縮して軽量化する必要がありますね。 圧縮率の高さとパンダのキモさに定評のあるTinyPNGなどのWebサービスを使っている方も多いのではないでしょうか。 ……が、しかし、この作業
Paletta - HSV Color Palette for Every Programmer
Palettaは顕色系 (色相, 明度, 彩度) をベースに「調和のとれた色」だけを集めたカラーパレットです. 色を選択すると, 周囲の色が同系統の色に変わります. 画面上部のResetボタンを押すと, 色の選択が解除されます. カラーコードをクリックするだけでコードをクリップボードへ簡単にコピーできます. 詳しく
CMSから静的サイトジェネレータによる運用に切り替えるのは、まだまだ世間受けしにくいという話
以前書いた「デザイナーも静的サイトジェネレーターが使えた方がよいのではないか」の記事が最近よく見られているので、追い記事を書いてみようかと思います。 静的サイトジェネレーターはお客様サイトに使えるのか 前回記事で紹介したように、このブログは「middleman」というツールを使って静的サイトとして運用しています。なので、ファイルも HTML / CSS / JavaScript のみとシンプルです。 静的サイトのメリットは、CMS で必要な DB や サーバ側のシステムがいらず、セキュリティリスクが少ないことと、実体のあるファイルを読み込むため動的サイトよりも早いことです。 また、一定のスキルと知識があってターミナルを使うことに抵抗のない Web デザイナーさんであれば、静的サイトを構築する様々な便利ツールがあるので難しくはありません。 ただこれだと、お客様に静的サイトジェネレーターなどを
【料金表第2弾】Webサイト制作いくらかかるか？フリーランス・SOHOの制作代金 100社まとめ - デザインを相談してみよう
Webサイトの制作料。機能、デザイン、コンテンツ、ページ数によって大きく異なることは容易に想像できますが、一般的な中小企業がデザインを頼むとしたらいくらかかるのでしょうか？ チラシのデザイン料を調べた前回に引き続き、実際に料金表を公開されているデザイナーやウェブ制作会社を検索してみて、フリーランスやSOHOの方を中心に100社ほどまとめてみました。今回も、会社名とURL、料金表部分のスクリーンショットを掲載しています。 ウェブ制作のお仕事で独立・開業したばかりの方や、する予定の方にとっても、いくらチャージすればよいのかを考える際の参考になれば幸いです。 追記：現在、広告用バナー、LP（ランディングページ）、アプリ用アイコンなどの制作料金についても調べています。興味がある方は、公開時にお知らせが届きますので、もし良かったら読者登録していただけますと幸いです。 アルファーム http://al
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
