Blog
ブログで学ぶUX

Sassの便利機能:変数について

Sassの便利な機能に「変数」があります。ここでいきなり変数と言われると、プログラミングのことが頭をよぎると思うのですが、Sassでの変数は、仕組みだけ理解しておけば大丈夫なので、そんな構えずに使っていきましょう。変数の基本変数とは、あらかじめ名前を決めておいて、その名前に値を代入しておくことで、任意の場所で変数名を参照して、値を呼び出すことができるものです。なんだか難しそうと思った方、全然難しく……

投稿日:

Sassとは? Sassの基本について

CSSは書いたことがあっても、Sassは書いたことない、難しいのではないか、そう思っている人はいないでしょうか。SassはCSSを書いたことがある人ならそこまで難しいものではありません。この記事ではSassの基本について紹介します。Sassとは言葉で説明する前に、実際のコードをまず見てみましょう。CSSdiv { margin: 0 auto; } div p { padding……

投稿日:

AndroidアプリのUXデザインで注意すべき4つのポイント

モバイルアプリのデザイナーがiOS用のデザインを好む傾向があることは広く知られています。しかしながらAndroid用デバイスがスマホ市場を席巻したのは、特にハイエンドのiPhoneと比べた時に価格帯が低かったからです。Androidデバイスが世界中で広まったことで、アプリデザイナーはAndroidを無視できなくなったのです。 たしかに、Androidは必ずしも素晴らしいデザインの典型ではありません……

投稿日:

商用可な明朝体の日本語フリーフォント10選

この記事では、商用利用ができる日本語の明朝フォントフリーフォントを10個厳選して紹介します。様々な場面であなたのデザインのサポートをしてくれる便利なフォントばかりです。1. うつくし明朝フォント流れるような字体の美しいフォントです。ひらがな、カタカナがオリジナルのもので、漢字はIPAex明朝フォントを使用しています。軽やか・滑らかな印象が作りやすいフォントです。2. IPAex 明朝フォントIPA……

投稿日:

HTML初心者こそスタイルシートを覚えるべき理由

WEBページを作成するときには、まずHTMLで記述していきます。初心者ならこのHTMLから覚えていくことになりますが、HTMLタグだけではWebデザインやページのレイアウトに限界があります。そこで登場するのがCSSスタイルシートです。「やっとHTMLを理解したのにまだ覚えるものがあるのか!」という気持ちになり、HTMLタグだけでレイアウトを何とかしてしまいたいという人も多いかと思います。例えば、ペ……

投稿日:

スマートウォッチって便利? 着用してみて気づいた6つのイケてないUX

スマートウォッチといえばまず一般的に思い浮かぶのがAppleのスマートウォッチ、Apple Watchです。Apple Watchが世に出てしばらく経ちましたが、皆様の周りでもちらほら見かけるようになったでしょうか? かく言う私は現在Pebble Steelというスマートウォッチを毎日付けていますが、「それApple Watch?」とよく聞かれるので、まだまだ世の中には普及していないのだなあと実感……

投稿日:

運転中の「ながらスマホ」からドライバーたちを守るデザインとは?

どんなに技術が発展しようと、メッセージングと運転は相容れることはありません 今では、 運転している時に次にどの道で曲がるべきかということは、ナビゲーションを見ればほぼ正確に分かりますよね。自動駐車や自動運転ができる自動車も開発されています。しかし、運転中にメッセージを打つのは交通事故を起こすリスクがあり、特にスマホをよく使う10代の若者たちにとって深刻な問題で、事故の発生率は急増し続けています。 ……

投稿日:

美しい自然のフリー動画素材サイト10選

Web広告やサイトデザインでも積極的に動画を取り入れるケースが増えてきました。簡単な日常シーンなら簡単に調達できますが、シーンによっては個人で準備するのは時間&予算的に厳しい場合があります。ここでは、その中でもとくに簡単に撮影できないようなスケールの大きい「美しい自然」にテーマを絞り、ちょっとしたプロモーション動画などビジネスシーンでも活用できそうな高品質の動画が揃っている無料動画素材サイトをご紹……

投稿日:

HTML5における<base>タグの使い方

<base>タグは、HTMLファイル内で基準(ベース)となるURLを指定するタグです。絶対URLともいわれるものです。今回は、HTML5における<base>タグの使い方をご紹介します。HTML5における<base>タグの使い方<base>タグは、メタデータ・コンテンツの1つで、<head>〜</head>内に記述します。hea……

投稿日:

HTML5における<bdi>タグの使い方

<bdi>タグは、他の部分とは表記の方向が異なる文章の書式設定をする範囲を表します。webブラウザは標準で表記の向きを判定して表示しています。Unicodeの双方向アルゴリズムという機能です。表記の向きが適切でない場合、<bdi>タグを使用して、アルゴリズムから独立した部分を指定することができます。今回は、HTML5における<bdi>タグの使い方を紹介します。言……

投稿日: