Webサイトのワイヤーフレームの作り方 ― FigmaやXDを開く前の３ステップ｜重松佑 / Shhh inc.
先日1500ページくらいのやや大きめなコーポレートサイトのワイヤーフレームをディレクター、デザイナー、テクニカル担当、アシスタントという職能や経験もバラバラのチームで共同作成しました。みなが足並みを揃えて進めていけるようにワイヤーフレームの作り方を要素分解して、共通理解を持って作業をできるようにしました。どのような手順や考え方で進めていったのかをnoteにも記しておきます。 0. 情報設計とトンマナ設計を分けて考える Webサイト制作ではデザイン着手前の工程でワイヤーフレームと呼ばれるWebサイトの設計図のようなものを多くの場合で作ります。デザインとの違いは何かというと、上図のようにワイヤーフレームでは「情報設計」を主として扱います。そのためトンマナ（トーン&マナー）と呼ばれるWebサイトの印象や雰囲気を形作る要素については考えず、Webサイトに掲載する情報について決定することが目的となり
牧歌的 Cookie の終焉 | blog.jxck.io
Intro Cookie は、ブラウザに一度保存すれば、次からその値を自動的に送ってくるという、非常に都合の良い仕様から始まった。 State Less が基本だった Web にセッションの概念をもたらし、今ではこれが無ければ実現できないユースケースの方が多い。 冷静に考えればふざけてるとして思えないヘッダ名からもわかるように、当初はこのヘッダがこんなに重宝され、 Web のあり方を変えるかもしれないくらい重要な議論を巻き起こすことになるとは、最初の実装者も思ってなかっただろう。 そんな Cookie が今どう使われ、 3rd Party Cookie (3rdPC) の何が問題になっているのかを踏まえ、これからどうなっていくのかについて考える。 Cookie のユースケース Web にある API の中でも Cookie はいくつかの点で特異な挙動をする 一度保存すれば、次から自動で送る
Web における技術の解釈とエコシステムによる合意形成プロセスについて | blog.jxck.io
Intro 「ユーザが意図する挙動」とは何か。技術的に可能であるが「やらない方が良いこと」は、誰がどう決めるのか。 Web には仕様、実装、デプロイ、そしてユーザの利用とフィードバックによって、そうした合意がゆるやかに形成されていく仕組みがあると筆者は考えている。 しかし、これは明文化されているわけでもなく、その全体像を把握するのは一般には難しいだろう。 今回は、ちょうど何度目かの議論が再発している ping 属性を例に、この合意形成の概観について解説を試みる。 リンクの ping 属性 <a> には ping という属性があり、以下のように URL を指定する。 <a href=https:example.com ping=/path/to/report>example.com</a> HTML Standard - ping Attribute このリンクは、クリックすると https
Webフロントエンド パフォーマンス改善ハンドブックを公開しました - dwango on GitHub
パフォーマンス改善ハンドブック ウェブページにおけるパフォーマンスに関する問題の見つけ方や考え方の事例をまとめた Webフロントエンド パフォーマンス改善ハンドブックを公開しました。 URL: https://dwango-js.github.io/performance-handbook/ このハンドブックでは過去に行ったWebフロントエンドのパフォーマンス改善の事例を中心に紹介しています。 注意点としてWebフロントエンドは常に変化しているため、現在の最適な解決方法を提案するものではありません。 また、アプリケーションによっても最適な解決方法は異なります。 今回の事例ではViewライブラリにReactを用い、映像再生プレイヤーなどある程度複雑な機能を持ったウェブアプリケーションのWebフロントエンドを扱います。 具体的にはニコニコ生放送（以下「生放送」）で行った事例を中心に書かれていま
Web Design in 4 minutes
by Jeremy Thomas Let's say you have a product, a portfolio, or just an idea you want to share with everyone on your own website. Before you publish it on the internet, you want to make it look attractive, professional, or at least decent to look at. What is the first thing you need to work on? Content The purpose of design is to enhance the presentation of the content it's applied to. It might sou
CDNとの付き合い方 – cat /dev/random > /dev/null &
最近何かと話題なCDNですが、そもそもCDNってなんだろう・・・どんなことに使えるんだろう？的なことを書いてみようと思います。 一応先に言っておくと、私はCDN業者に所属したことないのであくまでも利用者として見た時の話を書きます。 また、私の考えであり、様々なワークロードがあるなかでこれがすべてではありませんので、こんな考えもあるんだなぁぐらいに思ってもらえると助かります。 そもそもCDNってなんだろうか そもそもCDNはContent Delivery Networkの略であってCache Delivery Networkの略ではありません。 要はコンテンツをクライアントに対して高速・効率的に配信するためのネットワークです。 良くCDNといえばその成り立ちからキャッシュというイメージはありますが、重要な要素の一つではあるもののCDNの全てではありません。 さらに言えばAkamaiのInt
How we built Twitter Lite
We’re excited to introduce you to Twitter Lite, a Progressive Web App that is available at mobile.twitter.com. Twitter Lite is fast and responsive, uses less data, takes up less storage space, and supports push notifications and offline use in modern browsers. The web is becoming a platform for lightweight apps that can be accessed on-demand, installed without friction, and incrementally updated.
メモリリーク、デッドロック、リダイレクトループ、JVMクラッシュ...バグだらけのWebアプリケーションを使ってバグを理解する - Qiita
メモリリーク、デッドロック、リダイレクトループ、JVMクラッシュ...バグだらけのWebアプリケーションを使ってバグを理解するJavaバグ脆弱性トラブルシューティングjconsole 概要 Webアプリケーションの開発や保守をしていると、いろいろなバグに遭遇します。メモリリーク、デッドロック、リダイレクトループ、JVMクラッシュ等々、バグは様々です。こういったバグは、実際にコードを書いて、実行・再現させてツールで解析してみると理解が深まります。 ということで、いろいろなバグを実装したWebアプリケーションをつくってみました。現時点では、以下を簡単に再現できます。 メモリリーク (Javaヒープ領域) メモリリーク (Permanent領域) メモリリーク (Cヒープ領域) デッドロック (Java) デッドロック (SQL) 完了しないプロセスの待機 無限ループ リダイレクトループ JVM
縦書きWeb普及委員会
日本語の組版において 「縦書きと横書きの選択肢がある」 ということは極めて自然ですが、 世界的にはマイナーな 書字方向でもあります。 一方、東アジアでは 縦書きを利用している国が 一定数あり、横書きの文化圏においても 縦書きを利用するケースが 「珍しい」というほど 少なくないことも事実です。 横書きの文字組が中心だった Webの世界において、 縦書きの知見を取り込み、 縦と横の文字組を自由に デザインできるようになることで、 Webデザインは更なる自由と 高い表現の可能性を 獲得できると言えます。 私たち『次世代Webブラウザの テキストレイアウトに関する 検討会（縦書きWeb普及委員会）』は、 縦書きレイアウトの 国際標準化活動を推進し、 縦書きWebコンテンツの 普及促進に取り組んでいます。 The concept of being able to choose between a h
改めてWebサイトの品質について考える
制作における品質とは？ Webサイトにおける品質（クオリティ）とはどういう意味でしょうか。 制作者であれば同じように捉えているかのようにみえる言葉ですが、大きく 2 つの見方があると思います。ひとつは、様々な状況に堪えられるように必要最低限の見た目と操作性を保証するという意味での品質。もうひとつは、与えられた状況の中で最高の見た目と操作性を実現するという意味での品質です。どちらも「品質」という言葉で表現できるものの、見ている方向は大きく異なります。 品質に対する捉え方の違いを考える上で スターバックスの日本サイトと、米国サイトは良い比較になります。いずれもレスポンシブ Web サイトですが、スマートフォンとデスクトップで見た目を大きく変えている日本サイトに対して、米国のアプローチは極めてシンプルです。アイコンの使い方やグラフィックも日本語版のほうがバラエティに富んでいますし、ナビゲーション
意外とできてる会社ばかりではない！？Webデザインを行う前にすべき、Webディレクション作業まとめ。
こんにちはMUUUUU.ORGの中の人こと、QUOITWORKS Inc.のムラマツです。 最近はWebデザインと、グラフィックデザインが同時に発生する案件を絶賛募集しております！（宣伝） えーと今回は、Webのディレクションというのは正直決まったやり方が存在していないのが現状でありまして、 今の時代の業界標準を確認し直そうと思いまして「第一線のプロがホンネで教える 超実践的 Webディレクターの教科書」を参考に、改めてWebディレクションとは何をする仕事なのか、 Webデザインを始める前段階というところにフォーカスしてまとめました。 目次 前段：コミュニケーションはディレクターのメイン商品 1.ヒアリングをする 2.リニューアルの場合、現サイトの課題だしをする 3.コンセプトを作る（共通言語となる目標を決める） 4.ポジション設定をする（競合に対しての強みを見つける） 5.ペルソナ作り（
http://www.uitemple.com/
Default Page Welcome again to A2 Hosting! We're excited to have you on board. Your account is set up and this is your default index.php file. To disable this page, please remove the index.php file and replace it with your own. Our handy Quick Start Guide can help you get up and running fast. If you have any questions, please submit a support ticket and we'll be happy to help.
エンジニアなら知っておきたい、絵で見てわかるセキュア通信の基本 - Qiita
TLS 1.3は現在策定中ですが、 前方秘匿性 の問題から RSAのみ を用いた鍵委共有が禁止になる見込みです。(詳細は後述します) HTTPSとは 次に、HTTPSです。 HTTPS - Wikipedia HTTPS（Hypertext Transfer Protocol Secure）は、HTTPによる通信を安全に（セキュアに）行うためのプロトコルおよびURIスキームである。 厳密に言えば、HTTPS自体はプロトコルではなく、SSL/TLSプロトコルによって提供される セキュアな接続の上でHTTP通信を行うこと をHTTPSと呼んでいる。 とのことです。 HTTPの説明を割愛するとすれば、「SSL/TLSでセキュアにHTTPをやる」というだけの説明で済んでしまいます。 最近では個人情報等の観点から全てのサイトをHTTPSにするような動きが見られますが、元々HTTPSが使われやすかった
新人Webデザイナーへ向けた、考え方から実践までの話 | Web制作に関するブログ | 株式会社シロクロ
Web制作会社 シロクロ Web制作に関するブログ新人Webデザイナーへ向けた、考え方から実践までの話 新人Webデザイナーへ向けた、考え方から実践までの話 2016年6月15日 Webデザイナーとしての心構え、普段やるべきこと、実際にデザインするときの手順など、弊社の新人デザイナーに伝えていることをまとめました。学生や新人Webデザイナーの方に役立てていただければ幸いです。※ディレクターが打ち合わせやワイヤーフレーム制作などを担当し、デザイナーは純粋に画面を作る役割として話を進めます。 はじめに何のためのデザインか色んなWebサイトを見ることWebサイトを模写することデザインする前にWebサイトの目的／目標を理解する同業他社のWebサイトを調べるワイヤーフレームのままデザインしないデザイン作業時世界観（トーン&マナー）とレイアウトを決める文字、色、装飾、余白のルールを決める必要であれば構
パフォーマンス向上のためのデザイン設計
Webサイトのパフォーマンスは、「9：1でフロントエンド側のパフォーマンスが重要」だと言われています。パフォーマンスの向上には、インフラ側だけでなくフロントエンドの設計が大いに影響します。そこで本書は、Webサイトのパフォーマンス向上についてデザイン面からのアプローチに特化し、日々の業務に取り込めるCSS、HTMLのコーディングテクニックや、Webサイトで使用する画像を作成する際のヒントを紹介しています。また、デザイナーだけでなく、サイト運営に携わるすべてのスタッフがパフォーマンスへの意識を高めるための効果的な取り組みについても解説します。 賞賛の声 推薦の言葉 はじめに 監訳者まえがき 1章 サイトパフォーマンスはユーザエクスペリエンス 1.1 ブランドに与える影響 1.1.1 ユーザの再訪問 1.1.2 検索エンジンの順位 1.2 モバイルユーザへの影響 1.2.1 モバイルネットワー
不正視聴プログラム公開事案についてまとめてみた - piyolog
2016年6月6日、テレビの有料放送などを不正に視聴できるプログラムを公開したとして17歳少年が逮捕されました。ここでは関連情報をまとめます。 事案タイムライン 日時 出来事 2014年頃 少年が不正視聴プログラムを完成させていた可能性。 2014年12月 B-CASが警視庁へ不正視聴プログラムに関する相談。 2015年6月23日 少年が不正視聴プログラムを公開し、不特定多数が入手できるようにした疑い。 2016年6月6日 少年を不正競争防止法違反の容疑で逮捕。 2016年6月8日 警視庁、佐賀県警が同事案についての発表。 2016年6月27日 東京地検が処分保留で少年を釈放。 事案に関する情報 事案名 不正視聴プログラム頒布による不正競争防止法違反被疑事件 容疑者 佐賀県佐賀市 17歳 無職少年 少年は逮捕後は「事件について語りたくない」として認否は留保している。*1 捜査担当 警視庁サ
UXデザイナーって何するの？
2016年6月1日 UXデザイン 最近、求人サイトなどを見てみると、「Webデザイナー」という職種での募集よりも「UXデザイナー」での募集をよく見かける気がします。しかし、UXデザイナーって実際どんな仕事をしているんでしょうか？Webデザイナーとは何が違うんでしょう？今回はUXデザイナーの仕事内容と、どんなスキルがあればUXデザイナーとして活躍できるのかを調査しました！ ↑私が10年以上利用している会計ソフト！ UXデザインって何？ UXとは「User Experience（ユーザー・エクスペリエンス）」の略で、日本語では「ユーザー体験」などと訳されています。見た目だけではなく、画面や機能の使いやすさや、使っていくなかで「楽しい！」「心地いい！」とユーザーに満足してもらえるかを考えた概念です。 UXデザイナーの仕事内容 「UXデザイン」について、なんとなくわかっていても、なんだかふわっとし
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ネットワークエンジニアではない方々向けのIPv6入門
UI 実装の再考と a11y - Frontrend Vol.8 LT
【保存版】一次情報をゲットするために確認するべきウェブサイトをまとめてみました（随時更新） - とある浪速の調査雑記