タグ

WEBデザインに関するnffsjjのブックマーク (285)

  • デザイン仕様書(ガイド) の書き方(初歩用)

    「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザインUXリサーチをもう一度ちゃんと理解しよう!Yoshiki Hayama

    デザイン仕様書(ガイド) の書き方(初歩用)
    nffsjj
    nffsjj 2014/06/09
    すり合わせ項目多い!
  • プレゼン資料やブログに使える、無料で商用利用可能なイラスト素材サイト15選

    プレゼン資料やブログ記事などを作成していて「ここにちょっとイラストがほしいなー」と思ったりしたときに重宝する、無料で商用利用可能なイラスト素材を配布しているサイトを集めてみました。 1. イラストAC イラストがすべて無料 「イラストAC」 2. ほらぱれっと 無料イラスト素材集ほらぱれっと / フリー&商用可TOPページ 3. ピクト缶 商用利用可のベクターイラスト素材集「ピクト缶」 4. ガーリー素材 ガーリー素材 | 無料フリーイラスト素材配布サイト 5. ストックマテリアル 商用可能な無料(フリー)のイラスト素材ならストックマテリアル 6. 無料素材倶楽部 アイコン・イラストフリー素材画像-無料素材倶楽部 7. エムスタジオ 商用利用/加工利用可能な無料フリーイラストアイコン素材 -エムスタジオ 8. クリップアートファクトリー クリップアートファクトリー | 全部無料で使えるテン

    プレゼン資料やブログに使える、無料で商用利用可能なイラスト素材サイト15選
    nffsjj
    nffsjj 2014/06/09
    めもっとこ。
  • グローバルメニューを使わないシニアのための『地味ナビ』改善ポイント | マミオン有限会社-パソコン・数学研修、法人研修

    シニアのユーザーテストを観察していると、トップページの多くの領域を占拠する「大型バナー」や、気合いを入れてデザインされた「グローバルメニュー」が全く機能していないシーンによく遭遇します。 こうしたユーザーは、代わりに次のような"地味"な機能を好んで使っているのです。 ・サイトマップ ・サイト内検索 ・よくある質問 これは、ITリテラシが少し高めの"そこそこ使える"シニアユーザーで特に顕著に見られる行動です。普段からウェブサイトを利用しているうちに、「何かわからないことがあるときには、ここを見ればいいんだ」と学習してきたようです。 しかしウェブ制作側としては、こうした地味な機能には、あまり制作リソースをかけていないのではないでしょうか? 今回はこれら3つの機能を『地味ナビ三兄弟』と命名し、ウェブが"そこそこ使える"シニア向けに最低限対応しておきたい施策についてまとめてみます。 「サイトマップ

    nffsjj
    nffsjj 2014/06/04
    ・サイトマップ・サイト内検索・よくある質問 地味ナビ三兄弟。なるほど。
  • ユーザー体験設計を軸にすすめるサービスデザイン

    事業戦略と組織のビジョンデザイン〜デザイン的アプローチで事業・組織づくりにどう取り組んでいるかのリアル〜

    ユーザー体験設計を軸にすすめるサービスデザイン
    nffsjj
    nffsjj 2014/06/03
    ユーザー体験設計の実例。
  • えっ?これも!?wordpressで制作されたハイクオリティWEBサイト100選!

    最近では新しいCMSがドンドン誕生してきており、その機能の進化は凄いと感じます。特にWordPressの成長は著しく、日国内でもwordpressを活用したサイトを当によく目にするようになりました。 実際に2014年5月29日の最新調査結果によると、世界のトップ100万サイト中、約22.3%のWebサイトでWordPressが活用されております。さらにCMSを使って構築しているWebサイトのうち、過半数以上の60.0%はWordPressで構築されているようです。 この数値はまだまだ増加傾向にあり、世界の開発チームが日々システム改善の開発・向上をおこなっております。その開発スピードも凄まじくwordpressの虜となる要因の1つでしょう。 参照データ:w3techs wordpressは、もともとのブログ作成CMSというスタートでしたが、今では企業サイトやECサイト等、幅広いジャンルで

    えっ?これも!?wordpressで制作されたハイクオリティWEBサイト100選!
    nffsjj
    nffsjj 2014/06/02
    コーポレートサイト、サービス、メディアまでさまざま。とりあえずメモ。
  • Illustratorでピクセル単位の作業を奇麗に行うための方法(イラレのピクセルずれ問題) - フリーでWebデザインとかやってる紳士。

    2017年の追記(CC2017向け) 次の点に留意して作業すればOK。基的にイラレのピクセル周りの扱いはモリモリ改善されているのでだいぶ楽になった。 次セクション「2016年の追記」との違いだけを列挙する。 変形パネルの「ピクセルグリッドに整合」と「新規オブジェクトをピクセルグリッドに整合」が廃止され、あらたに「コントロール」バーの一番右に「ピクセルのスナップオプション」が追加された。これをオンにする。またその中の詳細項目にも全部チェックをつけておく。 それでも作業中に何かのはずみであるオブジェクトが整数ピクセルじゃない状態になったら、「ピクセルのスナップオプション」の隣にある「選択したアートをピクセルグリッドに整合」ボタンをポチして位置調整する。私は今までコントロールバーは邪魔なので非表示にしていたが今はこのボタンのためだけに表示している(スクリプトでなんとかなりそうな気もするが調べて

    Illustratorでピクセル単位の作業を奇麗に行うための方法(イラレのピクセルずれ問題) - フリーでWebデザインとかやってる紳士。
    nffsjj
    nffsjj 2014/06/02
    1ピクセルのシャープな線をビシッとひきたいのに、いざやってみると2ピクセルの間抜けな線になったり…という問題の解決法
  • [Webデザイン]フラットデザインは日本語サイトに合わないんじゃないの問題について

    私たち日人は膨大な量の常用、非常用の漢字の意味を生活の中である程度知ってますし、地と獄という文字の組み合わせの持つ恐ろしいイメージをも知っています。ていうか、獄だけでもヤバそうに感じますよね。 反対に、英語圏の人がアルファベットの組み合わせの字面だけでその意味を想起するのかはちょっとわかりませんけど、少なくとも私たち日人にとっては26文字の組み合わせから何らかの印象を受けることは難しいんじゃないかと思います。つまり、英語は文章の内容がデザインの印象に影響を与えにくい(おそらく少なくとも日人は、文字のみからは英語であるという程度の印象しか持てない)はずです。 その代わり、アルファベットではバラエティー豊かなフォント等を駆使したタイポグラフィーが特にその役割を大きく担っていると考えてます。 で、漢字は表意文字としての側面が強く、そこにあるだけでその意味を知っている我々の受ける印象をある程

    [Webデザイン]フラットデザインは日本語サイトに合わないんじゃないの問題について
    nffsjj
    nffsjj 2014/05/31
    日本語にはそれにマッチするフラットデザインバリエーションが必要という話。
  • 新着フリーなwebサイトデザイン用PSDテンプレート(40個+) - いぬらぼ

    壁紙・写真8953 webデザイン3925 デザイン3291 絵画・イラスト・アート2193 動物1745 3D1724 UI1291 photoshop1083 フリー1004 風景834 自然821 かわいい689 wordpress679 素材652 テーマ632 チュートリアル626 フォント617 幻想的548 動画530 お洒落524 建築物501 犬430 テンプレ400 イラスト397 psd396 384 ロゴ331 jquery297 ブラシ296 プレミアム285 プラグイン274 テクスチャ260 CSS249 ミリタリー221 タイポグラフィ217 名刺213 gif212 都市風景210 インテリア206 宇宙203 エフェクト200 SF188 ポスター186 ファンタジー186

    新着フリーなwebサイトデザイン用PSDテンプレート(40個+) - いぬらぼ
    nffsjj
    nffsjj 2014/05/30
    フラットデザインがほとんど。コンテンツに集中できるデザインとして捉えてみてみる。
  • UXのプロがアドバイス「Web担のサイトはこう変えるべし」――やってみました「UX診断」 | Web担当者Forum

    UXのプロが岡目八目で切り込むのが快感今回、「UXデザインパッケージ」のサービスを体験してみたわけですが、結論から言うと、「さすがUXのプロ」という面と、「まさに岡目八目、外部に頼む価値」という面とがありました。 アドバイスは、現状のWeb担の見せ方をかなり大幅に変えるというものでした。つまり、現状をある意味で否定された形なのですが、それに対して違和感は抱きませんでした。というのも、そうするべきだとして示されている理由が理路整然としていた納得できるものであり、さらに自分でも薄々は感じていた「そうだよね」という部分をえぐられていた内容も多かったからです。 たとえば、アドバイスでは、「移動中などにスマホで友人のフィードで見かけた記事などが気になり、でもそのときは読まずにあとから読む」といった行動にうまく対応できるようにと指摘されています。 これは、言われなくてもわかっているはずのことです(実際

    UXのプロがアドバイス「Web担のサイトはこう変えるべし」――やってみました「UX診断」 | Web担当者Forum
    nffsjj
    nffsjj 2014/05/28
    大切なことがたくさん書いて有りそうな記事だったんで後で読む。
  • Nyle Engineering Blog

    OpenAIWhisper文字起こし25MB制限を解決するPHP, Laravel, ffmpegを使ったファイル分割の例 OpenAIAPIを使った音声の文字起こしは、今や多くのアプリケーションで利用されています。この記事では、特にWhisper文字起こしの25MB制限に焦点を当て、PHP, Laravel, ffmpeg

    Nyle Engineering Blog
    nffsjj
    nffsjj 2014/05/22
    ユーザーシナリオ。ちょっと作ってみよう。
  • ウェブのデザインやアイデアによい刺激をうける日本のウェブサイトのまとめ

    いつもは海外のウェブサイトをテーマごとにまとめて紹介していますが、たまには日のもと思い、まとめてみました。 デザインやアイデアによい刺激をうける国産のウェブサイトを紹介します。 海外のも定期的にまとめています。 面白いアイデアを使った最近のウェブサイトのまとめ -2014年3月 デザインや仕掛けが素晴らしいウェブサイトのまとめ -2014年1月 MIDORI AOYAMA DJ/プロデューサー Midori Aoyama氏のサイト。フラット・スクロールの定番のトレンドに斜めのグリッド、ポリゴン、アニメーションなど最新のデザインが非常にかっこいいです。制作会社はLETTERS, INC.で、今日リニューアルしたばっか!

    nffsjj
    nffsjj 2014/05/20
    いいまとめ。
  • エンジニアと険悪にならない!ステキなPSD、6つの約束|株式会社アクトゼロ|クリエイティブブログ

    こんにちは。みなさん5月病になっていませんか?私は新人社員でもないのに半分陥りかけています。友達とぱーっと飲んだりしてストレス解消していますが、いい加減肝臓がやられてしまいそうなので自重気味です。。 さて、デザイン作業が平行すると、ついついPSD(Adobe Photoshop)ファイルの細かいところが疎かになりがちですよね。デザインプレビューのときは見えていない部分でも、コーディング作業をするエンジニアには「このデザインどうなってるの?」「ちゃんと考えて作ってよ!(当たり前ですが)」となんとなくでは作業出来ないことがたくさんです。今回はこれさえおさえておけばきっと大丈夫。エンジニアと険悪にならないPSDファイル作りについて書きます。基中の基ですが、忘れたりしてしまうんです…(すみません) その1.マウスオン画像はある? 「すごく良いボタンを作れた!おしたくなるわこのボタン!」…で、こ

    エンジニアと険悪にならない!ステキなPSD、6つの約束|株式会社アクトゼロ|クリエイティブブログ
    nffsjj
    nffsjj 2014/05/20
    けっこうおおらかに作ってた(汗
  • これ結構使えた!サービスサイトやWordPressテーマで使われている小技まとめ

    作成:2014/05/19 更新:2014/11/01 WordPress > ウェブサービスサイトや最近のWordPressテーマで使われているエフェクトや小技をまとめました。今回またjQueryが多くなってしまいましたが、サイト制作時に一手間加えたくなる小技集です。 エンジニア速報は Twitter の@commteで配信しています。 もくじ サイト読み込み時 1.画像読み込み時、ローディング画像を表示/jQuery 2.読み込み時に文字を動かす/jQuery ヘッダー 3.文字の拡大・縮小/jQuery 4.入力補助/jQuery 5.伸縮するサーチボックス/jQuery コンテンツ 6.中心に水平線を入れる/CSS 7.均等に並べる/段組み/CSS 8.コンテンツが現れた時にアニメーションさせる/jQuery 9.マウスホバーで画像を拡大しキャプションを出す/jQuery 10.マ

    これ結構使えた!サービスサイトやWordPressテーマで使われている小技まとめ
    nffsjj
    nffsjj 2014/05/20
    知らないことばかりだ!
  • “良いWebサイト”ってどんなサイト? 良いサイトをつくるために必ず定めるべき3つの要素 | 初代編集長ブログ―安田英久

    「良いWebサイトの例を教えてください」「どんなサイトが良いWebサイトなのですか?」……仕事柄、こんなことを、たまに聞かれます。今日は、「良いWebサイトとは何か」「良いWebサイトを作るためには何が必要か」の原則を解説します。 「良いWebサイト」とはどんなサイトのことでしょうか。 キレイなデザインのサイト?情報がたくさん詰まっているサイト?便利なサイト?表示が早いサイト?使っていて楽しいサイト?スマホで見やすいサイト?マーケ寄りの人は、「人がたくさん集まるサイトが良いサイトだ」「コンバージョンが多いサイトが良いサイトだ」と言うかもしれません。 でも、当にコンバージョンが多ければ、すべて「良いサイト」なのでしょうか。 結論から言うと、「良いサイト」とは、「特定のユーザー層が、特定の状況で、特定のゴールを達成しやすいサイト」だと思っています。 だから、良いサイトを作るために定めておくべ

    “良いWebサイト”ってどんなサイト? 良いサイトをつくるために必ず定めるべき3つの要素 | 初代編集長ブログ―安田英久
    nffsjj
    nffsjj 2014/05/14
    「だれが、どんな状況で、どんなことを達成するため」を、ちゃんと定義
  • webnonotes.com - webnonotes リソースおよび情報

    This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.

    webnonotes.com - webnonotes リソースおよび情報
    nffsjj
    nffsjj 2014/05/09
    これは使えそうなのばかり。
  • 見栄えがよくなった!Web制作するなら知っておきたいjQueryプラグインまとめ

    作成:2014/05/7 更新:2014/11/01 Web制作 > ギャラリーサイトやECサイトなどで、最近よく見かけるデザインやエフェクトなど、制作前に知っておくと助かる、「どっかで見たことあるけど何だっけ?」といった感じのjQueryプラグインや最近のトレンドなるものをまとめました。ページにちょっとした工夫を凝らしたいとき、動きのある仕掛けでキャンペーンサイトを作りたいときに。 エンジニア速報は Twitter の@commteで配信しています。 もくじ メニュー 1.フィーチャーリスト 2.スティッキーヘッダー 画像エフェクト 3.マウスオーバーで画像にキャプション 4.イメージビューア 5.ズームインエフェクト 6.ブラーエフェクト スクロール 7.Infinite Scroll(無限スクロール) 8.画像シーケンス 9.横スクロール 10.フリック機能 レイアウト 11.画面全

    見栄えがよくなった!Web制作するなら知っておきたいjQueryプラグインまとめ
    nffsjj
    nffsjj 2014/05/07
    メモっとこ。
  • グラフィックデザイナーに知ってほしいWebのこと

    グラフィックデザイナーが作ったWebデザインをコーディングする、という案件を受けることがあります。 「デザインすること」については歴史が長いグラフィックデザイナーに一日の長があると思っていますが、Webにはグラフィックと違った特徴があります。 Webデザインを制作する際に知っておいてほしいことを挙げてみます。 タイポグラフィの制限 同じ文字でも、Webサイトには「画像」と「テキスト」が存在します。 簡単に区別すると、マウスカーソルで1文字ずつ選択できるものがテキスト、出来ないものが画像です。 画像はIllustrator・Photoshop等で制作したままの見た目を表示させることができますが、画像内に含まれる文章をGoogleなどに認識させにくいです。 テキストは情報をGoogleなどに認識させやすいのですが、フォント指定・装飾(袋文字や影など)・字詰めなどのタイポグラフィが苦手です。 画

    グラフィックデザイナーに知ってほしいWebのこと
    nffsjj
    nffsjj 2014/05/07
    よいまとめ。
  • 【UI/UX考察付】デザイナーが解説!女子向けアプリのデザインのポイント

    ここ最近、女子向けアプリが多数リリースされているのはご存知でしょうか。 SNS、ユーティリティ、ライフスタイル、ナビゲーションなどアプリのカテゴリも様々です。 そこで今回は、最近話題になっている女子向けiOSアプリ5サービスについて、それぞれのアプリの特徴・UI/UXのポイントと、女子ウケする共通エッセンスをデザイナー・企画視点で考えていきます。 恋するマップ-女子ちず- /ナビゲーション 特徴 女子向けの地図アプリ。 もうご存知の方も多いかもしれませんが、地図業界を震撼させた女子向けの地図アプリです。 通常の地図アプリ機能に加え、女子には必須なトイレからカフェ、サロンなどの情報も写真付きで確認することができます。 ポイント 一番の特徴であり、女子ウケポイントでもあるのが画面右上にある“チャーム”。 スマホの傾きをキャッチして揺れるだけですが、こうしたさりげないところにかわいい!と思えるポ

    【UI/UX考察付】デザイナーが解説!女子向けアプリのデザインのポイント
    nffsjj
    nffsjj 2014/05/07
    女子向きUI
  • 新着記事

    『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年3月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材/配色やWeb制作といった最新トレンドも公開中。

    新着記事
    nffsjj
    nffsjj 2014/05/02
    コンテンツファースト、ナビゲーションの洗練・成熟。まっとうな流れだな~。
  • Webデザイナーのためのマーケティング基礎講座

    Webデザイナーのためのマーケティング基礎講座 1. Webデザイナーのための マーケティング基礎講座 Marketing Basic Course for Web Designers 2. ∼自己紹介∼ 名前: 枌谷 力(そぎたに つとむ) 所属: 株式会社ベイジ 職業: 代表/プロデューサー/アートディレクター 略歴: 立教大学文学部史学科卒。1997年∼2001年まで株式会社 NTTデータでコンサル営業に従事。その後、Web業界に転 職。Webデザイナー/Webディレクターとして6年間制作 会社でWebデザインやWebビジネスの提案業務に携わる。 2007年にフリーランスとして独立。2010年に株式会社ベ イジ設立。現在に至る。 Copyright©baigie inc. All rights reserved. 3. ∼講義のゴール∼ “マーケティング視点”で デザインが見れるよ

    Webデザイナーのためのマーケティング基礎講座
    nffsjj
    nffsjj 2014/05/02
    濃い内容。あとで読もう!