カクヨムでの縦組み表示の実装と、縦書きWebの将来に向けて - Hatena Developer Blog
デザイン 縦組みのデザイン - Hatena Design Group 縦組みを実現しましょうとなったときに、本文のみを単純に縦にすれば良いのかというと、そうではないと思いました。 （略） そこで、UIを含めた本文以外の要素もすべて縦にするのはどうか、というのがカクヨムの小説ビューワーにおける提案でした。 縦組みとCSS html.writingDirection-vertical { writing-mode: vertical-rl; } 縦中横にする部分はJSでspan要素を挿入 .tatechuyoko1, .tetechuyoko2 { text-combine-upright: all; } <span class="tatechuyoko1">W</span><span class="tatechuyoko1">e</span><span class="tatechuyoko
FRESH! Web パフォーマンス改善 〜クライアントサイド編〜 | CyberAgent Developers Blog
You can read this post in English. みなさんこんにちは、FRESH! でフロントエンドの開発している鈴木(sutiwo)です。 前回は、FRESH!におけるPCブラウザのFlash脱却という HLS の Web プレイヤーについて記事を書きました。 今回はスマートフォン・ PC でのブラウザに関するパフォーマンス改善の取り組みとその結果についてお知らせします。 まずクライアントサイドのパフォーマンス改善を行うにあたり、弊社の Web Initiative Center* から 1000ch 氏に加わっていただきどのようなことを目標とするか議論しました。 * Web プロダクトの品質向上とWeb技術を使ったチャレンジを目的に設立された弊社の組織 議論の様子 議論を行った後、今回の改善で以下のことに取り組むことが決まりました。 Service Worker で
サイト構造や画面遷移を分かりやすく見せる、サイトマップ・フローチャートを作成する要素がすべて揃った無料素材 -UX Flow
Webサイトやスマホアプリのサイトマップ・フローチャートを簡単に作成できるSketch用の無料素材を紹介します。 ラインやアローをはじめ、アイコン、ラベル、パネルなど、サイトマップ・フローチャートを作成するための要素がすべて揃っています。
知っておきたいブラウザについての基礎入門
知っておきたいブラウザについての基礎入門 at サポーターズ京都勉強会 https://supporterz.connpass.com/event/51220/
優れたフォームをデザインする
サインアップのフローであれ、マルチビュー・ステッパーであれ、ありきたりのデータ入力であれ、「フォーム」はデジタル・プロダクト・デザインにおいて最も気を遣わなければならないものの1つです。 そこで、今回は一般的にフォーム・デザインで何をやり、何をやらざるべきかについてお話したいと思います。あくまで一般的なガイドラインですので、そのようなものとしてご理解頂いた上で、皆さんの参考になれば幸いです。
最近のWeb制作の勉強になる！Webサイトのワイヤーフレームやプロトタイプのまとめ
プロジェクトのメンバーでないとなかなか目にすることができないワイヤーフレームやプロトタイプ、他の人がどのように作っているか気になります。 最近のWebサイトやスマホアプリの制作で参考になりそうなワイヤーフレーム、フローチャート、プロトタイプを紹介します。 UXデザインのツールも、Adobe XDが先日ベータ版としてリリースされ、SketchもメジャーアップデートとなるSketch4がリリースされ、充実してきましたね。 Adobe XD Wireframe Kit for UX Designer for Adobe XD まずは年内にWindows版のリリースが予定されているAdobe XDで作成されたワイヤーフレーム用のキット。最近のWebサイトで使用されているコンポーネントが数多く収録されています。
RESTful API の設計のキホン
2016/10/12 社内勉強会で使ったスライドを社外向けに一部加筆訂正したもの
Web 標準化のフィードバックサイクルを円滑にする Origin Trials について | blog.jxck.io
Intro ブラウザに追加される新しい機能に対して、 Vender Prefix の代替となる Origin Trials の導入が徐々に始まっている。 今回は、これまでの Vender Prefix の問題点と、代替として提案された Origin Trials のデザインや導入方法などについて記す。 Avoid Breaking the Web Web が壊れることは、避けねばならない。 Web に関する、特にブラウザが実装するような機能については、その仕様や実装を変更することにより、既存の資産の挙動が壊れることがある。 これを Breaking the Web といい、プロトコルにしても API にしても、標準化団体やブラウザベンダなどは、これを避けることを念頭に置いて作業を行っている。(セキュリティ的な理由など、例外は多く有る。) 一方で、新しく提案される仕様はフィードバックを集めな
SPAと覚悟
Frontend Meetup vol.1 - SPAを語り尽くす会! でのLT資料です。 http://connpass.com/event/38112/
Polymer 2.0 Preview - Polymer Project
Blog Polymer 2.0 Preview Check out the preview branch of the forthcoming Polymer 2.0 release. 2016-09-09 Today we pushed a 2.0-preview branch to the Polymer repository, where we’re working on the next major version of the library. Polymer 2.0 is a minimally-breaking change from the current library, with a few very precise goals: Take advantage of native v1 Shadow DOM and v1 Custom Elements API’s T
従来のWebアプリの常識を変える! Service WorkerがもたらすWebの未来 | PLAID Engineer Blog
Service Workerの全体像の解説と、それがもたらすWebの未来を考察します。今後の動向を左右しそうなService worker meeting notesについても解説します。
手軽に実装！Webサイトにアニメーションを加えられるCSS＆JavaScriptライブラリー
2019年2月22日 CSS, JavaScript, jQuery 人間の目は動きを感知すると反射的に目が動き、意識をそちらに向けるそうです。そのため、アニメーションは要素をほんの少し動かすだけで注目を集められるという強い力を持っています。今回はそんなアニメーションを手軽に実装できるCSSやJavaScriptのライブラリーをいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ アニメーションを使う時に気をつけたい事 アニメーションを使えば、前後の画面に繋がりを持たせたり、ユーザーに次の動きを予測させ、安心感を与えることができます。よく使われるものが、ふんわりと画面や要素を移り変えるフェードという効果です。目の前の物が一瞬で消え、パッと新しい物が現れる…なんて、現実世界ではありえませんよね。もちろん、単純に見ていて楽しい、かっこいい、なんていう刺激を与えられます。 しかし、ユー
Dear Web designer
もう何年も前からWebデザイン、Webデザイナーの在り方について思うことがあります。 まず私のバックグラウンドがどういうものか示した上で、その思いを語ります。 DTPデザイン（紙のデザインです。ポスターやリーフレット、ポストカードなどなど）を1年半経験し、その後はWebデザイン、マークアップエンジニア、フロントエンドエンジニアへとコードを書くことに興味を持ちその時々でポジションを変え10年ぐらい経ちます。最近ではフリーランスとしてスタートアップのWebサービスの中でデザインからHTML, CSS, JavaScriptを主戦場にしている者です。 ここで語る内容は、Webサービスのデザインに偏った内容になってしまいますが、コーポレートサイトやランディングページひとつとっても考え方は同じだと思っています。 タイポグラフィはWebデザインに必要か？よくWebデザインはタイポグラフィの部分で自由が
Noto Sans の Web Font 対応とサブセットによる最適化 | blog.jxck.io
Intro このサイトのフォントに Web Font を適用することにした。 フォントには Google と Adobe が協同で開発した Noto Sans CJK JP を採用した。 また、このサイトでは使用しないだろう文字を削除したサブセットを作ることで、フォントサイズを最適化した。 フォントサイズの最適化 Noto font は、そもそも豆腐(フォントがなかった場合に代替表示される四角)が出ないように(No-豆腐)することをコンセプトにしているため、フォントの網羅率は非常に高い。 そのため Web Font として利用する場合は、全体だとサイズが大きすぎるため、言語毎に提供されるフォントセットの中から、必要なフォントのみを適用することになる。 本サイトでは、 ASCII 、記号、日本語のフォントを用いる。 しかし、特に網羅された漢字の中には、日常では使わない文字が多々ある。 加えて
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ヘッダ・フッタ・ナビゲーションなど、最近のWebデザインで採用されているアイデアのまとめ -Good Web Design
マテリアルデザインでやってはいけない68のこと（間違いチェックリスト）
Webアプリケーションで 60fpsを(極力)目指す
[PDF] The need for mobile speed
BLOKK font gives you a nice fill text for mock-ups and wireframing without the lorem ipsum. The new and better wireframing font.
Color Safe - accessible web color combinations