TechAcademy（テックアカデミー） Webデザインコース Webデザイン CSS CSSだけでフェードインアニメーションを実装する方法を現役エンジニアが解説【初心者向け】
icon
icon
CSS

CSSだけでフェードインアニメーションを実装する方法を現役エンジニアが解説【初心者向け】

初心者向けにCSSだけでフェードインアニメーションを実装する方法について解説しています。CSSでアニメーションを実装するにはanimationプロパティを使います。フェードインを使う場合の書き方、画面上での動作をサンプルで試してみましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

CSSだけでフェードインアニメーションを実装する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。

 

田島悠介

今回は、CSSに関する内容だね！

大石ゆかり

どういう内容でしょうか？

田島悠介

フェードインアニメーションを実装する方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

目次

 

CSSでのフェードインの作り方

フェードインとは要素が徐々に現れるアニメーション効果を指します。CSSでフェードインを作るにはanimationを使用します。

 

[PR] Webデザインで副業する学習方法を動画で公開中

様々なフェードインを見てみよう

フェードインを実装するには、まずは@keyframesでフェードインのアニメーションを作成します。

@keyframes アニメーション名 {
  from {
    /* 初期状態 */
  }
  to {
    /* 終了状態 */
  }
}

fromの代わりに0%、toの代わりに100%を指定できます。また途中の状態を50%などで指定することで、複雑なフェードインを実装することも可能です。@keyframesについて、詳しくは以下の記事も参考にしてください。

MDN – @keyframes

@keyframesで定義したアニメーションを要素に適用するにはanimationプロパティを使用します。例えばfadeInという名前のアニメーションを2秒かけて実行するには以下のように記述します。

animation: fadeIn 2.0s ease 0s 1 normal;

animationプロパティについて、詳しくは以下の記事も参考にしてください。

CSSで複数のanimationを操作する方法を現役エンジニアが解説【初心者向け】

MDN – animation

 

フェードインを実装してみよう

今回のサンプルプログラムではanimationを使用してCSSえフェードインを実装する方法について確認します。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Sample</title>
  <style>
    div {
      width: 300px;
      height: 200px;
      border: solid 2px red;
    }
    div:not(:hover){
      background-color: rgba(255, 0, 0, 0.2);
    }
    div:hover {
      animation: fadeIn 2.0s ease 0s 1 normal;
    }

    @keyframes fadeIn {
      0% {
        background-color: rgba(255, 0, 0, 0.2);
      }
      100% {
        background-color: rgba(255, 0, 0, 1.0);
      }
    }
  </style>
</head>
<body>
  <div>マウスカーソルを乗せてね！</div>
</body>
</html>

実行結果は以下のとおりです。要素の上にマウスカーソルを乗せると背景色が徐々に濃くなっていきます。

 

まとめ

今回の記事ではCSSだけでフェードインアニメーションを実装する方法について学習しました。

 

監修してくれたメンター

太田和樹（おおたかずき）

ITベンチャー企業のPM兼エンジニア

普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。

開発実績：画像認識技術を活用した駐車場混雑状況把握、音声認識を活用したヘルプデスク支援システム、ロボットアプリの開発、大規模基幹系システムの開発・導入マネジメント。著書「知識ゼロからの機械学習入門（技術評論社）」。

地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。

 

大石ゆかり

内容分かりやすくて良かったです！

田島悠介

ゆかりちゃんも分からないことがあったら質問してね！

大石ゆかり

分かりました。ありがとうございます！

TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

記事を検索

関連するキーワード

関連する記事

三角ジェネレータを応用してCSSで矢印を作る方法を現役エンジニアが解説【初心者向け】

三角ジェネレータを応用してCSSで矢印を作る方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
CSS

CSSでtransform:rotateを使って要素を回転させる方法を現役エンジニアが解説【初心者向け】

CSSでtransform:rotateを使って要素を回転させる方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向...
CSS

CSSで重なり順を指定するz-indexの正しい使い方を現役エンジニアが解説【初心者向け】

CSSで重なり順を指定するz-indexの正しい使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します...
CSS

CSSでbackground-imageが表示されないときの対処法を現役デザイナーが解説【初心者向け】【初心者

CSSでbackground-imageが表示されないときの対処法について解説します。 CSSについてそもそもよく分からないという方は、CSSの書き方につ...
CSS

CSSの読み込み速度が遅い原因と対処法を現役エンジニアが解説【初心者向け】

CSSの読み込み速度が遅い原因と対処法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 CSS...
CSS

BootstrapでCSSを上書きする方法を現役エンジニアが解説【初心者向け】

BootstrapでCSSを上書きする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 C...
CSS

あわせてよく読まれている記事

CSSでアニメーションを無限に繰り返すinfiniteの使い方を現役エンジニアが解説【初心者向け】

CSSでアニメーションを無限に繰り返すinfiniteの使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読むとさらに理解が深まるでしょう。   なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。   田島悠介 今回は、CSSに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 アニメーションを無限に繰り返すinfiniteの使い方について詳しく説明していくね！ 大石ゆかり お願いします！   アニメーションで設定できる項目 CSSでアニメーションを設定する項目は以下のようになります。 animation-name アニメーションの名前(好きな名前) animation-name:expansion; /*keyframeで指定する名前*/   animation-duration アニメーション1回あたりの時間(秒) animation-duration:1s; /*1秒間でアニメーションを完了する*/   animation-timing-function アニメーションの進行速度、加速度など(キーワードなど) animation-timing-function:ease-in; /*ease-inは最初ゆっくりで後半に減速*/ animation-timing-function:ease-out; /*ease-outは最初早くてで後半に加速*/ その他にも、ease-in-out、linearなどのキーワードで指定可能です。   animation-delay アニメーション開始までの時間(秒) animation-delay:1s; /*1秒後にアニメーション開始*/   animation-iteration-count アニメーションを再生する回数 animation-iteration-count:3; /*アニメーションを3回再生する*/   animation-direction アニメーション再生、順方向・逆方向・反転など(キーワード) animation-direction:normal; /*順方向に再生する*/ animation-direction:reverse; /*逆方向に再生する*/ animation-direction:alternate; /*順方向→逆方向の順で再生する*/ animation-direction:alternate-reverse; /*逆方向→順方向の順で再生する*/   animation-fill-mode アニメーションの前後にスタイルを適用するかどうか(キーワード) animation-fill-mode:none; /*スタイルを指定しない*/ animation-fill-mode:backwords; /*アニメーションの終了後に最初のキーフレームのスタイルを適用する*/ animation-fill-mode:forwards; /*アニメーションの終了後には最後のキーフレームのスタイルを適用する*/   animation-play-state アニメーションが再生か停止を設定する(キーワード) animation-play-state:running; /*再生*/ animation-play-state:paused; /*停止*/ コーディングの例 HTML <span id="box"></span> CSS #box{   display:block;   width:10px;   height:100px;   background:gold;   animation-name:expansion;   animation-duration:2s;   animation-timing-function:ease-in;   animation-delay:1s;   animation-iteration-count:3;   animation-direction:alternate;   animation-fill-mode:forwards;   animation-play-state:running; } @keyframes expansion{   0%{     width:10px;   }   100%{     width:300px;     background:tomato;   } } 表示を確認してみましょう。 See the Pen oNgxJpw by marihashimoto (@mari877) on CodePen.   また、これらのアニメーションプロパティはanimationプロパティで一括で指定することも可能です。 CSS #box{   display:block;   width:10px;   height:100px;   background:gold;   animation:2s ease-in 1s 3 alternate forwards running
CSS

CSSで複数のanimationを操作する方法を現役エンジニアが解説【初心者向け】

CSSで複数のanimationを操作する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。   なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。   田島悠介 今回は、CSSに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 複数のanimationを操作する方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 シーケンシャルに動かす方法 同期して動かす方法 animationの注意点 実際に複数のanimationを動かしてみよう まとめ   シーケンシャルに動かす方法 CSSで複数のanimationを操作するには、まず@keyframesでアニメーションの構成を指定します。 @keyframes アニメーション名 { from { /* 初期状態 */ } to { /* 終了状態 */ } } fromの代わりに0%、toの代わりに100%を指定できます。また途中の状態を50%などで指定も可能です。@keyframesについて、詳しくは以下の記事も参考にしてください。 MDN – @keyframes @keyframesで定義したアニメーションを要素に適用するにはanimationプロパティを使用します。animationプロパティは以下の8つのプロパティをまとめて指定できる記法です。 animation-name：アニメーション名。keyframesで指定するか既定のアニメーション名を指定。初期値はnone animation-duration：1回のアニメーションが完了するまでの時間。初期値は0s animation-timing-function：アニメーションの進行。初期値はease animation-delay：アニメーションを開始するまでの時間。初期値は0s animation-iteration-count：アニメーションを繰り返す数。初期値は1 animation-direction：アニメーションの方向。初期値はnormal animation-fill-mode：アニメーションの実行の前後のスタイルを指定。初期値はnone animation-play-state： アニメーションが実行中か停止中かを指定。初期値はrunning animationプロパティについて、詳しくは以下の記事も参考にしてください。 MDN – animation ここで、animation-durationとanimation-delayを利用することで、複数の要素のアニメーションを調整できます。シーケンシャルに動作させるには、前の要素のアニメーションが完了するまでの時間をanimation-delayに指定すると良いでしょう。   [PR] Webデザインで副業する学習方法を動画で公開中同期して動かす方法 同期して動かすには、animation-durationとanimation-delayを同じ値にすることになります。このようにアニメーションの構成を@keyframesで指定して、アニメーションのタイミングをanimationプロパティで個別にすると効率的でしょう。   animationの注意点 animationは要素の状態を変化させるため、周りの要素にも影響がでる可能性があります。 例えば要素の現在位置をmarginを使って指定した場合、隣接する要素の位置も変更されることになります。animationを使用する際は要素を絶対値(position:absolute)で指定する、display:flexを使うなどして、animationの影響範囲をコントロールできるようにしておきましょう。   実際に複数のanimationを動かしてみよう 今回のサンプルプログラムでは複数の要素をanimationで動かす方法について確認します。animationの内容は以下のサイトを参考にしています。 MDN – animation-name index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Sample</title> <style> @keyframes bounce {
CSS

HTMLとCSSだけでフェードイン、フェードアウトのアニメーションを実装する方法を現役デザイナーが解説【初心者向け】

HTMLとCSSだけでフェードイン、フェードアウトのアニメーションを実装する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   目次 フェードイン、フェードアウトのアニメーションとは フェードインの活用場面 HTMLとCSSの実装方法 フェードインとフェードアウトを実装してみよう そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   フェードイン、フェードアウトのアニメーションとは Webサイトを閲覧していると、ある項目の上にマウスを動かした時にふわっと画像などが出てきたり、ふわっと色が薄くなったりするのをよく目にしませんか？ ふわっと何かが出てくることをフェードインのアニメーションといいます。 反対に、ふわっと何かがなくなることをフェードアウトのアニメーションといいます。 以前はjQueryというJavaScriptのライブラリを利用して実装することが主流でした。 しかし、最近ではHTMLとCSSの進化により、HTMLとCSSだけで実装できるようになりました。   [PR] Webデザインで副業する学習方法を動画で公開中フェードインの活用場面  リンクの上をマウスが通過する時に視覚的な特殊効果を発生させたい場面 スクロール時にふわっと画像が現れるようなサイトが作りたい場面（スクロールの高さを読み込むには別途jQueryが必要）   HTMLとCSSの実装方法 CSSの記述 classに「animation」プロパティを定義 CSSに「animation」プロパティのclassを定義します。 「animation」プロパティの値でアニメーションのタイミングなどを設定可能です。 左の値から順に詳しく説明していきます。   例：フェードイン時に0.3秒遅れで、アニメーションを0.2秒かけて滑らかに1回表示する場合 .fade{ animation: fadeIn 0.2s ease 0.3s 1 normal; }   animation-name：アニメーションの名前（フェードイン時はfadeIn、フェードアウト時はfadeOut）  animation-duration：1回のアニメーションにかかる時間（1s＝1秒）  animation-timing-function：アニメーションの変化率（ease、linear、ease-out、ease-in-outなど）  animation-delay：アニメーションの開始を遅らせる時間（1s＝1秒）  animation-iteration-count：アニメーションを繰り返す回数 animation-direction：繰り返し時、どのように繰り返し表示するか（normal、 reverse、alternate、alternate-reverseなど）  「Keyframes」アニメーションで開始時と終了時を設定 CSSにkeyframesでアニメーションの流れを定義します。 例：アニメーション開始時は不透明度0%からスタートし、終了時には100%になる場合 @keyframes fadeIn { /*animation-nameで設定した値を書く*/ 0% {opacity: 0} /*アニメーション開始時は不透明度0%*/ 100% {opacity: 1} /*アニメーション終了時は不透明度100%*/ } HTMLの記述 HTMLではフェードインをしたいタグに「animation」プロパティを定義したclassを付けます。 例：class「fade」に「animation」プロパティを定義した場合 <div class="fade">ここがふわっとするよ</div>   フェードインとフェードアウトを実装してみよう こちらをつなげて書くと、CSSだけでフェードインアニメーションが簡単に実装できます。 <style> .fade{ animation: fadeIn 0.2s ease 0.3s 1 normal; } @keyframes fadeIn { /*animation-nameで設定した値を書く*/
HTML

簡単に作成できる！Unityでアニメーションを作る方法【初心者向け】

ゲームで演出をリッチにするためには、アニメーションを作成する技術が不可欠です。 アニメーションと聞くと何か敷居が高いものと感じる方もいらっしゃるかもしれませんが、Unityでは初心者の方でも簡単にアニメーションを作ることができます。 今回は、Unityでアニメーションを作る方法を解説していきます。 今回は3DのSphereをアニメーションで動かしていきたいと思います。 目次CSSでのフェードインの作り方様々なフェードインを見てみようフェードインを実装してみようまとめ監修してくれたメンター そもそもUnityについてよく分からないという方は、Unityとは何なのかについて解説した記事を読むとさらに理解が深まります。   大石ゆかり 田島メンター！！画面内のオブジェクトを動かす方法についてもっといろいろ知りたいです！ 田島悠介 では今回は、オブジェクトにアニメーションを追加する手順を解説しよう。 大石ゆかり アニメーションということは、オブジェクトに特定の動作をさせたりできるんですか？ 田島悠介 そうだね。移動させたり色を変えたりいろいろできるよ。まずは簡単な座標の移動からやってみようか。   Unityのアニメーションシステム Unityでは簡単にアニメーションを作成できます。 オブジェクトの位置、角度、大きさ、色など基礎的な値はものの1分ほどで設定できてしまいます。 アニメーションと聞くと、プレイステーション4のようなきれいな3Dモデルが自由自在に動いているものや、テレビで見るアニメのようなクオリティの高いものを想像するかもしれません。 そうした物を作るためには、Unity以外の力(Mayaや3DsMaxなどの3Dモデル、アニメーション編集ツール)が必要になってしまいます。 そこで今回は、Unityだけでできるアニメーションの例として、簡単な座標の変更を作ってみましょう。   まずは動かしたいオブジェクトにAnimationコンポーネントをアタッチします。 Animationコンポーネントは、Miscellaneous(その他)グループに含まれています。   次に、[Window]->[Animation]からアニメーションウィンドウを開きます。   アニメーションとアニメーターの違い Animation と Animator の違いについて解説します。 Animation と Animatorというと、大きく2つあります。 Animation コンポーネントと Animator コンポーネント Animation ウィンドウと Animator ウィンドウ   Animation コンポーネントと Animator コンポーネント Animation コンポーネントは 過去の仕組みです。 新しいプロジェクトでは、Animator コンポーネントを利用する必要があります。 過去のAnimation コンポーネントを残している理由としては、後方互換性を確保する意味があります。 つまり、Animation コンポーネントを知らなくても良いということではありません。   Animation ウィンドウと Animator ウィンドウ Animation ウィンドウ では、フローチャートに似たシステムを利用して、アニメーションクリップ全体の取り扱いが可能です。 Animator ウィンドウでは、アニメーターコントローラーアセットを作成・表示・修正できます。   田島悠介 アニメーションの作成を開始してみよう。Hierarchyで動かしたいオブジェクトを選択して、AnimationウィンドウのCreateボタンを押すんだ。 大石ゆかり ファイルの保存ダイアログが表示されました。 田島悠介 アニメーションの名前をつける部分だね。普段は「Jump」や「Walk」などの名前を付けるけれど、今回はサンプルだから「Sample.anim」という名前で作成してみよう。   [PR] Webデザインで副業する学習方法を動画で公開中簡単なアニメーションを作成してみる アニメーションを作成する準備ができました。 実際にアニメーションを作っていきましょう。 （画像はクリックで拡大表示されます。） 田島悠介 それではアニメーションを作っていこう。 Unityでは、キーフレームアニメーションとよばれる方法を採用していて、特定の時間におけるプロパティの値を設定することで、値の補間によってアニメーションを行うよ。 大石ゆかり 難しくてよくわからないです・・・ 田島悠介 はじめはそうだね。実際に触ってみれば感覚がつかめるよ。   アニメーションの作成には、Animationウィンドウ左上の録画ボタンが便利です。 まずはこの録画ボタンを押してみましょう。   録画ボタンがONになっている状態でインスペクタからオブジェクトのパラメータを変更すると、入力フィールドが赤く変化します。 また、この際Animationウィンドウにはキーフレームが追加されています。 　   上記の操作で、0フレーム目にキーフレームが打たれました。 フレームの移動は、画像の部分をドラッグすることで行います。 今回は、30フレーム目に移動してみます。   30フレーム目でもオブジェクトの座標を変更してみます。   フレームを移動させることで、補間されていることを確認できます。   再生ボタンを押すことで、実際の速度でプレビューが行われます。   アニメーションの編集を終える際は、忘れずに次の2つの操作を行ってください。 ・録画モードの停止 ・フレームを0フレーム目に戻す 録画モードの停止やフレームを0フレーム目に戻す操作を行わないと、普通にオブジェクトの座標を変更したい場合でも、アニメーションのフレームとして保存されてしまいます。 録画モードのON/OFFは、Animationウィンドウ左上のアイコンで確認できます。 （時計アイコンになっていれば録画モードOFF）   アニメーションの再生 実行時にアニメーションを再生するには、作成したアニメーションをAnimationコンポーネントのAnimationプロパティに設定します。   また、アニメーションをループさせる場合は、Projectタブでアニメーションを選択し、InspectorタブでWrapModeを変更します。 今回はループさせるために「Loop」に設定してみます。   実行時にアニメーションが再生されます。   まとめ 今回はUnityで簡単なアニメーションを作成していきました。 今回は移動を行いましたが、他にも回転、拡大など様々な効果をつけることができます。 アニメーションをマスターすれば、今後のゲームの表現の幅が広がること間違いなしです。 ぜひとも理解を深めていくようにしましょう。   田島悠介 今回はY軸を指定したので上下に動いたけれど、例えばz軸の値で動かすとオブジェクトが手前と奥に移動するよ。 大石ゆかり インスペクタで編集できる値は、どれもアニメーションさせることができるんですね。 田島悠介 座標の移動以外にも、オブジェクトの大きさを変更したりマテリアルを途中で変化したりと、様々な効果を加えることができるんだ。基本的な手順は今回と一緒なので、ぜひ練習してみよう。 大石ゆかり いろいろ追加して試してみます。ありがとうございました！   Unityを学習中の方へ これで解説は終了です、お疲れさまでした。 つまずかず「効率的に」学びたい 副業や転職後の「現場で使える」知識やスキルを身につけたい Unityを学習していて、このように思ったことはありませんか？ テックアカデミーでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、はじめてでもUnityでオリジナルゲームの制作ができるようになります。 まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。 時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
Unity

1900年代のデザインの歴史から学ぶ！デザインの基本とは

本稿は、Smashing Magazineのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事は、Dmitry Fadeyev氏によって投稿されました。   近年人気の高い「フラット」なインターフェースのデザインは、単なるトレンドではありません。それは真のデザインへの欲求の現れです。つまり、視覚的に過剰なものを抑え、偽物や余分なものを排除しようとする欲求です。 技術の進歩はときに過剰なものを生み出すことがあります。 19世紀には、機械化された大量生産によって、装飾品を早く生産することができるようになり、その結果、製品は過剰に装飾されるようになりました。   近年、同様のことがデザインの世界でも起きています。 ディスプレイやスタイリングの技術の進歩によって、デザイナーたちはリッチな外観のインターフェースをデザインすることが可能になりましたが、その結果、スキュアモーフィックデザイン（現実の質感を模倣したデザイン）やスタイリングが過剰になりました。 モダンデザインの運動は、本物のデザインを求める過程で、19世紀の過剰な装飾を抑制することによって、現代の大量生産によりふさわしいデザインを生み出しました。   目次 モダンデザインの誕生 デジタルの装飾 本物のデザイン ミニマリズムではない 本物のデザインが重要である理由   モダンデザインの誕生 1908年、オーストラリアの影響力の強い建築家であるアドルフ・ロースは、『装飾と犯罪』という挑発的なタイトルのエッセイを書きました。 ロースは、「現代の装飾主義者たちは、文化的に遅れているか病理の症例である。彼らの作品は今後3年も持たないだろう。彼らの生産したものは、文化人には受け入れがたいものであり、他の人々にとってもやがてそうなるだろう。」と主張しています。 さらに大胆にも、「人々の水準が低いほど、装飾は贅沢になる。装飾に依存するのではなく、形に美しさを見つけることが、人類が目指すべき目標である。」と主張しています。   なぜロースは装飾を批判するに至ったのでしょうか？モダンデザインの先駆者であるロースのマインドセットを理解するには、初めに19世紀のデザインの実態を知る必要があります。 蒸気機関の発明によって、機械化された大量生産の時代が始まりました。美術評論家のフランク・ウィットフォードは、「蒸気駆動の機械は、人間の手作業よりも速く、より規則的にほぼすべての物質を切って型抜きして、生産することができます。 生産が機械化されたことにより、より低い価格でより高い利益が実現されています。」と書いています。   しかし生産方式が人の手作業から機械に変化した一方で、製品のデザイン自体は変化しませんでした。 建築や家具から衣類や食器に至るまで、ほとんどの製品には、ルネサンス時代からの伝統的なデザインに基づく、豪華な装飾が加えられていました。 歴史的に、人の手作業による装飾品は生産コストが高く、富と贅沢の象徴とされてきました。しかし機械化によって、こうした需要の高い装飾品の模造品を安く早く生産できるようになりました。 どのようなデザインが大量生産に適しているのかを立ち止まって考えることもなく、メーカーは低コストで歴史的なデザインを模造することができる機会に飛びつきました。 その結果、アドルフ・ロースをはじめとするモダンデザインの先駆者たちが批判したような、低品質で装飾が過剰な製品が氾濫するようになったのです。   有名な建築家であるル・コルビュジエは著書の『今日の装飾芸術』の中で、「ごみが豊富に装飾されているものである。」と遠回しに批判しました。また「贅沢な物は、しっかりとした造りで、美しくクリーンで、純粋で健康的です。無装飾なそのままのものには製造のクオリティが現われます。 しかし、製造業界ではこのことが逆転しています。装飾の多い鋳鉄製のストーブは、普通のものよりも生産コストが低いのです。というのも葉のパタンの装飾が多く施されていれば、鋳造の欠陥が見つかりにくいからです。」と述べています。   また、影響力のある批評家・ジャーナリストであるモントゴメリー・シュイラーは、19世紀のファサード（建築物の正面）の装飾について批判しました。 「もし通りの建築物の表面の装飾を削り取ったとしたら、すべての建築スタイルを取り除いたことになるが、今までと変わらない良い建築物になるだろう。」と述べています。 「超高層ビルの父」として知られる建築家のルイス・サリヴァンは、「元型として良く形成された美しい建築物を生み出すことに集中するために、何年もの間、装飾をやめるとしたら、私たちの美学的な利益に資するだろう。」と述べ、装飾を抑制することを主張しました。 1920年代には、ドイツで新即物主義という美術運動が起こりました。 新即物主義は、純粋な実用性をデザインに求める運動でした。ドイツの建築家ヘルマン・ムテジウスは、彼自身が機械のスタイルと呼ぶものを生み出すために、実用性をスタイルにどのように適用できるかを説明しました。ヘルマンは、「鉄道列車の駅、展示ホール、橋、蒸気船などにその例を見ることができます。   一方、他のモダンデザインの先駆者たちは、装飾を批判する代わりに、機能的な形態を高めることに集中しました。 1934年、近代建築家のフィリップ・ジョンソンによって企画された展覧会「マシンアート」が、ニューヨーク近代美術館で開催されました。 展示品として、飛行機のプロペラや産業用断熱材など、さまざまな機械的な備品が並んでいました。 この展覧会の目的は、純粋に機能的な目的に従った形態を持つ物の美しさを強調することでした。そして、美しさと上品さは、表面的な装飾からではなく、デザイン自体から生まれるということが示されたのです。 モダニズムの運動が浸透するには、20世紀前半の時間の多くを要しましたが、最終的にはこの新しい手法が、伝統的なスタイルや技術に勝利しました。 Jonathan Woodhamは、著書『Twentieth Century Design』において、「現代の美学は、クリーンな幾何学的形状・クロムメッキ加工された鋼・ガラスなどの現代的な素材の使用、平面の明暗への人工的な操作によって特徴づけられる。色の使用はしばしば抑制され、ホワイト・オフホワイト・グレー・ブラックなどの色が強調される。」と述べています。 モダンデザインの運動が全体として反装飾的なものであったと見なすのは誤りです。アール・ヌーヴォーやアール・デコなどに代表される新たなデザイン様式が、現れては消えました。 未来派のスタイルは、誇張された技術的な美学を推し進め、一方、デ・ステイルのスタイルは、数を制限したパタンや形の中に調和を見出しました。   しかし、これらのスタイルの変容の根底にあったのは、必要のない装飾からの脱却でした。 モダンデザインの運動は全体として、よりクリーンで、美しさを表面的な装飾よりもスタイルや形態そのものに見出すような、抑制されたデザインを求める運動だったのです。   [PR] Webデザインで副業する学習方法を動画で公開中デジタルの装飾 モダンデザインの歴史とソフトウェア・Webデザインの短い歴史を比較すると、似ている点があることに気づきます。 機械化された大量生産が装飾の過剰使用をもたらしたのと同様に、ディスプレイやスタイリングの技術の進歩は、ソフトウェアのインターフェースやWebサイトにおいて過剰な装飾をもたらしています。 初期のWebデザイナーたちは装飾に積極的であり、画像にアニメーションや音を加えて、過度にリッチで派手なユーザー体験を生み出しました。 グラフィカルユーザーインターフェイスを備えた初期のオペレーティングシステムは、外観や使用感は依然として基本的なものでした。   もっとも、ファイルのディレクトリを表すためにフォルダの画像を示したり、ユーザーにクリックできることを伝えるために面取り効果の加えられたボタンが示されるなど、現実世界に近いデザインにするための試みがなされました。 しかし、Webデザイナーが視覚的にリッチなユーザー体験を創造したいと思ったかどうかに関係なく、当時は白黒の低解像度のディスプレイであったため、デザインは全体的にフラットで抑制されたものでした。 技術の進歩に伴い、デザイナーたちはインターフェースの外観デザインにおいてより大きな自由を獲得しました。MicrosoftはWindows XPで、カラフルなスタイルを導入し、ハイライト、シャドウ、グラデーションを豊富に使用した外観になりました。 さらにAppleは、新たにリリースしたMac OS Xで、光沢感のあるプラスチック製の泡、ブラシ加工されたアルミ、リアルなアイコンなどをインターフェース上で表現することに成功しました。   また、MicrosoftはWindowsに、光沢感のある透明なガラスのようなテーマを加え、Appleはカレンダーアプリに革のテクスチャを導入したり、ブックリーダーにページめくりの機能を加えるなど、デスクトップおよびモバイルのシステムにより実物に近いデザインを導入しました。 現実世界のオブジェクトやテクスチャを模倣したスタイルのことを、「スキューモーフィズム」といいます。 インターフェースをユーザーにとって親しみやすい外観にするという唯一の目的のために、デザイン要素は現実世界の物に似せて作られます。   しかしデザイナーたちは近年、ノートアプリを紙のメモ帳に似せてスタイリングすることや、カレンダーアプリに革のテクスチャやページめくり機能を加えることの理由に疑問を感じ始めました。 これらの効果はユーザーの関心を引く外観をデザインできますが、現実世界の静的な物体を、それとは相容れない流動性やダイナミズムのあるデジタル世界のインターフェースと結び付けようとする過去の遺物なのです。 MicrosoftはWindows 8のリリースで、こうした過剰な外観から脱するために勇敢な一歩を踏み出し、オペレーティングシステムを完全にデジタル化して「本物の」外観にすることを試みました。 インターフェイスは、Microsoftが初期のモバイルリリース用に適用した原則に基づいて設計され、テクスチャや現実世界のオブジェクトの模倣をほぼ完全に排除した外観となりました。 その代わりにデジタル画面に秩序と上品さをもたらすために、Windows 8は、タイポグラフィ・間隔・色に工夫がなされています。現実世界を模倣した効果、過剰なスタイルを排除した後に残ったのは、シンプルなコンテンツのみでした。   かつてヘルマン・ムテジウスが、鉄道列車の駅を例として挙げたように、Microsoftのデザイナーたちは、「Metro」という名称で知られれるWindowsのインターフェースのインスピレーションを、地下鉄の駅の標識から得たと述べています。 また、近年Webも同様の変容を遂げました。表やFlashに基づく初期のデザインによって、エンジニアはインターフェースをピクセルパーフェクトに制御することが可能になり、デザイナーもコンテンツのためにリッチな外観を備えたコンテナをデザインすることを躊躇しませんでした。   しかし、新しいメディアの流動性を受け入れ、CSSを使用してデザインとコンテンツを分離するようになるにつれて、Webデザインはより拘束されるようになりました。 装飾が多く加えられたコンテナは、幅や位置の変更が容易ではありませんでした。そのため、デザイナーは画像の数を減らして、レイアウトをより適応性が高く保守しやすくするためにCSSのスタイリングを使うようになりました。   近年はレスポンシブデザインの進化、またデザイナーたちにはPhotoshopを使わずに最初からコードでデザインを始める傾向も見られます。 こうした動向は、テクスチャや装飾的な画像を多用するのではなく、タイポグラフィ・間隔・色から美しさを引き出すような、よりシンプルでコンテンツに焦点を当てた、本物のWebデザインの美しさを推し進めています。   Appleも、モバイルのオペレーティングシステムであるiOS 7のリリースにより、本物のデジタルデザインへの第一歩を踏み出しました。 縫製の革のテクスチャ、破れたページ端のデザインは消え、代わりにシンプルなアイコンと半透明な表面を備えた、ほとんどフラットなデザインのインターフェースとなりました。   本物のデザイン モダンデザインの先駆的な時代から、現代のソフトウェアおよびWebデザインの変容に受け継がれているものは、本物への欲求です。 この欲求こそ約100年以上前にデザイナーたちの作品から装飾を削ぎ落としたものであり、現代のデジタルデザインをよりクリーンで、より機能的な美しさを備えたものに変える原動力となっているのです。   しかし、正確には何がデザインを「本物」にするのでしょうか？ 本物のデザインの目的は、偽物を否定し余剰を排除することです。本物のデザインは、偽物のテクスチャで素材をマスキングしたりせずに、弱点を隠す代わりに強さを見せるものです。そして製品をより親しみやすく、または魅力的に見せるためだけの無意味な機能を排除します。機能は最適な形態で表現され、効率性にこそエレガンスさがあることに確信を持てるものです。 そして表面的な装飾を排して純粋なコンテンツに美しさを見出します。   本物のデザインにおいてスタイルが重要ではないということはありませんが、装飾によって追求されるものではないのです。むしろ、形態の美しさはコンテンツに依拠するものであり、スタイルはクリエイティブな解の結果として自然に生じるものです。 スージック.Dは、アングルポイズスタイルのランプ（以下画像参照）について次のように言及しています。 「ランプがどのように見えるかは――特にシェード（笠）の部分は――後付的なことでした。しかし、そのことは魅力的なことであったのです。ちょうどランドローバー（イギリスの自動車メーカー）の初期のデザインは、消費者受けを狙ったというよりも、技術的に独創的なアイデアを基礎としていたことで信頼性を高めたように、審美性を考慮しない本来のピュアな形態からこそ、本物が生まれるのです。」 デジタルデザインにおいては、デザインは大きく次のように集約できます。 デジタルな外観を保持すること 金属、木材、革などのテクスチャをコンピュータの画面上で模倣する必要はありません。デジタルインターフェイスはこれらの素材から作られているわけではないので、模倣することには意味がありません。 しかし、平面のフラットな背景色だけでデザインするべきだということでもありません。むしろ、現実世界のテクスチャを模倣しようと試みたり、それに拘束されるべきではないという意味です。   スキューモーフィズムを排すること 電子書籍は、ページをめくるときに実際の紙を模倣する必要はありません。またノートアプリも、革のカバー、破けた紙の切れ端、手書き風文字などを備えた実際の紙のメモ帳のように見える必要はありません。スキューモーフィズムはいつも悪となるわけではありませんが、インターフェース上に不必要な制約を生み出します。 例えば、メモ帳アプリのインターフェースを、現実世界のものに似せて作ろうとしたら、物理的な模倣をすることに制約が生じます。一方、静的で一次元なデザインにするとしたら、そうした制約はありません。   コンテンツを中心にしたスタイルにすること スタイリングや装飾よりも、コンテンツに集中しましょう。このことは当然に思えるかもしれませんが、多くのWebサイト上では、既製のテーマが繰り返されているのではないでしょうか？ テーマは常にダミーのコンテンツをベースに作られているため、本質的に、最適なコンテンツを表現することは不可能です。ダミーのテキストによってテーマを作る場合には、すでにコンテンツは形骸化しているので、デザイナーはスタイリングと装飾に走ることになるでしょう。   ミニマリズムではない 機能性に美しさがあるデザインは、ミニマリズムのデザインとは同じではありません。 前者は、使いやすく、効率性の高い、利用性が最大限に高められた製品を生産するために、デザイナーが余剰を排除して生まれるデザインです。 一方、後者はミニマリズムの美学を追求することにより生まれるデザインであり、オブジェクトにシンプルさと美しさをもたらします。一方はデザインの基本原則であり、もう一方はスタイリングの選択肢なのです。 インターフェースをよりシンプルで「本物」らしくするために、ミニマリズムのデザインを、スタイルとしてインターフェースのデザインに厳格に適用することは、間違いです。 例えば、シャドウ、色、背景の多様なスタイルなどを見境なく排除する場合、必ずしもインターフェースが使いやすくなるとは限りません。 ジョン・マエダは著書の『シンプリシティの法則』の中で、「シンプルさを達成する最も簡単な方法は、思慮深い削除です。不確かな場合は、削除してください。しかし削除するものには注意してください。」と述べています。 要素を削除することがシンプルさにつながるのは、ユーザーが処理するアイテムが少なくなるからです。   しかし、ユーザーがインターフェースの操作を理解するための視覚的な手がかりまで削除することは、――アイテムをまとめ、要素を目立たせるためにボタンやラベルを区別化するのが、グラフィカル要素の役割であるため――かえってユーザーの負担が増えて逆効果です。 そのため、ユーザーへのガイドは、スタイルによってというよりも、デザインの原則によって実現するべきです。   本物のデザインが重要である理由 Riseというアプリは、本物のデジタルデザインの完璧な例の1つです。 目覚まし時計はすでにアプリとして開発されていましたが、このアプリを開発した会社Simplebotsは、純粋なデジタルキャンバスのコンテキストにおけるインターフェイスを再考することで、概念にゼロから取り組んだのです。 Riseのインターフェイスにはフルスクリーンのスライダがあり、時間設定した時の空の色に合わせて背景色が変化します。現実世界の時計、スライダー、テクスチャなどは模倣していません。 その代わりに、Riseのデザイナーたちは、モバイル端末のタッチキャンバス機能に対応するデザインを生み出し、端末を最大限に活用できるようなユーザー経験を創造しています。革新的なデザインは、優れたユーザー体験を実現するだけではなく、アプリ市場で目立つことができます。 Riseのようなインターフェースは、現実の世界にソリューションを求めるというよりも、デジタルなコンテキストの中で、完全に設計上の問題に取り組む場合にのみ実現可能です。   コンピュータの画面上では、抽象的なフォーム、アニメーション、明るい色、均一なシェイドを表現することが可能です。カラーパレットを抑制したり、静的表現に限定する必要はありませんが、スキューモーフィズムに縛られてもいけません。 ピクセル単位のグリッドを使用して、コンテンツを表現する最良の方法を理解することによって、より良いシンプルなソリューション、使い心地が良い画面を備えた革新的なインターフェースを実現することが可能となり、より良いユーザー体験を提供し、その他大勢から目立つようなアプリのデザインを実現できます。   まとめ 近年人気の高い「フラット」なデザインは、1つのトレンドかもしれませんが、余剰な装飾を排除してコンテンツに集中することへの欲求の現れでもあるのです。19世紀に機械化された大量生産によって過度な装飾を生み出したように、またディスプレイやスタイリングの技術が初期のWeb・ソフトウェアデザインにおいて同様に過剰なデザインを生み出したように、技術の進歩は過剰につながることがあります。 しかし、機能性に美しさを求めたモダニズムの先駆者たちによって、過剰な装飾が時間をかけて排除されたように、今日のソフトウェアにおける過剰も、やがて真のデザインへの欲求によって排除されることになるでしょう。   TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。 今後Webデザイナーとして働きたい、自分で思った通りのデザインを再現したいと思っている方はぜひご覧ください。
Webデザイン

Javaのインターフェースでフィールドを宣言する方法を現役エンジニアが解説【初心者向け】

Javaのインターフェースでフィールドを宣言する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   Javaについてそもそもよく分からないという方は、Javaとは何なのか解説した記事を読むとさらに理解が深まるでしょう。   なお本記事は、TechAcademyのオンラインブートキャンプJava講座の内容をもとに作成しています。   田島悠介 今回は、Javaに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 インターフェースでフィールドを宣言する方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 インターフェースとは インターフェースの基本的な書き方 インターフェースでフィールドを宣言する方法 実際に書いてみよう まとめ   インターフェースとは インターフェースとは、抽象メソッド（処理の内容を書かずメソッド名と戻り値の型や引数のみを設定するメソッド）を持ち、処理内容を定義した通常のメソッドを持たない特殊なクラスです。 インターフェースは抽象メソッドを持つため、インスタンスを作成するには別のクラスにimplementsキーワードを使って実装する必要があります。 インターフェースを実装したクラスでは、インターフェースに書かれている抽象メソッドの処理を書いて定義する必要があります。 ※例外としてstaticで宣言する静的なメソッドは処理内容を定義してインターフェースのメソッドに含められます。   [PR] Webデザインで副業する学習方法を動画で公開中インターフェースの基本的な書き方 インターフェースの基本的な書き方は以下のように記述しましょう。 interface インターフェース名 {   public abstract 戻り値の型 抽象メソッド名(引数の型 引数名); } 抽象メソッドはabstractキーワードをつけることで表せます。 戻り値の型と引数、抽象クラス名のみを記述し、抽象メソッドの具体的な処理は不要です。 抽象メソッドは単独で使うことはなく、抽象クラスは実装された別のクラスに抽象クラスの処理をオーバーライドして使用します。 実装の記述方法は以下のようになります。 class クラス名 implements インターフェース {   @Override   pulibc 戻り値の型 抽象メソッド(引数の型 引数名) {     処理;   } } 一つのクラスにインターフェースを複数実装することができるものの、全ての抽象クラスをオーバーライドしなければなりません。   インターフェースでフィールドを宣言する方法 インターフェースには、抽象メソッドを記述することができるものの、通常のメソッドは記述できません。 また、privateのフィールド変数を宣言することはできないものの、定数は記述可能です。 定数は以下のよう記述します。 interface インターフェース名 {   public static final 型 定数名; } 定数は別のクラスで以下のように使用しましょう。 インターフェース名.定数名 通常インターフェースは定数のみではなく、必ず抽象クラスを一つは記述します。   実際に書いてみよう 実際にインターフェースで定数を宣言してみましょう。 ソースコード public class MainClass { public static void main(String[] args) { SampleClass sample = new SampleClass(); int price = 2000;
Java

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から16週間で
エンジニアに

エンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の第四次産業革命スキル習得認定講座で、厚生労働省指定の専門実践教育訓練給付制度の対象です。条件を満たすことで支払った受講料の最大70％（最大306,460円）が給付金として支給されます。詳しくは エンジニア転職保証コース のページ内の注意事項をご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

テックアカデミーGAIナレッジベース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン CSS CSSだけでフェードインアニメーションを実装する方法を現役エンジニアが解説【初心者向け】