Webデザインのこと、いろいろ

Webデザインにまつわることを自分用にメモしています。

Photoshopを使いこなす・01

Adobeの公式サイトにあるチュートリアルから学習する。

普段のPhotoshopの使い方よりも、効率的な使い方がある、
また、自分のPhotoshopでの癖が、効率を悪くしているかもしれない、
ということで、一通りためしてみることにしました。

(1)のチェックリスト

リンク:ベテランほど知らずに損してるPhotoshopの新常識 | Adobe Creative Station
(引用)
□ 背景レイヤーを解除するのに、ダブルクリックしてダイアログボックスを出して[OK]ボタンをクリックしている
→そうしていました
解決方法:「背景」レイヤーをoptionキー(Altキー)+ダブルクリックすれば、[新規レイヤー]ダイアログボックスをスキップできる。

□ オプションバーやパネルの値の調整を、テンキーから行っている
→知っていました
これは知らなかった:shiftキーの併用で増減のステップ幅が変わります
optionキーだと、ゆっくり増減

□ ブラシサイズの変更を数値を使ったり、[キー(]キー)で行っている
→そうしていました
解決方法:control+option+ドラッグ(WindowsではAlt+右クリックでドラッグ)することで、水平方向ドラッグはブラシサイズ(直径)、垂直方向ドラッグはボケ足(硬さ)を視覚的に確認しながら変更することができます。
※これによって、ボケ足も調整できる。

□ カンバスサイズを変更するのに、[カンバスサイズ]ダイアログボックスを開いて、数値を指定している
→知っていました
これは知らなかった:カンバスの設定における、相対の使い方。いちいち計算していた。

=========

(2)のチェックリスト

リンク:ベテランほど知らずに損してるPhotoshopの新常識(2)ズームとスクロール | Adobe Creative Station

(引用)
□ ズームツールの挙動が以前と変わってしまった。拡大したい箇所をドラッグしたいのだが…
□ [手のひらツール]でドラッグすると滑るように画像が移動する。従来にように戻したい
□ [ツール]パネルやオプションバー、パネルが暗くなってしまった。従来のように明るくしたい

→ズームの設定を色々と変更できることを知らなかった
解決方法:最近のPhotoshopでの画面の暗さやズームやスクロールの挙動は環境設定で変更可能

→バードアイビューを知らなかった
解決方法:Hキーの使い方。もう少し練習しないと理解できないが、使いこなせると便利そう。

□ [ツール]パネルやオプションバー、パネルが暗くなってしまった。従来のように明るくしたい
→何のことを言っているのか、文章の意味がわからなかったが、UIが暗くなったものを変更できるよ、
と言っているようです。自分にはデフォルトのグレーが一番使いやすいです。

webリテラシーの学習・03 Web業界で使われる単語 つづき

参考 
ferret-plus.com

わからなかった単語

KPI(ぼんやりとは知っています)

KGI(ぼんやりとは知っています)

参考:
ferret-plus.com

★KPI(Key Performance Indicator)とは、重要業績評価指標と呼ばれ、最終的な目的を達成するための過程を計測するための中間指標のことです。企業やプロジェクトが目標を達成しようとする際に、その目標達成プロセスの進捗度合いを表す指標。
その最終目標を達成するために不可欠な過程をを洗い出し、過程をどのくらいの状態で通過できれば、最終的な目標が達成できるか、そしてしっかりとクリア出来ているかどうかを数値で計測するのが「KPI」です。
☆KGI(Key Goal Indicator)とは、最終目標が達成されているかを計測するための指標のことで、重要目標達成指標とも呼ばれます。
KGIは曖昧な指標では意味を成さないため、誰でも公平に判断できるよう時期と具体的な数値を設定し、明確な判断基準としておくことが基本となります。
"KPI、KGI共に具体的な目標が必要"
"KGIとKPIは、目標とそこに辿り着くまでの過程を誰でも共通して認識できるように言語化・数値化された指標です。
KGI、KPIが明確になるとメンバーの意思統一が図りやすく、チームに対しての評価も公平に行うことができます。
もしKPIが達成していたのにKGIが達成できなかった場合は、そもそものKPI設定が間違っていた可能性が高いため、手法を見直す必要があるでしょう。改善のきっかけをつかむためにも、KGIだけでなくKPIも明確に設定し、蔑ろにせずに厳密に計測するようにしましょう。"

シナジーsynergy

