2017/7/12 勉強会の内容について

はじめに ウェブサイトを作るということは

まず戦略があって、明確な目的があるはず。全ての工程はその「目的」に照らして妥当かどうかで判断されて進んでいく。
作ったサイトはそれきりではなく、目的や目標に照らして効果を検証し、繰り返し改善するというステップがある。

当日ちょっとこの話はしませんでしたが、ウェブの制作は分業されています。関わる人が多いです。その中でうまく進行していくために情報共有が大事です。また、それぞれが、「その部分」について積極的に関わることを求められて任されているのか、きちんと理解しておくことも大事だと思います。

この時、デザインはクライアントの好みやデザイナ個人の作品としてではなく、目的にあっているかどうかで妥当かどうか判断されるべきです。

ウェブサイトは「積み上がって」できている

インフォグラフィックについては、こちらの本から引用しております。(外部サイト)
https://www.amazon.co.jp/ウェブ戦略としての「ユーザーエクスペリエンス」―5つの段階で考えるユーザー中心デザイン-designing-books-JesseJames-Garrett/dp/4839914192

デザインだけ考えようと思っても難しいのは、その下の段階についての理解や情報共有がなされていないからではないか?各段階では、それを決定して共有するための文書が出来上がるはずなので、それを共有しながら進めていくべき。

 

ウェブはインタラクティブなもの

inter+active 相互作用
片方がアクションを起こすと、もう片方がアクションを返す。
ウェブも、何か操作をし、それに対しての反応があり、その反応をみて、次の操作をする、ということの繰り返しで、ユーザーは求めているものを得る仕組み。

インタラクティブなものを人が利用するとき、「使える」ためには「発見可能性」が必要(当日はこういう言葉では説明しなかったけど、、、)

発見可能性を支える要素

・アフォーダンス
・シグニファイア
・制限
・対応づけ
・フィードバック
・概念モデル(学習によって得られ、個人によって差がある)

引用
Donald A. Norman (2013) THE DESIGN OF EVERYDAY THINGS Rrvised and Expanded Edition Basic Books Inc.(D.A. ノーマン 岡本 明、安村通晃、伊賀聡一郎、野島久雄(訳)(2016) 増補・改訂版 誰のためのデザイン? 認知科学者のデザイン原論 新曜社)

実際のウェブページから上記の要素を探してみる

ワークショップのような形式で、とあるウェブページを白黒印刷したものを、用意してみんなで上記の要素を探してみました。

印刷したのは、下記のサイト。(外部サイト)
http://www.holland.com/de/tourist/reiseziele/maastricht.htm

  • この場合のアフォーダンスはスクロールできることや動かせることそれ自体(アフォーダンスには知覚できないものも含む)
  • シグニファイアはアフォーダンスの中でも知覚できて操作を導くもの
  • これは何のサイト?
  • そう思った理由は?
  • 対応づけが感じられるものは?
  • ところでこのページの目的は何でしょう?

印刷したものを大体全て見てみた後に、実際の差異をと表示して、推察が正しかったかどうか確認。色々と発見がある。自分が作ったサイトでも、静止画にして見直して見たり、他人に見てもらうことで発見があるかもしれない。

[ssba]

Sass勉強会の大雑把な内容(2016.5.15)

勉強会にあたって、下記の書籍を購入しました。
Sassを書いてみたい方にとてもオススメです。
Web制作者のためのSassの教科書
サポートサイトで書籍の正誤表やサンプルソースを見られます→http://book.scss.jp

さて、勉強会のために、下記のページを作りました。
http://www.ccc-labo.net/_demo/sass_lesson1/local/
このページを作る際に書いたSassを例にしてSassの基本的な書き方を確認していきました。

なお、コンパイル結果を確認するために、ウェブツールを使いました。
SassMeister→http://www.sassmeister.com

最初に、Sassの使い所がイマイチない、という話をした。そもそもCSSを書くときの管理方についても明文化できていないのに、Sassを使って効率化、という段階にない、とか、自分がSassで書くと他の人に引継ぎができないとか。そもそも、プログラムアレルギーが強くて馴染めない、などなど。

これらは私がSassを遠ざけた理由そのままだったので、とても納得なのだが、改めてSassをいろいろいじってみると・・・・・・まあ、圧倒的に便利な部分がある。例えば変数とかは使いたくてたまらない。コンパイルとか、環境を作ることがまず大変ですが。。。(苦労しました)
この苦労と、書き方を覚える労力をかけるのと、今まで通りCSSをサクサク書くのと効率としてはトントンかもなあ、という思いがSass導入を遠ざけていたわけです(個人的に)。
しかし、勉強会を機に、一旦コンパイルする環境まで作ってしまえば、逆にこう思った。

「Sassのファイル内でいつも通りCSS書いたらそれは単純にCSSとして書き出されるだけなんだし、Sassの便利なところ、書ける!と思うことだけ取り入れたらええやん。」

と、いうわけなので、楽しいです、Sass。
紹介した書き方が下記です。カキカキ。

入れ子

.entry-header {
	.entry-title {
		font-weight: 300;
		text-align: center;
	}
}


.main-navigation {
		
	ul {
		padding: 0;
		margin: 0;
		text-align: center;
			
		li {
			display: inline-block;
			margin-right: 10px;
			line-height: 1;
			
			a {
				display: block;
				padding: 7px 10px;
				background-color: #333;
				color: #fff;
				text-decoration: none;
				transition: opacity 0.5s ease-in;
				opacity: 1;
					
				&:hover {
					opacity: 0.6;
					transition: opacity 0.5s ease-in;
				}
			}
			
			&:last-child {
				margin-right: 0;
			}
		}
	}
}

 

変数

$window_medium : 600px;
$window_large : 1200px;

$keycolor : #007099;

 

計算と繰り返し
@for関数を使って、繰り返しの処理を書く。

$grid_margin : 2%;/*単位は%*/
$grid_width : ( 100 - $grid_margin * 5 ) / 6;

@for $i from 1 through 6 {
		.grid-small-#{$i} {
			width: ($grid_margin * ($i - 1) + $grid_width * $i);
		}
	}

 

色の計算
キーカラーから派生させた背景色を作る。こうするとトーン配色を守った色使いが考えやすい。

$keycolor : #007099;

