ソシオメディアがまとめている、ヒューマンインターフェースをデザインする際の指針です。これらは、インターフェースデザインに関する様々な文献と、実際のデザインコンサルティングで得た知見をもとに、ソシオメディアが独自に編纂したものです。継続的に追加・更新していきます。 すべてモデルインタラクションプレゼンテーション
ソシオメディア | ヒューマンインターフェース ガイドライン
ソシオメディアがまとめている、ヒューマンインターフェースをデザインする際の指針です。これらは、インターフェースデザインに関する様々な文献と、実際のデザインコンサルティングで得た知見をもとに、ソシオメディアが独自に編纂したものです。継続的に追加・更新していきます。 すべてモデルインタラクションプレゼンテーション
Why Japanese Web Design Is So… Different | Randomwire
In the mind’s eye of many people, Japan is a land of tranquil Zen gardens, serene temples, and exquisite tea ceremonies. Both traditional and contemporary Japanese architecture, books and magazines are the envy of designers worldwide. Yet for some reason, practically none of this mastery has been translated into digital products, in particular websites, most of which look like they hail from aroun
情報処理推進機構：情報セキュリティ：脆弱性対策：安全なウェブサイトの作り方
「安全なウェブサイトの作り方」は、IPAが届出(*1)を受けた脆弱性関連情報を基に、届出件数の多かった脆弱性や攻撃による影響度が大きい脆弱性を取り上げ、ウェブサイト開発者や運営者が適切なセキュリティを考慮したウェブサイトを作成するための資料です。 「安全なウェブサイトの作り方」改訂第7版の内容 第1章では、「ウェブアプリケーションのセキュリティ実装」として、SQLインジェクション 、OSコマンド・インジェクション やクロスサイト・スクリプティング 等11種類の脆弱性を取り上げ、それぞれの脆弱性で発生しうる脅威や特に注意が必要なウェブサイトの特徴等を解説し、脆弱性の原因そのものをなくす根本的な解決策、攻撃による影響の低減を期待できる対策を示しています。 第2章では、「ウェブサイトの安全性向上のための取り組み」として、ウェブサーバの運用に関する対策やウェブサイトにおけるパスワードの取扱いに関す
Web Performance 101: JS, CSS, HTTP, images & fonts | PerfPerfPerf
This is an introduction to modern web loading performance. Learn why performance is important, what performance optimizations exist, and which tools can help you understand if your app is performing well. Want to apply this advice to your site? We help companies like Framer, Toggl, SitePoint to get faster – and we’d be happy to help you as well! Reach out So: why is web performance important? Firs
AbemaTVのアクセシビリティ 小さな一歩｜シュンスケ｜ABEMA
「アクセシビリティ」という言葉を使うほどではないかも。（予防線） 正直なところ、マシンリーダブルな部分は僕はまだよく理解してない。 アプリにおけるスクリーンリーダーとか操作や表示調整諸々とかちょっと待って！頑張るから！という意気込み。 で、完全に僕の主観だけど、多くのデザイナーがまず初めにとっつきやすいアクセシビリティは「色のコントラスト」だと思う。 ということで、 まずはAbemaTVのiOSアプリの色を全部見直したよ！（2018年3月） （2019年春：追ってWebも対応済み） （Androidは元々マテリアルデザインのカラースキームを採用してたのでそこまで問題ありませんでした） これまでのUIの色周りの課題でいうと主にこの3つ。 ・「黒背景」と「白背景」の画面が混在していた。 ・どの背景でも文字のコントラスト比が十分に保たれてなかった。 ・使用している色数がちと多い。 「黒背景」と「
画像からHTMLを生成する深層学習とは？AIがwebサイト自動コーディング。 | Ledge.ai
サインインした状態で「いいね」を押すと、マイページの 「いいね履歴」に一覧として保存されていくので、 再度読みたくなった時や、あとでじっくり読みたいときに便利です。
LINE風の吹き出し会話が簡単にできるCSSを作ってみた（はてなブログ） - 夜中に前へ
こんばんは、夜中たわしです。 今回は主にはてなブロガー向けの記事です。 前回の記事のためにLINE風の表現ができるCSSを作ったんですが、それのやり方が知りたいという熱い声（1件）があったので、公開することにしました。 他のサービスでも使用可能ですが、はてなブログ向けの導入方法として紹介します。 紹介するCSSでできること できないこと 制作背景・前置き 注意事項 CSSにコードを追加（その1） CSSにコードを追加（その2） 会話形式CSSを導入している場合 使用方法 おわりに 紹介するCSSでできること これから紹介するCSSでできる表現はこんな感じです なるほど しいたけ しいたけ そのしいたけの人は一体？ わかりません なんか料理が出てきた このようにLINEのグループ会話、に近い表現ができます。 補足：このしいたけは私が撮影したものです 一応、画像じゃないですよ。テキスト部分など
WEB制作時に役立つ！ダミーテキストに使える定型文まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
先日、弊社プログラマーの段田さんのブログで、ボーナスアップの道具として利用された野田です。 あれは、久しぶりに傷ついた。 そして、プライベートでもいろんな人にいじられた。 ネットって怖いですね。 さて、今回は、WEB制作に役立つ定型文のご紹介を致します。 僕自身、デザインする際に構成からガッツリ考えるのが大好きっていうか仕事なので、 それにあわせてダミーテキストを考えることが多いです。 デザインを提出する際には、「テキストテキストテキスト」や「ダミーダミーダミー」で提出することは絶対にしません。 お客様の意図を読み取ってこちらからご提案させていただくということも、Webデザイナーには必要なスキルの一つだと思うからです。 あたりまえなことですが、こういう部分に気づかない方も案外いらっしゃいます。 正直、僕もデザインを始めてすぐの頃にはそんな感じでした。 「仮」という言葉に甘えてしまう事は良く
誰にでも起こりうる…サイトをリアルタイムでミラーリングされて検索上位を奪われたお話［不正コピー、ダメ。ゼッタイ］
こんにちは！みぞれ（@xxmiz0rexx）です。 たまに見かける「記事の内容を丸ごとコピーされた！」という嘆き。 「大変だなぁ…」なんて眺めていた私ですが、今回なんと記事の文章どころか、サイトが丸ごと不正コピーされる(URL以外で判別がつかない)というとんでもない被害に遭いましたので、私が行った対処法をまとめておきます。 経緯 事の始まりは10/21。 Googleの検索結果を見ていたら、わたしの運営するフリー写真素材サイト『GIRLY DROP』のタイトルの下に見知らぬURLがついてました。 「むむ…？」と思いクリックしてみると、そこにはうちのサイトがありました。 「？？？？」 さらに、表示されている写真をクリックして詳細ページを確認してみようと思いました。 カチッ 思いっきりイケナイ大人のWEBサイトが表示されたんですがこれは( ﾟдﾟ)ﾎﾟｶｰﾝ トップページ、写真のダウンロードペ
静的サイトを作ろう。立ちはだかる壁とその解決法 MOONGIFT
ここ数年、静的サイトジェネレータが人気です。種類が多すぎて把握しきれないほどです。生成されたHTML/JavaScript/CSSはそのまま共有サーバなりAmazon S3なりにアップロードすれば簡単にWebサイトを立ち上げることができます。 しかし静的サイトを構築する中では幾つかの問題があるのも確かです。今回はその課題と解決法、関連オープンソース・ソフトウェアを紹介します。 コメント よくある問題としてブログなどを静的化した際にコメントできないというのが聞かれます。幾つかの解決法がありますが、最も手軽なのはDisqusやFacebookのコメントボックスを導入することでしょう。 JavaScriptを埋め込むだけで使えますので手軽に導入することができます。さらにDisqusはソーシャルサービスを使ったログインもサポートしていますのでFacebook単独よりもより幅広いコメントを受けられる
Webサイトの利用規約（無料テンプレート・商用利用可）
Webサイトの利用規約 kiyaku.jp へようこそ。 当サイトでは、Webサイト用の「利用規約」「プライバシーポリシー」等のひな型（雛形・テンプレート）を掲載しています。 ひな型（雛形・テンプレート）のご利用は無料です。 個人・法人を問わず、どなたでも自由にご利用いただけます（商用利用可）。 ご利用の際は、ご利用の際の注意事項をご確認ください。
書かなきゃいけない人のためのWebコピーライティング教室
「書くのが得意ではないけれど、仕事で書かなければならない」。そんなWeb担当者のために、コピーライティングの考え方と実践的な書き方を、現役コピーライターの森田哲生さんが解説。Webでの商品売上げを伸ばしたい、Webコンテンツの読者を増やしたい、Webで会社のブランドイメージを高めたい人、必読です。
TLS暗号設定ガイドライン 安全なウェブサイトのために（暗号設定対策編） | 情報セキュリティ | IPA 独立行政法人 情報処理推進機構
「TLS暗号設定ガイドライン」は、TLSサーバの構築者や運営者が適切なセキュリティを考慮した暗号設定ができるようにするためのガイドラインです。「様々な利用上の判断材料も加味した合理的な根拠」を重視して、TLS通信での実現すべき安全性と必要となる相互接続性とのトレードオフを考慮した3つの設定基準（「高セキュリティ型」「推奨セキュリティ型」「セキュリティ例外型」）を設けており、各々の設定基準に対応して、TLSサーバで設定すべき具体的な要求設定（「遵守項目」と「推奨項目」）を決めております。 本ガイドラインは安全なウェブサイトの作り方とともに適切な暗号設定をする資料の一つとしてお使いいただけます。 なお、本ガイドラインは、暗号技術評価プロジェクトCRYPTRECで作成されました。 「TLS暗号設定ガイドライン」の内容 1章と2章は、本ガイドラインの目的やSSL/TLSについての技術的な基礎知識を
レスポンシブWebデザインの作り方（簡単設定方法）
webmobileは、みんなが知りたいスマホ・通信ガジェットの使い方を発信しているレビューサイトだよ♪ webmobile（ウェブモバイル）は、大好きなPixel/iPhone/MVNO/amazonについて、気づいたこと・困った事の解決など経験したことを発信しています。 運営歴はかれこれ10年以上です。 私が初めて買ったスマートフォンは、auから発売されたSHARP製IS03。今でもデザインの良さに感銘を受けます。 今のメイン機はGooglePixelとiPhone15ProMAXです。 昔はASUS製ZenFoneにはまり、新製品が発売されるごとに買っていました。 MVNOのお店に我が子と訪ねる旅、楽しかったなぁ♪ ご縁あって、UQコミュニケーションズ本社に行くこともありました。 UQモバイル公式グッズをたくさん手に入れる機会がありました。 東京新宿にあるLINE株式会社に招待して貰っ
reset.cssとnormalize.cssに続く新しいリセット用CSS、モバイル対応・最近の実装スタイルを考慮したスタイルシート -sanitize.css
HTMLの各要素のブラウザごとに異なる差異をなくし、スタイルをリセットするスタイルシート「sanitize.css」を紹介します。 「Normalize.css」の共同開発者：Jonathan Nealの新しいプロジェクトで、最近の実装スタイルにあったアプローチがとられており、スマホなどのモバイルにも対応しています。 sanitize.css sanitize.css -GitHub sanitize.cssとは sanitize.cssの対応ブラウザ sanitize.cssのスタイル sanitize.cssの注目すべきスタイル sanitize.cssの適用 sanitize.cssとは sanitize.cssはHTMLのあらゆる要素を各ブラウザでの差異をなくし、整合性をもたせてレンダリングさせるスタイルシートで、ライセンスはCC 0で利用できます。 有用なデフォルトはそのまま 多
PHPユーザエージェント判別・判定
Updated 2015.12.07 / Published 2015.04.04 Firefox OSやWindows Phoneの登場でユーザエージェント情報に依存して処理を行っている部分が相次いで見直しを迫られることになりますので、2015年版JavaScriptユーザエージェント判別・判定と同趣旨でPHPにてスマートフォン・タブレットまわりのユーザエージェントを判別・判定して分岐処理を行う手順をご紹介します。 <?php class UserAgent{ private $ua; private $device; public function set(){ $this->ua = mb_strtolower($_SERVER['HTTP_USER_AGENT']); if(strpos($this->ua,'iphone') !== false){ $this->device =
Webフォントで文字化けしたときのよくある原因と対処法 | Webデザインのタネ
ずいぶんと久しぶりの投稿です。最近仕事でFont AwesomeやGLYPHICONなどでアイコンなどでWebフォントを使う機会が増えてきました。 ですが、いざ人に確認してもらうと、Webフォントが文字化けして豆腐文字になってしまっていたり、謎の文字が出てきてしまったりと色んなケースで失敗してます。 今日は実際にやってみて文字化けした例を紹介します。 原因1 サーバーにフォントファイルをアップしていない CSSで「ここがフォントファイルの場所」と教えているのに、その先にフォントファイルがない場合に□となります。 ChromeやFirefoxの開発ツールではネットワークタブで404のステータスコードが返ってきますね。 自分でデザインをしていると、グラフィックソフトでWebフォントを利用するときにフォントファイルをインストールしていると、なかなか気付きづらいです。 対処法 CSSでフォントファ
【必読】あなたのサイトはどれくらい嫌われてる？スマホユーザーが嫌う10のこと
＜質問＞ スマホで当社サイトを閲覧する人が増えたので、スマホ対応にしました。 ユーザーの利便性向上を狙ったのですが、スマホ対応後も、社内の人からなんとなく使いづらいと言われてしまいました。 文字が大きくなり文章も読みやすくなったのに、何が使いづらいのかイマイチ要領を得ません。どこを変えればいいですか？ ＜回答＞ 文字が読みやすいというのは、利便性の一つに過ぎません。またスマホはＷＥＢを閲覧する以外にも、電話をかける・地図アプリを使う等、様々な機能を備えた端末です。 スマホの利用シーンを具体的に思い浮かべると、注意すべきポイントが多くあります。今日はスマホユーザーが嫌う１０個のことを紹介します。 ① リンク箇所が一目で判らないと嫌われる スマホでは、リンク箇所が一目で判らないと、ユーザーは迷ってしまいます。ダイレクトに言葉で表現したり、判り易い色のボタンやバナーを用意したりするなどの配慮が大
フロントエンドエンジニアになってから11ヶ月間で覚えたちょっと捗るChromeの使い方 - Qiita
はじめに 昨今のWebブラウザはどのような機能があるのか把握するのも大変なほど多機能で便利ですよね。 Webブラウザの機能を把握してうまく使いこなせること（とくに開発者ツール）が、フロントエンドエンジニアの前提スキルになってきてるのかなぁと感じる今日この頃です。 ということで自分のデフォルトの開発用ブラウザはChromeなのですが、これを覚えて捗ったなぁということをメモしていこうと思います。 思い浮かんだら追記していこうと思っているのでストックして頂けると幸いです。 基本系 キーボードショートカットを覚える Chromeのキーボードショートカットの一覧 キーボードで出来ることはなるべくキーボードでやるけれども、マウスやトラックパッドでやったほうが速い場合は臨機応変に切替えることを心がけています。 Chrome Canaryを使う Chromeの開発者向けプレビュー版 Chrome Cana
Googleモバイルフレンドリーテスト
Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, SEO, and more. You can run Lighthouse in Chrome DevTools, from the command line, or as a Node module. You give Lighthouse a URL to audit, it runs a series of audits against t
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