ferretによると:
相乗効果のこと。複数の企業が連携して運営を行うことで大きな結果を出すことを指す。
「お互いのシナジーを考えて、共同で運営するべきだ」

        • -

複数の企業がアライアンス(協働)をすることによって有利に事業が展開される場合や、一つの企業内の別々の事業部門が協働することで、やはり有利に事業が展開される場合、シナジー効果が発揮されたことになる。例えば、銀行が小売店に支店を出す場合、銀行は支店の経費を安く出せる上、顧客へのサービス向上、新規顧客の開拓ができる。一方、小売店からするとスペースを提供する料金収入のほかに、来客数の増加が見込めるなどの相乗効果が得られる。
引用は下記から:
kotobank.jp

シュリンク(shrink)

ビジネスシーンで使う場合の、シュリンクには、主に次の二つがあります。
●物やデータを小さくする技術または、圧縮すること。
●市場や購買意欲などが縮むこと。
どちらも、縮む、減るという意味の(shrink)が語源となっています。
シュリンクとは、「圧縮する」「縮む」「衰退する」と覚えておきましょう。
引用は下記から:
employment.en-japan.com

クラッチ(開発)

システム開発で、特定のパッケージ製品のカスタマイズや機能追加などによらず、すべての要素を個別に最初から開発することをスクラッチ開発という。ソフトウェア開発の場合は、元になるソースコードや雛形などを使用せず、何も無い状態からコードを記述していくことをスクラッチ開発という。他から流用する要素が一切無い場合を特に「フルスクラッチ」(full scratch)ということがある。
e-words.jp

副詞の「from scratch」は「最初から」「ゼロから」という意味を持つ。「Scratch」は地面を引っ掻いてつけるスポーツのスタートラインの意味もあり、ビジネスシーンなどで「スクラッチ」=「最初から」「ゼロから」という意味で使われる。
スクラッチ(ビジネス用語)とは - 意味 | IT用語辞典 サバナビ

webリテラシーの学習・02 Web業界で使われる単語 つづき

参考 
ferret-plus.com

わからなかった単語

エスカレーション

エスカレーションとは、マーケティング用語、特にコールセンター用語で、顧客対応においてオペレーター自身だけで対応が困難な場合、上位の管理者やスーパーバイザーなどに交代して対応してもらうこと。 また、上位者の指示を仰ぐこと。 略語はエスカレまたはエスカ。

エスカレーションは主に、障害対応やクレーム処理の場で使われます。組織の中でボトムアップ方式で報告や相談を上司に行う際に用いられるビジネス用語です。エスカレーションを行わなければいけない事態は、会社内でも緊急事態の場合です。個人の判断で報告を怠ることは避けなければいけないことでしょう。
引用は下記より。
gakumado.mynavi.jp

オーソライズ(authorize)

正当と認めること。公認すること。

特にサービス業務や商品の販売などに関して、公の機関や権限のある人に対して申請し、認定や承認をもらうことで「オーソライズされる」ことになります。正式な権限があるのか承認を受けているものかどうかを確認するために「オーソライズはされていいますか?」と聞かれることもあるでしょう。
ビジネスでオーソライズという言葉が出てきたら、公認かどうかを意味するものと認識しましょう。
引用は下記より。
https://gakumado.mynavi.jp/freshers/articles/43536

オルタナティブalternative

「二者択一 ・ 代案 ・ 既存のものに取ってかわる新しいもの」という意味です。
「二者択一」は、2つのうちの一つを選ぶ(どちらかを選ぶ)という意味です。
こちらが本来の意味のようですが、日本語ではこの意味での使われ方は少ないです。
どちらかというと、「代案」や「もう一つの新しいスタイル」というような意味で使われることが多いです。
冒頭の「オルタナティブ投資」というのは、「代替投資」と言われ、株などの伝統的な投資ではなく、比較的新しい投資のことを言います。
「新しいものへの代替」という意味で考えると、ほぼ意味は理解できると思います。
引用は下記より。
オルタナティブの意味とは

※参考:オルタナティブ投資
具体的な投資対象としては、農産物・鉱物、不動産などの商品、未公開株や金融技術が駆使された先物、オプション、スワップなどの取引が挙げられます。
オルタナティブ投資│初めてでもわかりやすい用語集│SMBC日興証券

※ロックにおけるオルタナティブ
現在の商業的な音楽や流行音楽とは一線を引き、時代の流れに捕われない普遍的なものを追い求める精神や、前衛的でアンダーグラウンドな精神を持つ音楽シーンのことである。
引用は下記より。(へぇぇ)
オルタナティヴ・ロック - Wikipedia

