タグ

webdesignに関するkirifueのブックマーク (368)

  • フォントが大好物な人に朗報🎉 MORISAWA BIZ UDゴシックとUD明朝がオープンソースになったぞ!!

    まさかまさかの朗報です! MORISAWA BIZ UDゴシックとMORISAWA BIZ UD明朝がGitHubにオープンソースのOFLで公開されています!!! アップデート情報 4/1 Google Fontsで利用できるようになりました! Morisawa Inc. -Google Fonts 3/29 v1.001, v1.002がリリースされ、不具合が修正されました。 3/24 HTMLCSSJavaScriptなどコードを書く人にどうぞ。 仕事早っ!! オープンソースになったMORISAWA BIZ UDゴシックのプログラミング用合成フォント「UDEV Gothic」がリリース MORISAWA BIZ UDフォントとは GitHubで公開されているMORISAWA BIZ UDフォント MORISAWA BIZ UDフォントのダウンロード MORISAWA BIZ UDフ

    フォントが大好物な人に朗報🎉 MORISAWA BIZ UDゴシックとUD明朝がオープンソースになったぞ!!
    kirifue
    kirifue 2022/03/23
    フォンと素敵! #プログラミング #font
  • HTMLコーダーにとっての2020年。アンケート結果から分析するイマドキのウェブ制作 - ICS MEDIA

    ウェブ業界の当たり前だと思っていることでも、同業他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか・・・、この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。 連載第6回目となる記事ではウェブ業界の「HTMLコーダーにとっての2020年」と題してアンケート結果を紹介します。 HTMLのエディター HTML制作によく使われるエディターはどれでしょう? アンケートで質問してみました。 805票の回答があり「VS Code」が64.5%、「Atom」が8.8%、「WebStorm」が8.2%、「その他」が18.5%でした。 VS Codeは圧倒的な人気ですね。ICS MEDIAでは記事『VS Codeの拡張機能7選』で紹介しているとおり、無料のソフトウェアなのに開発を便利にする機能がたくさん揃っていて魅力的です。 WebStormの回答者数は

    HTMLコーダーにとっての2020年。アンケート結果から分析するイマドキのウェブ制作 - ICS MEDIA
    kirifue
    kirifue 2020/07/11
    HTMLコーダーってなんじゃそれだけど、ほとんどオレオレルールでやってるわ。アカンのか。 #開発
  • 色の名前、日本語と英語での色の名前、世界各国の伝統色の名前が分かるサイトのまとめ

    いろいろな色の日語での名前、英語での名前、日の伝統色の名前をはじめ世界の伝統色の名前などが分かるサイトを紹介します。 トレンドカラー 日での色の名前、日の伝統色の名前 世界での色の名前、世界の伝統色の名前 トレンドカラー まずおさえてきたいのは、最新のトレンドカラー。 2023年のトレンドカラーは鮮やかで紫がかったレッドの「ビバ マゼンタ(Viva Magenta)」、世界でもっとも明るい染料の一つコチニールの赤にインスパイアされたカラーです。

    色の名前、日本語と英語での色の名前、世界各国の伝統色の名前が分かるサイトのまとめ
    kirifue
    kirifue 2020/01/22
    色々な色のサイト。 #デザイン #カラー
  • エンジニアにUIが分かりにくいと言われた - 並び替えボタン編|ANDPAD Design Team|note

    ANDPADでデザインを担当している後藤です。 エンジニア 「このボタン、分かりにくいですね」 開発を進めてて、エンジニアにこう言われたことはありませんか? 「このボタンって、どう動くんですか?」 「このボタン、気がつきにくいですね。」 そういったときに、どのようにUIの意思決定をしたか、説明して納得してもらう必要があります。 今回は「並び替えボタン」で起きたケースを紹介します。 あまり目立たない機能ですが、データを整理することが多いBtoB向けサービスでは、要望が多い機能じゃないでしょうか。 【目次】 ・どこが分かりにくかったか? ・エンジニアとデザイナーの通る思考回路は違う ・エンジニアの考えた解決策 ・画面上における機能の優先順位 ・機能単体のゴール ・まとめ どこが分かりにくかったか?実際の画面がこちらです。(※こちらは現在開発中の機能になります) さて、どこが分かりにくかったでし

    エンジニアにUIが分かりにくいと言われた - 並び替えボタン編|ANDPAD Design Team|note
    kirifue
    kirifue 2018/05/26
    迷ったら「デファクトスタンダード」なUIを使え。分かりづらいわ。 #開発 #デザイン
  • メールアドレスの確認フィールドをなくすべき理由

    UX Movementの著者、編集長。明快で効果的なデザインを愛し、ユーザのために日々奮闘しています。 メールアドレスは、もっとも間違いやすいフォームフィールドの1つです。 入力データにはさまざまな種類の文字による長い文字列が含まれているため、間違って入力してしまいがちです。これにより、ユーザーが間違ったメールアドレスを送信する可能性があるのです。 メールアドレス確認の問題 デザイナーは、メールアドレスの確認フィールドを追加することで、間違ったメールアドレスの送信を防ぐことができると考えています。メールアドレスの確認フィールドの追加で誤送信を何件か防ぐことはできるかもしれませんが、必ずしもすべてを防ぐことができるというわけではありません。 多くのユーザーは、メールアドレスの入力内容をコピーして、確認フィールドに貼り付ける傾向があります。これでは、ユーザーが間違ったメールアドレスを貼り付ける

    メールアドレスの確認フィールドをなくすべき理由
    kirifue
    kirifue 2018/03/28
    メールフィールドの幅が足りなくて全体を見渡せないのが、一番イラっっとする。 #開発 #デザイン
  • PWAが来るって言っているエンジニアは今すぐ辞めろ

    PWAとかいうhtml5のリブランドが技術者界隈で騒いでるが、こんなの受け入れられないだろ。 PWAの実物見た?触った?? instagramのPWAが最高〜!ネイティブと見分けつかない!!とかほざいているグー○ルのエバンジェリストだかエンジニアが騒いでいたので触ってみたのだが、 オワコンであった。 ネイティブと見分けつかないんだったら当にエンジニア辞めたほうがいいよ。 まず、タイムライン上で複数投稿があった時にスワイプで切り替えられない。 なんと左右をタップするのである。 HTMLを操作してる感満載のガクガクの感じ。 ユーザーってこういう些細なガクガクに敏感だよね。マーケット感ある人ならわかるよね。 そんでもってストーリーズ。 もう最低。 動画が自動再生しないの。止まるは止まるは。もう何なの???って感じ。 こんなの受け入れられないでしょ。 カメラは直接起動できないし、フィルターも少な

    PWAが来るって言っているエンジニアは今すぐ辞めろ
    kirifue
    kirifue 2018/03/22
    まさか、インスタのUIがすべてだと思ってるんではなかろうね? あと、いきなりネイティブと比較すんなや。 #開発 #デザイン
  • これからのCSSはmargin禁止!?CSSグリッドレイアウトやコンポーネント指向なCSSについて、矢倉さんに聞いてきた!

    これからのCSSはmargin禁止!?CSSグリッドレイアウトやコンポーネント指向なCSSについて、矢倉さんに聞いてきた! 白石 俊平(HTML5 Experts.jp編集長) こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に語っていただこうとういものです。セッションの内容をより深く理解する手助けになるだけでなく、記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、ピクセルグリッドの矢倉眞隆さんです。 矢倉さんのセッション「まあまあ最近のCSSとつらくならないための書き方」に関するスライド資料は、こちらで公開されています。 インパクト大!CSSグリッドレイアウト概要 白石: では、まずは簡単に自己紹介をお願いできますか? 矢倉: 昨年(2

    これからのCSSはmargin禁止!?CSSグリッドレイアウトやコンポーネント指向なCSSについて、矢倉さんに聞いてきた!
    kirifue
    kirifue 2017/10/27
    これ、細かく指定できるテーブルじゃん? 嫌いじゃないけど。 #開発 #デザイン
  • 年々進化しているボタンをデザインするポイントを解説、デザイナーの追求に終わりの文字はない

    Webデザインにおいて、ボタンの存在は欠かせません。検索する時、サイトにログインする時、ソーシャルでシェアする時、ショッピングカートに入れる時、たくさんのボタンが使用されています。 これらボタンのデザインはWeb業界と共に進化し続け、気がついたら数年前のデザインだったということもあるでしょう。 年々進化しているボタンがどのように変わってきたか、Dribbbleをベースにしてデザインするポイントを紹介します。 Button Design Over the Years 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 2009年のボタンのデザイン 2010年のボタンのデザイン 2011年のボタンのデザイン 2012年のボタンのデザイン 2013年のボタンのデザイン 2014年のボタンのデザイン 2015年のボタンのデザイン 2016年

    年々進化しているボタンをデザインするポイントを解説、デザイナーの追求に終わりの文字はない
    kirifue
    kirifue 2017/09/23
    フラットデザインでボタンだか何だか分からんくらいなら、標準のボタンでいいや。 #開発 #デザイン
  • IE11のバグまとめ - Qiita

    バージョンごとに進化するIEのバグ 備忘録も兼ねて記事にまとめました。 バグについての解決策と補足も併せて記載してますが、 記事に記載されていない遭遇率高めのバグやより良い解決策などがあれば、是非フィードバックをお願いします。 まとめてみた所感としては、IE6の頃から根的な部分は変わってない気がします。 (ただし、パフォーマンスが大幅にアップしたのは認める。) IE11はWindows10の場合、2025年までサポートが続きます。 https://support.microsoft.com/ja-jp/lifecycle/search/18165 ナンテ/(^o^)\\(^o^)//(^o^)\\(^o^)//(^o^)\コッタイ もうね...アボカドまるごとバナナかと。 ちなみに今年の4月でVistaがサポート終了するので、1ヶ月後にはIE9を窓から放り投げてOKです。 https:/

    IE11のバグまとめ - Qiita
    kirifue
    kirifue 2017/03/12
    もうね、Microsoftが引き抜いてくれよ。 #開発 #デザイン
  • Web制作者が備えておきたい最新版チートシートのまとめ、CSS3 Flexbox, CSSアニメーション, jQuery3, ES6, Bootstrap4など

    CSS3のFlexboxをはじめ、CSSアニメーション、CSSのセレクタ、jQuery3, ES6, Bootstrap4など、フロントエンドのマークアップやコーディングに役立つチートシートを紹介します。 ブックマークしておいて、PDFや画像をダウンロードして、すぐに確認できるようにしておくと便利ですね。

    Web制作者が備えておきたい最新版チートシートのまとめ、CSS3 Flexbox, CSSアニメーション, jQuery3, ES6, Bootstrap4など
    kirifue
    kirifue 2016/11/15
    最新版チートシートのまとめ、CSS3 Flexbox, CSSアニメーション, jQuery3, ES6, Bootstrap4など。 #開発
  • ブラウザ上で超簡単にWebサイトが作れる!Bootstrap4対応のWeb制作エディタ「Pingendo」の活用ワザを一挙大公開! - paiza times

    どうも、まさとらん(@0310lan)です。 今回は、マウス操作で簡単に「Bootstrap4」に対応したWeb制作をブラウザ上で行えるサービス「Pingendo」をご紹介しようと思います。 以前から、PC向けソフトウェアとしてリリースされていましたが、最近になってベータ版ではあるものの「Chromeブラウザ」からでも利用できるようになりました! 【 Pingendo 】 「Pingendo」は、基的にマウスでポチポチとクリックしていくだけで、簡単に見栄えの良いWebサイトが作れてしまう便利なサービスです。 また、中・上級者向けにソースコードもすべて編集可能になっているので、自分好みにカスタマイズすることも出来るのが特徴となっています! ■基的な使い方! それでは、実際に「Pingendo」を使いながら、どのようなサービスなのかを見ていきましょう。 利用するにあたり、面倒な登録やインス

    ブラウザ上で超簡単にWebサイトが作れる!Bootstrap4対応のWeb制作エディタ「Pingendo」の活用ワザを一挙大公開! - paiza times
    kirifue
    kirifue 2016/11/09
    モックアップ向けかな。 #開発
  • その文字、薄すぎない? デザインにおける灰色の明度は何%が最適か

    UX Movementにおいて記者、編集長を務めます。明快で効果的なデザインに美点を見出し、利用者のために払う労力を惜しみません。 一言で灰色と言っても、明るいものもあれば暗いものもあり、実に様々なバリエーションがあります。Webサイトなどでは、いたるところでお目にかかることのできる色でもあります。濃い灰色は主に見出しや文に、薄い灰色はメタデータ、分類名、説明文に多く使われます。これらの色合いのうち、最も乱用されるのは薄い灰色です。 薄い灰色の文字の問題点 文字色として薄すぎる灰色は可読性に問題を起こしかねません。灰色の文字を薄くしすぎてしまえば、読者が読むにあたって支障をきたすことになります。文字の明度によっては、薄い色の背景に混ざってしまうのです。この現象は、単語や文字をぼやけさせ、判読を困難にします。無理に判読を試みれば、目を傷めてしまうでしょう。 また、薄い灰色の文字は読者の誘導

    その文字、薄すぎない? デザインにおける灰色の明度は何%が最適か
    kirifue
    kirifue 2016/07/26
    薄すぎて実際に読めないサイトがあるんですよ。デザインがでしゃばり過ぎると失敗すると肝に銘じてほしい。 #開発 #デザイン
  • 世界中の無料素材サイトをまとめて画像検索できるサービス厳選6つ【ブロガー&Webデザイナー保存版】

    誰でも簡単に無料でホームページ作成できるおすすめサイトまとめ。 今やブログや個人Webサイトを運営するとき、記事内のアイキャッチ(サムネイル)に使用する写真素材に困ることはないだろう。ネット上には、無料で高品質な画像が山ほど溢れている。例えば以下のようなサイト。 DesignersPics Unsplash Pexels Pixabay Life Of Pix FindA.Photo MMT これらは全て無料で著作権表示の必要ない写真素材を提供するサイトである。これらもほんの一部で、他にもたくさんある。 しかし人間とは贅沢なもので、少し前までは無料というだけでありがたみを感じていたのに、今ではある特定の写真を探すときこれらのサイトを一つ一つブックマークから開いて検索することに面倒臭さを感じる。 しかし需要があれば供給が生まれる。 上に挙げたような複数の無料素材サイトを横断的に検索して一覧で

    世界中の無料素材サイトをまとめて画像検索できるサービス厳選6つ【ブロガー&Webデザイナー保存版】
    kirifue
    kirifue 2016/06/20
    ブロガー御用達。世界中の無料素材サイトをまとめて画像検索できるサービス厳選6つ。 #デザイン #写真
  • サイトのデザインを変更しただけで約50%もユーザーを失った失敗例

    By Wicker Paradise アイコンに関するニュースから販売まで手がけるサービス「Icons8」の中の人が、ウェブサイトのデザインを大幅に変更したところ47%ものユーザーを失ったことをブログで明らかにしました。ブログではユーザーを失うまでの経緯や、なぜ失ってしまったのかの分析結果まで書かれていて、興味深い内容になっています。 How We Lost 47% of Our Users After a Redesign | Icons8 https://icons8.com/articles/how-we-lost-47-of-our-users-after-a-redesign/ サービス開始当初、Icons8はアイコンの開発・販売を手がけるサービスでしたが、毎日新しいアイコンを作り続けるのには無理があるため、「リクエストアイコン」という機能を実装しました。リクエストアイコンとは、

    サイトのデザインを変更しただけで約50%もユーザーを失った失敗例
    kirifue
    kirifue 2016/06/10
    なんか既視感ある、と思ったら、はてブか。
  • Webサイトに必要なfaviconが21個になっていた - IT探検の追憶

    久しぶりにWebサイトのfaviconを変えようと思い、調べてみると、必要なfaviconが大幅に増えていることがわかりました。 その数、何と21個! そんなに増えていたとは。 一応、以下にリストアップしてみます。 faviconのリスト favicon.ico: IE用 favicon-16x16.png: タブ表示用 favicon-32x32.png: Mac版Safari用 favicon-96x96.png: Google TV用 favicon-160x160.png: Opera 12 までのスピード・ダイアル用 favicon-196x196.png: AndroidChrome用 mstile-70x70.png: Windows 8 用 mstile-144x144.png mstile-150x150.png mstile-310x310.png mstile-31

    Webサイトに必要なfaviconが21個になっていた - IT探検の追憶
    kirifue
    kirifue 2015/01/08
    マジかよ。faviconなんて、一個で十分と思ってたのに。 #開発
  • kakipy.com

    kakipy.com 2018 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy

    kirifue
    kirifue 2014/05/01
    クロールには、その方がいいだろうね。パーサーにはアウトかも。 #開発 #googlejp
  • ウェブ電通報/ビジネスにもっとアイデアを。

    #クリエイティブ #広告 #CM #エンターテインメント Z世代、SNSAI…生活者とメディア行動の「今」を読み解く

    ウェブ電通報/ビジネスにもっとアイデアを。
    kirifue
    kirifue 2013/10/21
    これは見づらい。アンチ広告みたいな。 #開発 #デザイン
  • 没有找到站点

    您的请求在Web服务器中没有找到对应的站点! 可能原因: 您没有将此域名或IP绑定到对应站点! 配置文件未生效! 如何解决: 检查是否已经绑定到对应站点,若确认已绑定,请尝试重载Web服务; 检查端口是否正确; 若您使用了CDN产品,请尝试清除CDN缓存; 普通网站访客,请联系网站管理员;

    kirifue
    kirifue 2013/06/04
    誰でも簡単にデザイン性のあるロゴが作成できるサイト「CoolText」。 #開発 #デザイン
  • ドラッグ&ドロップで再編成できるPinterest風レイアウト作成プラグイン「jQuery.Shapeshift」:phpspot開発日誌

    jQuery.Shapeshift ドラッグ&ドロップで再編成できるPinterest風レイアウト作成プラグイン「jQuery.Shapeshift」。 最初に一度出して終わりなレイアウトではなくて、ユーザがドラッグ&ドロップでレイアウトを変えられるプラグインです。 ドラッグ中もアニメーションして動きがなかなか面白いです。 関連エントリ Pinterest風のWordPressテーマ集 Twitter,Facebook,YouTube,PinterestRSSフィードURLまとめ PinterestのPinIt機能実装jQueryプラグイン FacebookやTwitterの内容をまとめてPinterest風に表示できるPHPアプリ「Infinite-social-wall」

    kirifue
    kirifue 2013/04/24
    ドラッグ&ドロップで再編成できるPinterest風レイアウト作成プラグイン「jQuery.Shapeshift」。ナニコレ、面白い。 #開発 #デザイン
  • [CSS]デザインは美しく、かわいいアニメーションを備えたナビゲーションを実装するデモ

    シンプルなリストを使って、アイテムがホバー時に吹き出し状にポップアップするかわいらしいアニメーションを備えたナビゲーションを実装するスタイルシートのデモを紹介します。 アニメーションもかわいくて素敵ですが、半透明のグラデーションもとても美しいナビゲーションですね。 デモは、最新のモダンブラウザでご覧ください。 Menu 実装は下記のようになっています。 HTML シンプルなリストで実装されています。 <nav> <menu> <li><a href="#">☀</a></li> <li><a href="#">✈</a></li> <li><a href="#">❄</a></li> <li><a href="#">☎</a></li> </menu> </nav> <nav class="menu2"> <menu> <li><a href="#">home</a></li> <li><

    kirifue
    kirifue 2013/04/23
    かわいいアニメーションを備えたナビゲーションを実装するデモ。 #開発 #デザイン