Strikethrough Text With Explanations In Modal On Hover Code by: eightarmshq If you are having trouble with the pen, try the archived copy on GitHub.... Read More

スマートフォンのWebサイトやアプリの開発に関わっていると、日常的な会話の中でよく出てくるUIコンポーネント（構成要素、パーツ）の名前。 ディレクターであれ、デザイナーであれ、エンジニアであれWeb・アプリ開発に関わる人であれば、スムーズにコミュニケーションをとるために最低限押さえておきたいところでなのですが、Web、アプリ、iOS、Androidで呼び名や役割が異なるため、ごちゃごちゃになってしまうことも多いと思います。 photo credit: iPhone 6 vs iPhone 5S via photopin (license) そこでiOS、Androidともにリファレンス用にまとめました。それぞれの役割と合わせて名前を覚えるきっかけになればと思います。 iOSのUIコンポーネント まずは基本コンポーネントから。 ①Status bar（ステータスバー） ステータスバーは、時間

続きの作業やデータが存在する要素に対しては、末尾に3点リーダー（…）を表示する。 理由：当該要素のみでは、十分な結果が得られないことを示唆するため。 効能 収まり切らないデータが存在していることが分かる。 メニューやボタンの選択後に、属性値の指定などの追加アクションが発生することを予測できる。 用法 データ出力用のコントロールやリストの列にデータを表示し、はみ出すデータが存在する場合には、最後の1文字分を3点リーダー（…）とする。 リストでは、ユーザーが列幅を狭めた結果、データが収まりきらなくなった場合にも、3点リーダー（…）を表示する。 表示データが収まりきらない場合、3点リーダー（…）の付与されたデータに対するマウスオーバーで、ツールティップ内に全データを表示する。ただし、ツールティップに格納するには膨大すぎる（300字以上など）データの場合には、クリックでポップアップ画面を出すなどの

提供された素材が劣化していて、しかもそれを使うしかない状況なんてありえないとは思いますが、そんなときにはPhotoshopの「ぼかし（表面）」が役に立ちます。 劣化してしまった画像 ぼかし（表面） 半径：4pixel しきい値：23レベル 今までスタンプツールでノイズを消していた自分が悲しくなるくらい、簡単に補正することができます。

iPhoneとAndroidではiPhoneのほうが良くできているが、iOSのフラットデザインとAndroidのマテリアルデザインでは後者の設計が優れている。マテリアルデザインは、デザインとエンジニアリングが高いレベルで融合していて、ロジカルで非常に美しい。 以下、自分の理解をまとめたメモ。 紙とインク マテリアルデザインは「ペーパー」と「インク」のメタファーでできている。 ペーパーの特徴 バーやボタンといった画面上のUIコンポーネントは、バーチャルな紙でできたカードと考える。また、このペーパーは1dpの厚さを持っている。 ペーパーは純白の矩形、あるいはシンプルな円形である。三角や星型といった複雑な形はとらない。そのような複雑な形状や模様はインクが担当する。 現実とことなり、このペーパーは自由に伸縮することができる。 マテリアルデザインにおけるレイアウトは、複数のペーパーを並べたり、重ねた

拝啓、制作会社様。いつもお仕事ありがとうございます(深々)。お仕事を打診していただくメールはみなさんそれぞれで、もらってうれしいメール、もっとこうなればうれしいメール、について書いてみようと思います。 初めのいいわけ 突発的に書いてみたくなったので、フリーランスWebデザイナーの立場から、仕事の打診メールをいただくときに「こんなこと書いてくれるとうれしい」という話です。しかし自分自身いつもレスポンス遅くて、制作会社さんにはいつも感謝です…それはさて置き、こういうことを気を留めて仕事の打診メールをされると、やりとりの回数が減らせるかもしれません。また、逆に制作会社さんから見て「こんな返事が欲しい」みたいな記事も上がるといいなーと言う打算アリアリでございます( ˘ω˘) メールでのやりとりでありがちなこと どうでしょう、よくあるでしょうか？最初にすごく簡潔にメールをいただくことが多いのですが、

＜質問＞ スマホで当社サイトを閲覧する人が増えたので、スマホ対応にしました。 ユーザーの利便性向上を狙ったのですが、スマホ対応後も、社内の人からなんとなく使いづらいと言われてしまいました。 文字が大きくなり文章も読みやすくなったのに、何が使いづらいのかイマイチ要領を得ません。どこを変えればいいですか？ ＜回答＞ 文字が読みやすいというのは、利便性の一つに過ぎません。またスマホはＷＥＢを閲覧する以外にも、電話をかける・地図アプリを使う等、様々な機能を備えた端末です。 スマホの利用シーンを具体的に思い浮かべると、注意すべきポイントが多くあります。今日はスマホユーザーが嫌う１０個のことを紹介します。 ① リンク箇所が一目で判らないと嫌われる スマホでは、リンク箇所が一目で判らないと、ユーザーは迷ってしまいます。ダイレクトに言葉で表現したり、判り易い色のボタンやバナーを用意したりするなどの配慮が大