.main-visual {
	text-align: center;
	background-color: mix($keycolor,#EEE, 10%);
	padding-top: 40px;
	margin-bottom: 30px;
}

 

@extendの例
同じ処理をまとめるために使う。ただ、後に紹介する@mixinの方がSassで書くものとコンパイルの結果の違和感が少ないよね、という意見もあった。(私もちょっと苦手)

%btnBase {
border-radius:3px;
background-color: #333;
color:#fff;
}

.btn {
@extend %btnBase;
padding: 9px;
}



.item {
@extend .btn;
margin-left:10px;
}

.item2 {
@extend %btnBase;
margin-left:10px;
padding: 4px;
}

ミックスイン
@mixin関数。これは本当に便利だ。
@include kadomaru(); のカッコ内には角丸のサイズを入れることで、変更ができるので試してみてほしい。
例 @include kadomaru(10px);

@mixin iblockHack {
	display: inline-block;
	*display: inline;
	*zoom: 1;
}

@mixin kadomaru($value: 4px) {
	-moz-border-radius: $value;
	-webkit-border-radius: $value;
	border-radius: $value;
}

li {
				@include iblockHack;
				margin-right: 10px;
				line-height: 1;
a {
					display: block;
					padding: 7px 10px;
					@include kadomaru();
}
}

 

ミックスイン複数の値
複数の値をとることも可能。角丸のサイズとパディングの値を変数にしておくと、これひとつで角丸のあるボタンやボックスの調整がたった1行書くだけでできるようになる。

@mixin kadomaruBox($value1: 4px,$value2: 10px) {
	-moz-border-radius: $value1;
	-webkit-border-radius: $value1;
	border-radius: $value1;
padding: $value2;
display: block;
}

a {
@include kadomaruBox(10px,30px);
}

以下、勉強会の時に出てきた質問などについて少し調べておいたので、書き留めておきます。

コンパイルされたCSSの改行とかタブの入り方が気にくわない、修正したい!
こんな記事見つけました。やっぱり思っている人はいた。
http://www.ysakmrkm.com/2012/10/customize_output_format_compiled_by_sass.html
根本的な解決にならない、って書いてあるけど、どうじゃろ、ruby詳しい人に聞けばいいのかな・・・。

Macでの環境構築について
El Captainになって、OSのシステム系のファイルにルート権限でもアクセスできなくなったそうな(すみません、細かいことはよくわかっていません)。
で、Macは標準でRubyが入っているからそっち使ってもいいよ、という感じでやってみようとしたんですが、失敗しまくり。色々やりすぎて何をどうしたのかあまり覚えてもいない・・・・・。
この辺りが参考になる気がします。
https://teratail.com/questions/23280

compassを使う
勉強会の際に使っていたMacBookではできなかったのですが、自宅のiMacでは普通に使えたので、頭を抱えています。バージョンとかも変わらないのですが・・。
ただ、iMacの環境では、compass watchがなんだかうまくいってない風・・・・。謎です。。。。。
これについてはまた何かわかったら書きます。

[ssba]

タームのアーカイブページのURLを変更してみる

WordPressをブログではなく、ウェブサイトのCMSとして使うときに、カスタム投稿タイプやカスタムタクソノミーが便利です、というのを再三言っておりますが。

タクソノミー?? ターム??? よくわからない!
という方はまず、前回書いた記事をご覧ください。WordPressの「タクソノミー」と「ターム」って、何?

カスタムタクソノミーを設定し、タームを設定して、同じタームの記事を集めたアーカイブを作ることができます。そのアーカイブページのURLは、以下のようになります。

テキスト_03

さて、ここで、タクソノミーのアーカイブのページのURLについて
http://ドメイン/works/web/
みたいに、できないの??との問い合わせがあったりします。
おっしゃることはものすごく、気持ちも理解できるのですが、「すみません、私には方法がわかりません」とお断りしてしまいます。
どなたか解決策をお持ちでしたら教えていただきたいです!(いや、何かはあるのだと思うのですが・・・・・・私の足りない頭で思いついたことは最後に書きます)

ですので、苦し紛れに、
http://ドメイン/works/category/web/
ではどうでしょうか・・・・と、提案してお茶を濁します。
今回は、このようにお茶を濁す方法を解説したいと思います。(前フリ長い)

続きを読む タームのアーカイブページのURLを変更してみる

[ssba]

WPの「投稿」を独立のブログっぽい感じのURLにする

WordPressをCMSとして利用するとき、カスタム投稿タイプやタクソノミーを利用して更新可能なコンテンツを作り、固定ページで会社概要やお問い合わせのページを作り、一緒にブログも展開したい、ということがあると思います。
その時、ブログは/blog というサブディレクトリの下にあるような感じにまとめたい、というご希望を聞いたりします。

どういうことかというと、WPのパーマリンク設定で、デフォルトではなく、例えば年月を含んだパーマリンクに設定したとします。すると、投稿で書いた記事やアーカイブのURLは下記のようになります。
シングルページ       http://ドメイン/2015/11/sample/
カテゴリーアーカイブページ http://ドメイン/category/diary/
こんな感じです。
悪くはないのですが、このページがサイト内で「ブログ」であることをもう少しわかりやすくなる方が良い、例えば /blog というサブディレクトリにまとめたい、というふうに。

別のWPをサブディレクトリにインストールすればもちろんできますし、マルチブログにする方法も考えられます。管理者が複数いて、ブログだけを更新する人が多い場合などは、別WPやマルチブログにした方が、権限関係の問題がかえってシンプルに解決できると思います。
そうではなく、更新をする人はほぼ決まっていて権限の問題もなく、また制作後の管理をシンプルにしたい、URLが違えば良いというぐらいであれば、続きを読んで挑戦してみてくださいー。

続きを読む WPの「投稿」を独立のブログっぽい感じのURLにする

[ssba]

WPのメインクエリを理解する

以前の勉強会でもネタにしましたが、追記です。

スクリーンショット 2015-11-28 21.00.52

友達がイラストを描いてくれました。
全貌はこちらから http://www.pixiv.net/member_illust.php?mode=medium&illust_id=53687972

WordPressのクエリについてちゃんと知りたい!という方は、Codexを参照ください。(2015.12.07追記)
https://wpdocs.osdn.jp/クエリ概要

続きを読む WPのメインクエリを理解する

[ssba]

【使ってみようWPの条件分岐】固定ぺージ編

条件分岐が使えるようになると、WordPressでできることが格段に広がります。ということで、実際のコードの書き方をテーマごとに解説していけたらと思います。

まずは固定ページから。

固定ページの条件分岐には「is_page()」を使います。
Codexに書いてある解説を引用すると、

この条件分岐タグは、個別の固定ページを表示しているかどうかをチェックします。これは真偽値を返す関数であり、TRUE または FALSE を返します。このタグはループの前に使われる必要があり、ループ内では機能しません(以下の注釈を参照してください)。

こんな感じ。とにかく、どう書くのかというと・・・

続きを読む 【使ってみようWPの条件分岐】固定ぺージ編

[ssba]