カットオーバー

ferretによると:
新しいシステムを開発・導入すること。また、旧システムから新システムに移行することを指す。
「このシステムのカットオーバーはいつ?」

        • -

カットオーバーとは、新たに開発された情報システムを実際の業務で利用開始すること。また、その時点や時期。「サービスイン」(和製英語)「本番化」「本稼働」「本番移行」などもほぼ同義として用いられる。
引用は下記より。
e-words.jp

クロージング

ferretによると:
顧客に購入や契約を決断させること。
「今日こそしっかりクロージングしよう」

        • -

"『人はお金を払う時、脳内で物理的な痛みを感じている時と、同じ反応が起こっている』"
"クロージングというのは「タイミング」が命です。"
"そもそも、ブログやランディングページに訪れた客というのは、ほとんどが「情報収集」や「(競合他社との)比較や検討」の目的で訪れています。"
"そこで必要になるのが、見込み客の「教育」になります。"
引用は下記より。このサイトはとても勉強になりました。
viral-community.com

Webリテラシーの学習・01 Web業界で使われる単語

参考 
ferret-plus.com

わからなかった単語

アウトバウンド

勧誘、案内などの電話を外へかけること
ビジネス一般では、企業側が、顧客からの電話や来訪などを受け付ける形態の業務。
アウトバウンド⇔インバウンド

アクイジション(acquisition)

広くは「取得」「獲得」と言う意味の英単語で、新規顧客を獲得するということ。
新規顧客を獲得するには、まず自社のことを知ってもらうところから始まるので、既存顧客よりコストと時間が約5倍もかかる(1:5の法則)。
M&A」の「A」がこのアクイジションである。

          • -

M&A(エムアンドエー)とは『Mergers(合併)and Acquisitions(買収)』の略。 M&Aの意味は、企業の合併買収のことで、2つ以上の会社が一つになったり(合併)、ある会社が他の会社を買ったりすること(買収)です。

          • -

引用は下記リンクから。
www.synergy-marketing.co.jp

アジャイル

ferretによると:
素早い、俊敏な、の意味。とくにIT/Web業界では、経営環境の変化に素早く対応できる柔軟なシステムや、効率的なシステム開発手法などを指す。「このプロジェクトはアジャイルで進めましょう」
参考:NECアジャイル開発
www.nec-solutioninnovators.co.jp

アライアンス(alliance)

企業同士の連帯。
複数の企業が互いに経済的なメリットを享受するために、緩やかな協力体制を構築すること。 1つの企業に統合する必要があるM&Aに比べて、時間・資金をそれほど要することなく進めることができ、思惑が外れた場合の解消も容易にできる点で異なる。

イニシャルコスト

新しく事業を始めたり、新しく機械や設備などを導入したり、新しく建築物を建築したりするときなどに、稼働するまでの間に必要となる費用のことである。初期費用ともいう。
これに対して、稼動が始まってから使い続けるために必要となる光熱費や各種消耗品代、メンテナンスにかかる費用、定期的に支払う利用料などはランニングコストという。
引用:wikipedia
イニシャルコスト - Wikipedia

Webの動画広告についてのメモ

自分のポートフォリオサイト用記録

わからなくなった部分のメモ

☆レスポンシブで、spサイズのときcssのoverflow: hidden; を解除する
overflow-スタイルシートリファレンス:参考サイト

☆埋め込み動画(youtube)を可変サイズに
Youtubeなど埋め込み動画をスマホ表示用に可変サイズにする | ウェブソク:参考サイト

Youtube 「style=”max-width:100%;”」を追記する方法
youtube動画の埋め込み(iframe)がスマホでも切れないようにする方法 | FOOLINE:参考サイト

☆トップページの .link_content部分 height: 100% が上手くいかない
"height: 100%" の要素が画面の高さ100%にならない場合の対応方法 - Qiita:参考サイト
CSSでheight:100%を使う方法について。 | Ginpen.com:参考サイト

スマホの最小幅は320px??

☆videoタグのこと
スマートフォン向けにHTML5のvideoタグを使ってみたのでまとめておく | キョウダケダカンナー:参考サイト

☆.mp4で書き出し
[Creative Cloud 入門] After Effects のムービーを Web 用に書き出し:参考サイト