コメントやファイルのやりとり、 校正、進捗確認！ これらをまるっとスムーズに PDF、静止画、動画、Webコンテンツなど、 さまざまなファイル形式のコンテンツを一元管理できます。 ファイルの中身のチェックに ダウンロードも、専用ソフトも必要ありません Adobe Illustrator、Adobe Photoshop、Officeドキュメント、PDF、さまざまな形式の動画ファイルなど、 これらのファイルの形式を意識することなく、ウェブブラウザやアプリでチェックして、手描きやコメントのフィードバックができます。

【2024年夏アニメ】無料動画を探す 本サイトでは、今期放映中のアニメ全作品について、無料で視聴可能な動画配信サイトの紹介を行っています。 以下『表の見方』に倣い、公式サイトや各作品の感想を見て、視聴を決めるもよし、 逆に見たいアニメ作品から動画サービスを決めるもよし、色々な使い方ができます。 以下では各動画サービスのメリットデメリットを整理しているので、お試しを検討している方は是非確認してみてくださいね♪ アニメ見放題動画配信サイト（サブスクVOD）比較ランキングアニメ見放題動画配信サイトは数多くあって、どのサブスクVODが自分に合っているのか分かりにくいですよね。 自分が見たい作品や価格、他に...

ウェブマスターツール(Google Search Console)はホームページのSEO対策においてもっとも基本的なツールです。 自分のホームページがGoogleにどれくらい登録（インデックス）されたか、警告は受けていないかなど、Web担当者にとって必携のツールです。 多くの機能を持つウェブマスターツール(Google Search Console)ですが、今回はSEO対策に役立てることにフォーカスして、その機能と使い方をご紹介します。 参考リンク：ウェブマスターツール(Google Search Console) ※2015年2月5日時点での情報です。 おさらい～ウェブマスターツール(Google Search Console)の基本 ウェブマスターツール(Google Search Console)は、Googleが提供している無料のWeb担当者向けのサービスです。 あなたのホームペー

こんにちは、@armorik83です。こういう煽ったタイトルを書きたいってずっと思っていたので今回やってみます。 z-indexの値付けどうしてる? z-indexの説明は省略しますが、この値は取りうる範囲が膨大1でそれに対する指標が無いことから、複数のWeb設計者が入り混じる場合にバッティングする恐れがあります。 1から10までの範囲で収めていた設計者のサイトに100刻みの値付けをするプラグインが導入されると、一気に関係が崩れてしまうことが想像できます。 W3Cではこの値についての明確な指標を載せていないようにみえます。（調査不足だったらすいません） 広告業界では Web広告業界の展開は日本国内外問わず盛んで、さまざまな手法でうっとうしい広告を載せてきます。この時、元のコンテンツにオーバーレイする形で表示される広告や、マウスオーバーで拡大する広告などが普及してきたことで、2012年にこの

汚いcssを整形するWebアプリ「css2scss」でリファクタリングした際、「ヤバい」と感じた３つの機能と３つの点HTMLCSSSassscssCompass あらまし 別の業者が構築したという客先のホームページのcssが非常に読みづらく、 誰も手が付けられてない状態でヤバい（compactの状態で約350行）。 そこでリファクタリングをしようと思った際に、考えた。 「どうせならsass/scss対応にした方が可読性も可用性も上がる！ヤバい！」 sass/scss → css は当たり前として、 css → sass/scss って出来るのかよ、と思い調べてみると、数個発見した。 そのうちの１つ、今回ご紹介する「css2scss」が非常にエレガントだった。 実際に使用して感激して落胆したポイントを、それぞれ３つに絞ってご紹介。 css2scss sass/scssについては、まずはアレな

Fireworksのヘビーユーザーだったので、ディスコンになってからUI作成のツールをどれにしたらいいかが悩みでした。 Fireworksの前はPhotoshopでデザインを行っていたのですが、Fireworksの効率良さに慣れてしまうとPhotoshopには戻りたくなくなりました。他に良いツールがないものか・・・と思いつつ、とりあえずまだ使えるのでFireworksを使っていました。 ですが、ディスコンになる以上別のツールを探さないといけないので、改めてPhotoshopとillustratorについて調べてみたところ、illustratorの設定を適切に行えばFireworksチックに操作できることがわかりました。 今回はillustratorでUIデザインカンプを作る際の設定について書こうと思います。Webデザインでもほぼ同じ設定で大丈夫ではないかと思っています。ちなみに自分のill

1var gulp = require('gulp'); 2var sass = require("gulp-sass"); 3var autoprefixer = require("gulp-autoprefixer"); 4var uglify = require("gulp-uglify"); 5var browser = require("browser-sync"); 6var plumber = require("gulp-plumber"); 7var jade = require('gulp-jade'); 8 9// gulp.task(“タスク名”,function() {});でタスクの登録をおこないます。 10// gulp.src(“MiniMatchパターン”)で読み出したいファイルを指定します。 11// pipe(行いたい処理)でsrcで取得したファイルに処

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

With the recent trend of using high-quality images as backgrounds on websites, it’s important to make sure there is high contrast between the text and the background. In order for the user to be able to receive the message being conveyed by the website, legibility is critical. Below are five ways to improve contrast when placing text over images. 1. Color Overlay As we can see in the Before image,