タグ

webデザインに関するQwerty401のブックマーク (46)

  • FONTFREE

    フォントフリーについて FONT FREE(フォントフリー)は、無料で使える日語フリーフォント投稿サイトです。 漢字やカタカナ、ひらがなをはじめとした日語の無料フォントを、明朝やゴシック、手書きなどのカテゴリーから探すことができます。紹介ページリンクからダウンロードもすぐにできます。 あなたの欲しかったフォントが、すぐに見つかりますように。

    FONTFREE
  • Webアクセシビリティ対応で「音声読み上げ・文字拡大・色変更」は的外れ。本当に必要なのはSEO? | 弁護士ドットコムがアクセシビリティに本気で取り組む狙い

    なぜ、的外れなのでしょうか? それは、実際にユーザーが使っているシーンを考えればわかります。たとえば、PCを起動してからサイトのコンテンツを読むまでの流れを書き出してみましょう。 ブラウザを立ち上げるアドレスバーに文字列を入れて検索する検索エンジンの検索結果から該当のコンテンツを探すサイトに訪問し、コンテンツを読むサイト側で用意した支援機能は、4の「サイトに訪問し、コンテンツを読む」の段階になって初めて使えるものです。サイトに「音声読み上げ機能」があれば、そのサイトのコンテンツを読み上げることはできますが、他のサイトのコンテンツを読むことはできません。そしてもちろん、ブラウザを立ち上げたり、検索文字列を入れたりする際にも、この機能を使うことはできません。 もし、このような支援機能にニーズがあるとすれば、普段は目で見てアクセスする人が「何らかの事情でそのサイトのコンテンツだけ読み上げで聴きた

    Webアクセシビリティ対応で「音声読み上げ・文字拡大・色変更」は的外れ。本当に必要なのはSEO? | 弁護士ドットコムがアクセシビリティに本気で取り組む狙い
    Qwerty401
    Qwerty401 2018/04/24
    マシンに対するリーダビリティを高めるためにalt属性なんかをちゃんと書く癖があれば、目的ページ見つからないときにユーザがググり直すとき捗る
  • Web制作に超便利なおすすめ無料ワイヤーフレームツール4選 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    無料で便利なワイヤーフレームツール4選 POP https://marvelapp.com/pop/ スマートフォンから手書きのワイヤーフレームを撮影して、ページとページを紐付けることができるアプリです。 こちらの動画を見ていただく方が、言葉でご説明するより早そうです。 スマートフォンサイトのワイヤーフレームはどうしても縦長になりがちな印象がありますが、このように実際のスマートフォンから確認ができれば、そこまで気にならなくなるかもしれません。プレゼンテーションにもオススメです。 Justinmind Prototyper http://www.justinmind.com こちらはインストールして使用するツールです。 インストールすると、最初にデバイスを選択する画面がポップアップで表示されます。 次に作成するサイズを選択します。 するとこのような画面になります。 あとは必要な要素を左からド

    Web制作に超便利なおすすめ無料ワイヤーフレームツール4選 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • Webサイトガイド類の整備 | 政府CIOポータル

    内閣官房情報通信技術(IT)総合戦略室では、各府省等のWebサイトが利用者にとって、より使いやすいWebサイトになるよう、デザインポリシーやアクセシビリティの統一等、Webサイトの構築や見直し時に留意すべき事項を以下の各種ガイドに示しています。 各種ガイドの内容については、Web関連技術のトレンドやニーズ等に応じて、定期的に改善と拡充を行っていきます。 日語版Webサイトガイド 名称 日語版Webサイトガイド バージョン 1.1 対象 各府省等 概要 各府省等がWebサイトを構築又は見直しする際のデザイン、府省横断的に情報収集を容易にするためのタグの統一、利用者視点での情報提供等を行うための留意すべき事項を示したもの。 英語版Webサイトガイド 名称 英語版Webサイトガイド バージョン 1.0 対象 各府省等 概要 英語版のWebサイトを対象に留意すべき事項を示したもの。 政策目的別

  • 国税庁Webサイト、全URL変更で混乱 サイト内検索も役立たず、「無限ループ」状態に

    国税庁のWebサイトがリニューアルされ、ほぼすべてのURLが変わった。旧URLはすべてトップページにリダイレクトされているが、トップページからサイト内検索を使っても旧URLが表示されるため、トップページに「無限ループ」してしまう状態だ。 国税庁のWebサイトが3月31日にリニューアルされ、トップページを除くほぼすべてのURLが変わった。旧URLにアクセスすると、国税庁のトップページにリダイレクトされる仕様だ。トップページにはYahoo!検索を使ったサイト内検索機能があるが、4月2日午後3時現在、これで検索しても過去のURLがヒットし、トップページにリダイレクトされてしまうため、「トップページの無限ループ」「目的のページにたどり着けない」と混乱が起きている。 国税庁広報広聴室は「検索が現状、機能していない状態だ」と認め、検索エンジン側にURL更新のリクエストを出しているという。検索エンジンが

    国税庁Webサイト、全URL変更で混乱 サイト内検索も役立たず、「無限ループ」状態に
    Qwerty401
    Qwerty401 2018/04/03
    “政府共通のWebサイトの構築ルールに則り、ディレクトリなどを見直した結果、ほぼすべてのページでURLが変わることになったという。”
  • Webデザインのスタイルガイドの作り方

    Webサイトの制作はどんどん複雑化しており、1人で行う仕事ではなくなってきています。サイト制作では、ビジネスの目的に合わせた一貫性のあるデザインによって、快適なユーザー体験を作り出すことが重要です。 Webサイトを分割してチームでデザインをするときにチームメンバーが共通認識を持つには、デザインドキュメントまたはWebデザインのスタイルガイドを作成することが有効です。これは、エンジニアがデザインを変更してしまうことを防ぐのにも役立ちます。 異なるページの間に一貫した体験を作り出すために、スタイルガイドを用意するのはとても有効です。また、今後の開発やサードパーティ製品が生まれた際も、ブランドのガイドラインに沿い、ブランドの一部として知覚されるようにやすくなるでしょう。 Luke Clum氏は、Webデザインの第一歩としてスタイルガイドを利用することについて、昨年簡単に紹介をしました。この記事で

    Webデザインのスタイルガイドの作り方
  • デザイン仕様書(ガイド) の書き方(初歩用)

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

    デザイン仕様書(ガイド) の書き方(初歩用)
  • 「ボタン」のウェブデザインはどのように進化してきたのか?

    by webtreats ウェブサイトやアプリにおいて不可欠な要素である「ボタン」が、いかにしてデザインを変えてきたか、また効果的なボタンを作るために重要な要素について、ソフトウェア開発者のNick Babichさんが解説しています。 Buttons in UI Design: The Evolution of Style and Best Practices - UX Planet https://uxplanet.org/buttons-in-ui-design-the-evolution-of-style-and-best-practices-56536dc5386e ボタンは毎日目にするインタラクションデザインの要素のひとつです。ボタンは非常にシンプルな要素に見えますが、Babichによれば、ボタンのデザインは数十年の間に大きく変わっていて、常に理解しやすく明瞭なデザインが求められ

    「ボタン」のウェブデザインはどのように進化してきたのか?
    Qwerty401
    Qwerty401 2016/07/30
    MITの研究(PDFファイル)では、平均的な人間の指の腹の大きさは10~14mm、指先の大きさは8~10mmだと判明しています。つまり誤タップを防ぐためにもボタンの大きさは10mm×10mm以上に設定するべきです
  • Web制作者のためのワイヤーフレーム講座「役割と考え方」編 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    オハヨウからオヤスミまで。ディレクターの鮫島です。 今回から全3回にわけて「ワイヤーフレーム」の考え方や書き方などをお届けいたします。 第1回となる今回は、ワイヤーフレームの役割や考え方など思想的な部分をお伝えします。 第2回はワイヤーフレームの作成前に準備するべきことなどをお伝えし、第3回は実際にどう書いたらいいか、などをお送りする予定です。 ワイヤーフレームの書き方や考え方は人それぞれ微妙に違うかとは思いますが、私の考え方が少しでも何かの参考になれば嬉しいです。 ワイヤーフレームとは 簡単に言えば「何を・どこに・どのように」が記載された「サイト設計図面」です。 つまり、制作するウェブサイトの要素や機能、情報を設計図面のように配置しておき、お客様や制作者と認識を合わせるためのものです。 例えば家を建てるとき、設計図面がないと大工さんはパニックになりますよね。きっと。大工さんみんなの認識が

    Web制作者のためのワイヤーフレーム講座「役割と考え方」編 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • Sneakpeekit Sketch Sheets

    Catch insights, sketch ideas.Printable Wireframe Templates for Designers Planning apps or websites is not always completely digital: sometimes you may need pencil, paper and some good sketch sheet templates to speed up your creative process. Precision GridMultipurpose grid with column marks A generic A4 grid template with column marks ideal for website wireframes as well as icon, font and logo des

    Sneakpeekit Sketch Sheets
  • UX・UI・IAやアクセシビリティの「専門知識」が増えるまとめ - コムテブログ

    TL;DR コーディングやシステムは分かるけど、最終的に使いやすい設計やクライアントさんが納得するようなデザインにならない。納品後に使いにくい箇所があると言われる。そうなる前に「何となく進めない」ようにサイト制作やサービス・アプリを作成する前の段階で知っておきたい知識。UXUI・IA の違いが漠然としているときに。 IA(情報アーキテクチャ) 1.基礎知識 情報アーキテクチャとは Web サイト全体の設計図、情報を分かりやすく伝えること。主にIA(インフォメーションアーキテクト)が担当します。国内ではディレクターが担当する会社も多いと思います。情報アーキテクチャはサイトを見た目の印象だけでなく、目に見えないサイト構造をデザインすることで、わかりやすいサイトにする技術。 [スライド] 社内の IA(情報アーキテクチャ)研修の講師をしてみた。:そのフォローアップ | future-proof

    UX・UI・IAやアクセシビリティの「専門知識」が増えるまとめ - コムテブログ
  • Prott Blog - ついに!Prott for Androidをリリースしました!

    ついに!Prott for Androidをリリースしました!Web(ブラウザ・MacWindows)、iPhoneアプリとともに、より多くの方にお使い頂けるようになりました。 使い方 1.プロジェクト作成 まずは右下の+ボタンからプロジェクトを作成しましょう! 2.スクリーン撮影 データフォルダから選択するか、カメラでスクリーンを撮影します。 スクリーン撮影時、左上の鉛筆アイコンで編集モードに切り替えると撮影した画像のクロップや削除ができます。 少し大きめに撮影してクロップで調整するのが綺麗につくるコツです! 3.リンク先指定 リンクをつけたい範囲にホットスポットを置きましょう。遷移先スクリーン、遷移時のトランジション、ジェスチャーを選択することができます。 上下のバーでヘッダー、フッターを固定できます。 マルチジェスチャー機能 一つのリンク範囲にジェスチャーを4つまで追加できます。タ

    Qwerty401
    Qwerty401 2015/06/25
    手書きの図をベースに画面遷移とかのシミュレーションができるのか
  • Chromeで小粋なデザインのロゴがつくれる YouiDraw Logo Creatorで遊ぼう!! - 週刊アスキー

    『YouiDraw Logo Creator』は、オンライン上でロゴマークを作成できるChromeアプリ。100以上のテンプレートが用意されており、お気に入りのものを選択してテキストを入力するだけで簡単にオリジナルロゴを作成できる。ビジネスはもちろん、SNSのアイコンとして使うロゴの作成にも適している。

    Chromeで小粋なデザインのロゴがつくれる YouiDraw Logo Creatorで遊ぼう!! - 週刊アスキー
  • 退会ページから読み解く「逆説的改善法」とプロジェクト推進に必要な3つの明確化ポイント - BRIDGE(ブリッジ)テクノロジー&スタートアップ情報

    スタートアップはどのタイミングからサービスの改善プロジェクトを立上げるべきなのだろうか? そもそも大きなサービスで改善プロジェクトを回したことがある、失敗も成功も体験した開発者、マネージャーでなければどうやってプロセスを回したらいいかも分からないかもしれない。 簗島亮次氏はデータマイニングの専門家であり、グリーでゲーム以外のプラットフォームに関するプロジェクトマネジメントを経験後、フリークアウトでDSPの入札アルゴリズム企画などに携わっている。現在はフリークアウトでの業務と並行して「ビッグデータをお金に換える」環境開発を推進するIntimate Mergerの代表取締役も務める。 稿では彼がMOVIDA SCHOOLでスタートアップに共有した「データドリブンな」改善プロジェクトの実例とノウハウについて整理してお伝えする。 簗島亮次氏 グリーの退会ページは「改悪」で退会数を半分に減らした事

    退会ページから読み解く「逆説的改善法」とプロジェクト推進に必要な3つの明確化ポイント - BRIDGE(ブリッジ)テクノロジー&スタートアップ情報
    Qwerty401
    Qwerty401 2014/04/04
    ネガティブなUI設計
  • AdminLTE·ここまで多ければ何でもできそう。多機能なBootstrapベースの管理画面テンプレート MOONGIFT

    これで十分でしょ! Bootstrapで作る管理画面は相当増えてきているようです。確かに一般ユーザ向けに提供するとBootstrap臭が出てしまいますが、管理画面であれば問題はないですよね。 ということで今回は新しいBootstrap製の管理画面テンプレートAdminLTEを紹介します。高度なウィジェットが数多く提供されていますので使い勝手良さそうですよ。 AdminLTEの画面 今回もスクリーンショット多めで紹介します。 ダッシュボード。この時点でかなりリッチ。 ボックス。これだけ多彩なパターンがあると言うのも凄いですね。 左端にはちょっとした設定を表示させています。 背景色を変えるだけでも随分印象が違います。 グラフ。 こちらもグラフ。 外部ライブラリもそつなく使いこなしています。 スパークラインも! アラート。ちょっと飛び出しているのがいい感じです。 アイコン。 ボタン。フラット系で

    AdminLTE·ここまで多ければ何でもできそう。多機能なBootstrapベースの管理画面テンプレート MOONGIFT
  • 日本のウェブデザインはなぜこんなにも世界と違うのか? - BRIDGE(ブリッジ)テクノロジー&スタートアップ情報

    記事は、ブログ『RANDOMWIRE』の運営者の許可を得て、翻訳しています(元記事)。 静寂が満ちる禅庭園、美しい神社、静穏な寺、洗練された茶道。日の伝統建築、現代建築、書籍、雑誌は世界中のデザイナーの羨望の的だ。 だが、どうしてか、こうした巧みな技術はデジタルプロダクトには生かされていないようだ。特にそれが顕著なのは、ウェブサイトだ。その多くが、1998年のスタイルから変化していないように見える。 例1:楽天市場 有名な日のサイトの多くを見てみると、次のような傾向が見られる。(例えば、 Yahoo Japan、楽天、ニコニコ、JR東日、読売新聞…) 隙間なく敷き詰められている文字 小さく、画質の悪い画像 数えきれないほどのカラム 色同士の調和に欠ける派手な色使い、きらきら光るバナー Flashのような、過剰に使用される時代遅れのテクノロジー 美しい俳句、質素なわび・さびとはかけ離

    日本のウェブデザインはなぜこんなにも世界と違うのか? - BRIDGE(ブリッジ)テクノロジー&スタートアップ情報
    Qwerty401
    Qwerty401 2013/11/13
    概ね同意はできるけど、だからどうしたら良いというオチはない
  • 実例で納得!シニアが使えないサイトの例 | マミオン有限会社-パソコン・数学研修、法人研修

    パソコン教室でシニア層にインターネットの使い方を教えているときほど 「ああ、ここがもう少し改善されれば!」と吠えたくなる時がある。 「知りたい事」「申し込みたいもの」「買いたいもの」があって ワクワクしているのに、多くの人が、若い人に取っては「些細な」ミスで サイト上で目的を達成できずに諦めたり、 諦めきれないからとサポートセンターに電話して 「その情報はホームページに載ってます」と言われ落ち込んだりしている。 今日は大学の公開講座に申し込もうとしている70歳代後半女性の話。 ウキウキの申し込み「大学の公開講座申し込みたいの。英語をやり直したいのよ」といらしたMさん。 「新聞の折り込みで講座を見たのだけど、ホームページから申し込んでって書いてあって。 ホームページを見たのだけどどうすればいいのかわからないけど ホームページからしか申し込めないらしいから、やり方教えて」 とのこと。 チラシに

    Qwerty401
    Qwerty401 2013/10/03
    "PCが使えると自負している"シニアにも優しいWEBづくりってのは、日本語圏では特に必要になってくるなぁ
  • 母親から学ぶ使いやすいウェブサイトのインターフェース・デザイン

    インターネットが苦手な母親に子どもが使い方を教えるのはほほえましい光景ですがなかなか骨が折れるものです。そんな母親が1人でもウェブサイトを使えるようにデザインすることで、誰にでも使いやすいユーザー・インターフェースを作る方法がまとめられています。 Designing User Interfaces for Your Mother — Design/UX — Medium https://medium.com/design-ux/dd45ec50f7b0 ◆母親のためのインターフェース・デザイン ウェブデザイナーであるトニー・ジャインズさんは、「ちょっとコンピューターのことを見てくれない?いろいろと大丈夫かしら?」とよく母親から不安そうに聞かれるそうです。彼女はインターネットを使いますが、全てを知っている訳ではありません。そこでジャインズさんは世界中に何百万の母親と同じレベルのユーザーがいる

    母親から学ぶ使いやすいウェブサイトのインターフェース・デザイン
  • 匿名いいね!ボタンが設置できる『LikeBtn』 | 100SHIKI

    いいね!ボタンは押したいが、自分が押したことは知らせたくない・・・というニーズもあるだろう(かな?)。 そこで登場したのがLikeBtnだ。 このサイトでは匿名で「いいね!」ボタンが押せるウィジェットを配布している。 なお、かなり細かくカスタマイズができるので、好きな色やテキストにして設定できるようだ。 ちょっと気の利いたボタンを作りたいときに試してみるといいですな。

    匿名いいね!ボタンが設置できる『LikeBtn』 | 100SHIKI
    Qwerty401
    Qwerty401 2013/07/29
    これはいいね!
  • 無料すぎて助かった!WEB制作が「はかどる」素材まとめ

    作成:2013/01/21 更新:2014/11/01 Web制作 > 無料素材のブックマークが無限に増えてきた そうだ!整理しよう 今回は一つ一つ紹介せず、すでに「素敵にまとめてあるサイト」をまとめました。まとめ系48サイトのまとめです。 フォント、素材からレスポンシブ対応した初心者でもOKのWordPressテーマまで、全て無料です。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 1.日語フリーフォント 2.海外のおしゃれなフリーフォント 3.国内の写真素材 4.アイコン 5.ユニークな素材 6.ベクター 7.Photoshop補助 8.ワイヤーフレーム 9.レスポンシブなWordpressテーマ 10.スマホ用ページ テンプレート 1.日語フリーフォント 重複するのもありますが、以下のサイトでほとんどの無料系フリーフォントが揃うと思います。 201

    無料すぎて助かった!WEB制作が「はかどる」素材まとめ
    Qwerty401
    Qwerty401 2013/03/01
    フリー素材