☆webでの動画の表現
ここまでできる!HTML5で追加されたvideoタグが便利すぎる件Code部:参考サイト

chromeでvideoが再生できない
HTML5のvideoタグを使って動画を貼り付ける時の注意点と問題点 | webfeelfree:参考サイト

Adobe MediaEncoderで拡張子.webmや.oggに変換する - Qiita:参考サイト

jQuery:無限スクロール

Jockum Nordström|絵画の本:完成版にリンク

f:id:sankoblog:20160719152237p:plain


※これをスクロール分、別フォルダで作成する

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Jockum Nordström|絵画の本</title>
<link rel="stylesheet" href="../css/style.css">
<link href="https://fonts.googleapis.com/css?family=PT+Serif:700" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"><!--AwesomeFont-->
<link rel="shortcut icon" href="../favicon.ico" type="image/vnd.microsoft.ico"/>
</head>

<body>
<div id="container">
<h1>絵画の本</h1>
<div class="book_wrapper">
<h2>Jockum Nordström</h2>
<div class="img_wrapper"><img src="../img/JockumNordstrom.jpg" alt="JogckumNordstrom"></div>
<div id="text">
<p>Jockum Nordstrom (born 1963) is undoubtedly one of the most renowned Swedish artists of his generation. His work is included in world-class museums, such as The Museum of Modern Art, New York, the Moderna Museet in Stockholm and the Cleveland Museum of Art, Ohio.</p>
<p class="link"><i class="fa fa-book" aria-hidden="true"></i>内容はAmazonより引用しました。<a href="https://www.amazon.co.jp/Jockum-Nordstrom-Learned-Forgotten-appris/dp/3775735828/ref=pd_rhf_gw_p_img_3?ie=UTF8&psc=1&refRID=09JSJY0XA70V9HW8PJDT">詳細はこちらから。</a></p>
</div>
</div><!--.book_wrapper-->
<a href="http://sanko333.webcrow.jp/0707_MugenScroll_book/book2_PeterDoig/index.html" id="next">next</a>
</div><!--/#container-->


<script src="../js/jquery-2.2.4.min.js"></script>
<script src="../js/jquery.clever-infinite-scroll.js"></script>
<script>
		$('#container').cleverInfiniteScroll({
			contentsWrapperSelector: '#container',
			contentSelector: '.book_wrapper',
			nextSelector: '#next',
		});
	</script>
</body>
</html>
@charset "UTF-8";
/* CSS Document */
/* reset */
html, body, div, h1, p, ul, ol, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
  	YuGothic, '游ゴシック',
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
  box-sizing: border-box;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
ul, ol { list-style: none; /* マーカーを消す */ }
a { text-decoration: none; /* 下線を消す */ }
img, input {
  border: 0;
  vertical-align: bottom; /*画像の下の隙間をなくす*/
}
/*body {
	overflow-y: scroll;
}*/
/*********************************/
h1 {
	width: 100px;
	line-height: 100px;
	margin: 30px auto 0;
	font-size: 18px;
	color: #3A3A3A;
	text-align: center;
	border: 2px solid #B7B7B7; 
	border-radius: 50%;
}
.book_wrapper {
	width: 800px;
	margin: 0 auto 30px;
	overflow: hidden;
}
.book_wrapper img {
	float: left;
	max-width: 320px;
	padding: 40px;
}
.book_wrapper h2 {
	width: 400px;
	margin-bottom: 16px;
	font-size: 32px;
	font-weight: bold;
	text-align: center;
	line-height: 1.4;
	letter-spacing: 0.02em;
	float: right;
	font-family: "PT Serif", serif;
}
#text p {
	width: 400px;
	font-size: 14px;
	line-height: 2;
	float: right;
}
.link { margin-top: 16px; }
.link a { text-decoration: underline; }
.fa { margin-right: 8px; color: #8F7B7B; }
#next {
	width: 100%;
	text-align: center;
}
/****** タブレット ******/
@media screen and (max-width:768px) {
.book_wrapper {
	width: 100%;
	margin: 0 auto;
}
.img_wrapper {
	width: 100%;
	float: none;
	max-width: 320px;
	margin: 0 auto;
	background: #98ECDB;
}
.book_wrapper img {
	text-align: center;
	padding: 10px 0 30px;
}
.book_wrapper h2 {
	width: 80%;
	margin: 16px auto;
	float: none;
}
#text p {
	clear: both;
	width: 80%;
	margin: 0 auto;
	float: none;
}
}