• FVM大賞2015 優秀賞 受賞
  • 平成26年度福岡市トライアル発注認定事業者
  • 平成25年度福岡市ステップアップ最優秀賞 受賞
  • 平成25年度九州ニュービジネス優秀賞 受賞
  • 福岡県情報セキュリティ連絡協議会加盟企業
  • 福岡ベンチャーマーケットプレゼン企業
  • 福岡大学共同開発企業
  • 経営革新計画 第1936承認企業
  • 平成23年度九州地域中小企業事業家支援
    お助け隊事業アドバイザー企業
  • 平成23年度福岡市競争入札参加有資格企業

Webデザインメモ

日々学ぶウェブデザインについて、すぐに役立ちそうな情報を綴っていきます。Webデザインメモ

2017年7月11日(火曜日)  (山本 真里奈)

コーディングの手間を防ぐ、チェック項目2点

コーディングはスピードが勝負です。
しかし、思いがけない箇所でスタイルが破綻したために修正が入ったり、作業が余計にかかることがしばしばあるかと思います。


今回は、そのような「余計な作業」がでてしまう原因の一部である以下の2点をチェックしてみてください。

-----------------------------------------

1) HTMLに、依存した記述をしていないか

例えば以下のh1を赤い文字色にするために、以下のように記述したとします。

-- HTML --

<div>
<h1>タイトル</h1>
</div>


-- CSS --

div h1 {
color: red;
}


もし、途中でhtmlの構造が変わり、h1がh2になった場合どうなるでしょうか。
htmlだけでなく、cssも修正する必要があり、その分無駄な修正作業が発生してしまいます。

そうならないためには、htmlのh1に、例えば「tl_txt」など、class名を付けると良いです。
そうすれば、たとえh1に変更が入ったとしても、class名の変更が入らない限りcssの修正が不要になります。


2) スタイルを取り消しすような記述をしていないか

一度定義したルールを、あとから0やnoneといった値を記述することで上書きしていませんか?

以下のパターンでは線などを「取り消す」ためのスタイルです。

-- HTML --

<h2 class="title no-border">見出し</h2>


-- CSS --

.title {
margin-bottom: 10px;
border: 1px solid #000;
padding: 10px;
}
.no-border {
margin-bottom: 0;
border: none;
padding: 0;
}


それに対し、次のパターンでは線などを「追加する」ためのスタイルです。
-- HTML --
<h2 class="title main_tl">見出し</h2>

-- CSS --

.title {
padding: 10px;
}
.main_tl {
border: 1px solid #000;
margin-bottom: 10px;
}


上2つのソースを見ると、ソースを記述する量に差があることがわかります。

スタイルを記述するときには、取り消すのではなく、追加していくようにしましょう。


以上です!


私は特に、1)をやってしまうがために、ゴリ押しで2)をしてしまうことが多かったような気がします・・・

上2点に気をつけることで、修正しやすくなり、メンテナンス性のアップにつながります。是非参考にしてみてください。

2017年5月08日(月曜日)  (山本 真里奈)

CSSは、構造と見た目と分けて記述しよう: 「OOCSS(オブジェクト指向CSS)」について

コーディングに慣れてきたので、もっと効率的に早くhtmlが組めるようになりたいという方は、「OOCSS」で組んでみましょう。

「OOCSS」とは、米ヤフーのNicole Sullivan氏が提唱したcssの記述方法です。
構造(パーツ)とスキン(見た目)を分離してクラス定義し、それらを組み合わせてスタイルを定義していきます。

構造とスキンの分離の例として一番分かりやすいのは、CSSフレームワークである「Bootstrap」ではないでしょうか。

例えばボタンですが、buttonタグのクラス名に「btn」という構造と、「btn-primary」というスキンとの組み合わせにより、青色のボタンを作ることができます。同じ構造で、緑色に変えたい場合は、「btn-primary」を「btn-success」に変更するだけです。

OOCSSの最大のメリットは、「基本的なクラスやよく使うクラスは、別サイトでもそのまま使いまわせる」ことです。
先ほどのBootstrapのボタンのように、ページに依存しないcssやクラス名にしておくことで、どのサイトでも同じように使用できるのです。


注意としては、
【「見た目」のままクラス名をつけないこと。】です!

赤いボタンに対してclass=“red_button”とクラス名をつけたとします。
しかし後で色が青に変更になった場合、「青色のボタンなのに、class名が”red”」となり、後で管理が面倒なことになってしまいます。
この場合は、見た目に変更が入っても大丈夫な名前にしましょう。(link_buttonなど)


Bootstrapを参考に、効率の良いcssの記述を見直してみませんか?

2017年3月17日(金曜日)  (山本 真里奈)

アイコンを使用する方法と注意点【ユーザービリティでの観点】

サイト制作を進める上で、ユーザービリティからの観点で作成することで、より多くのユーザーに使っていただきやすくなります。

ユーザービリティとは、以下のように定義されます。
「年齢や身体的条件、利用環境に関わらず、全ての人がウェブで提供されている情報にアクセスし、利用できること」
どんな人でも、障壁のないサイト制作を心がけたいものです。


今回は、サイトのユーザービリティを向上させる一つとして、
アイコンの表記をどうすれば良いか、2点簡単にまとめてみました。

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

1)CSSスプライトで表記する場合
CSSスプライトとは、複数の画像をひとつにまとめて、CSSのbackground-positionプロパティで位置を指定することにより表示させる、CSSの技のひとつです。
メリットとしては、画像の数を減らすことによって、サイトの表示を速めることができます。

注意点としては、表示されないと使いにくく箇所は避けたほうがいいということです。
例えば、グローバルナビや、テキストの代替画像、重要な矢印など、それが見えていないと成り立たないような要素を指します。

実は、ハイコントラストモード(弱視など視覚障害者の人向けに、背景を黒くさせる配色)をWindowsで設定した場合、スプライトが表示されないようになっているのです。

なので、そのような重要な画像の場合は、スプライトではなく、imgで配置させた方が良いです。また、スクリーンリーダーで読んでもらえるよう、alt属性に画像の説明を入れます。
装飾や特に重要度が高くないアイコンなど、表示されなくても問題ないような箇所にスプライトを使いましょう。


2)フォントアイコンで表記する場合
Font Awesomeなどのフォントアイコンを使用する場合、スクリーンリーダーの観点から、以下のように設定します。

・alt属性で、代替テキストを提供する:「右矢印」など。これによって、altの中のテキストを、スクリーンリーダーが読んでくれます。

・装飾的なアイコン (たとえば、具体的なラベルがアイコンに隣接して表示されている) 場合は、スクリーン
リーダーが無視する (音声読み上げの対象として認識しない)ようにしておきたいです。

アイコンフォントを表わす HTML 要素の中に「aria hidden="true"」と記述することで、スクリーンリーダーがその箇所をスキップしてくれます。また、:beforeなどの擬似要素でフォントアイコンを指定する場合、speak:none;と指定することにより、読み上げをスキップしてくれます

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::


Webサイトのコーディングを、意図したデザイン通りに組むだけでなく、スクリーンリーダーなど支援技術を使った場合でも問題なく閲覧できるか、というところまでを考えたサイト制作ができるようになれたら、と思います。

2017年1月20日(金曜日)  (山本 真里奈)

「デザインセンス」は自分で身につけられるもの

「自分に才能がない」せいでデザインができないと、
ぶち当たってしまうことってありませんか?

才能がない→だから何をやっても、いいものが作れない→私の目指した道はこれでいいのだろうか...とぐるぐるめぐり、悪循環がつづくという・・・。

もちろん、人間誰しも「得意・不得意」があるので、個人差はあるでしょう。


しかし、「センスは知識から始まる」の著者 水野学さんはこう唱えます。

「センスは、特別な才能の持ち主にしかないものではなく
誰でも知識を蓄えることで、身につけることができる。」

私がデザインを始めたばかりで力がないころにこの言葉を聞いても
「うそばっかり!才能がある人に言われてもなあ」と
聞く耳持たなかったでしょうが・・・

今になって思うと、この言葉は腑に落ちます。
自分が始めたころに比べて格段にデザインが
できるようになったのは、
自分の才能ではなくて、「知識の積み重ね」。
当時できなかったのは、単純に「経験不足」だけだと感じます。

自分のデザイン力はまだまだですが、
年々、デザインは「深くて面白い」と感じるように
なってきたところです。

やっぱりここまでなるには、苦痛なこともありますが、
積み重ねが必要なのだと改めて感じます。


では、デザインの知識を身につけるにはどうすればよいか。

ざっくりと自分なりにまとめると、以下のことを実践するとよいです。

-------------------------------------

いいと思うデザインを
・とにかくたくさん触れる:自分の中でストックを蓄えるため
・なぜ良いのか考える:論理的にデザインをする力がつくため
・真似する:制作スキル向上のため

-------------------------------------

あとは、「自分の分野でないものでも、目を引くものは
とりあえず見てみる」、というのも、幅が広がってよいそうです。

「センスは知識の積み重ねることで、向上する」ということを
知っておく。
そうすれば、仕事であり、学業であり、デザインにぶち当たった時に「自分の才能がもっとあれば・・・」という、根本的な問題から目をそらすことがなくなるのではないかと思います。

2016年12月02日(金曜日)  (山本 真里奈)

UXデザインツール、Adobe XDを使ってみた(2016年版)

こんにちは、山本です。
2016年もあと少しで終わりますね。早いものです。

::::::::::::::

さて今回は、今年の9月にリリースされた「Adobe XD Preview 7」についてです。
この「Adobe XD」、皆さんはもう触ってみましたでしょうか?

私は、
ワイヤーフレームを作成する際に便利そう!
Photoshopとの相関性が良いらしいので、カンプがサクサク作れそう!

という期待感で、早速ダウンロードし、使ってみました。


以下が、実際に触ってみて感じたことです。
参考にしてみてください。

【ここが、よかった!】
・立ち上がりが、とにかく速い。

・得に難しい操作がなく、感覚的に使える。PhotoshopやIllustratorが触れる人は、すぐに使いこなせます。

・ボックスを作ると、ガイドがパッと出てくる。もう一つボックスを作ると、ボックスが綺麗に並ぶよう自動的に図形をスナップしてくれたり、ガイドとともにオブジェクト同士のpx幅が出てくる。

・選択したいオブジェクトを、レイヤーの重なり順関係なしに選択できる。 Photoshopだと、例えば、ボーダーのボックスをテキストレイヤーの上に置くと、下になっているテキストレイヤーがボックスが邪魔して選択できなくなるが、XDだと関係なく選択できる。



【注意点】
・XDのデータをPhotoshopのデータに直せない(互換性があると謳っていましたが)。 結局XDで作ったワイヤーを見ながら、再度Photoshopで要素を再構築したすることに。

・XDのワイヤーをpdfに書き出しすことができるのですが、テキストのコピー&ペーストをすると、文字化けしてしまう。

・Windowsでは使えない。(今年までにリリース予定だそうですが、果たして間に合うでしょうか?!)


若干使いづらい点もありますが、要素を感覚的にサクサク作れるのがいいですね。

XDで作ったデータを、図形やテキストのデータごとPhotoshopに移行できたら、もっと使いやすいのではないかな、と次のアップデートに期待したいです。

2016年10月14日(金曜日)  (山本 真里奈)

UI/UXデザインをざっくりとおさえよう

こんにちは。山本です。

最近聞かれるようになった「UI/UX」ですが、その意味はご存知でしょうか?今回はざっくりとですがそれぞれの特徴をまとめてみました。

::::::::::::::::

UI:「ユーザーインターフェース」の略。
「人と物が接触する部分」を意味し、[機器とユーザーが接したところで起こりうる関係性の全て]がUIといえます。

そもそも「UI」という言葉が出てくる以前から「ユーザーにとって使いやすいデザイン」は意識されてきました。

たとえば大昔に使われていた道具「石やり」は、長い棒の先に尖った石がくくりつけられています。これをUIで考えると、獲物をより安全・確実に仕留めやすく、しかも運びやすい作りになっていることがわかります。

このように、人間の特性に合わせたデザインが道具になさせてきました。

近年では、物理的ではなくPCやスマホの画面上で実物のない「物」を直感的に操作させるための設計「GUI(Graphical User Interface)」という概念も誕生しています。



UX: 「ユーザーエクスペリエンス」の略。

[人が物やサービスを通じて得られる体験]を意味し、サービスを利用する一連の行動の中で、ユーザーが感じたこと全てがUXになります。

サイトの美しさや使いやすさだけではなく、たとえばメールや電話での対応が良かった、というところまでも含まれます。

::::::::::::::::

このふたつから分かることは、デザイナーは、見た目だけではなく、実際にユーザーが使ってみたときの操作性がよいか、というところまで踏み込んで設計する必要があるということです。

デザインは、ユーザーの体験の質を高めるための要素の1つです。
「見た目」「操作性」両方を意識しながら、デザインができるようになっていきたいと思います。

2016年9月09日(金曜日)  (山本 真里奈)

Bracketsの「Extractで画像スライスできない問題 」を解決する簡単な方法


webサイトをBracketsで組んでいるという方、「Extract」はお使いでしょうか?

ExtractはPhotoshopを開かずにpdsファイルの画像スライスが簡単にできるとっても便利なツールです。

まだ使っていない方は、拡張機能から追加してみてください。

:::::::::::::::::

画像をExtractからスライスする際、

「cssやsassファイルからだとちゃんとスライスできるのに、htmlファイルからどうもスライスできない・・・!」

という悩みがありましたが、先日解決策を編み出したので、ご紹介いたします。



htmlでアセット抽出をする際、ブルー枠内に[画像の保存先パス]と[画像名+拡張子]を入力してからEnterキーを押すのですが・・・




こんな感じに↓途中で改行されてしまい、抽出もされない!



と、しばらくウンウン悩んでいましたが、答えは簡単でした。

カーソルをimgタグの後ろに合わせてからEnterキーを押す」

ただそれだけです。

これで途中で改行されず、ちゃんと思い通りにスライスされました♪

ちなみにcssやsassファイルで上手くいってたのは、カーソルが自動的に行末に合わさってくれていたお陰なんですね。

問題も解決したので、これからどんどんExtractを活用していこうと思います。

2016年5月23日(月曜日)  (山本 真里奈)

知らないと損。Adobe Bridgeを使おう!

だんだん暑くなってきましたね。
夜が寝苦しくなってきたので、扇風機とひんやりするパッドシーツを取り出しました。

さて、今回はAdobe Bridgeについてです。

【Adobe Bridge】写真・制作データを一元管理、プレビューするためのソフト。
Adobe系のソフトをダウンロードすれば、ダウンロードすることができます。


便利ポイント:その1
Photoshop、Illustratorのデータがプレビュー出来る

windowsの「エクスプローラー」、macの「Finder」からだと、Photoshopやイラレのデータは開かないと見ることができません。

サムネイルの表示の読み込みも、画像が多いと遅いです。

Adobe Bridgeで開けば、多数の形式のファイルを開かずに、ファイルの中身を確認することが可能です。

便利ポイント⑵
リネーム機能で、規則的なファイルの命名が出来る

サイトで使用する、関連性のある画像に対して、「img_01」、「img_02」という画像名にすることがよくあります。ただ、沢山ある画像に一つ一つ名前を変更していくのは大変です。

そういう面倒なリネーム作業を一括でするのも、Bridgeでは可能です。

名前を変更したい写真を選択し、右クリック→「ファイルをバッチで変更…」をクリック。
「新しいファイル名」で、共通のファイル名、日付のつけ方、通し番号の桁数など、柔軟に設定することができます。
一番下の「プレビュー」で、ファイル名をチェックしOKだったら右上の「名前変更」をクリック。あっという間にファイル名をまとめてつけることができました!

メニューから「ファイル」>「開く」をクリックすると、時々間違えて「Bridgeで参照...」を開いてしまったものです。こんなに便利なのに、厄介者扱いしていました・・・。反省します。

2016年3月18日(金曜日)  (山本 真里奈)

データの命名はあなどれない! 時間短縮になる、命名のつけ方3つ

今日は、4月並みの天気とあって、暖かい気候でした。

もうすぐで桜の季節。
AliveCastの玄関は、早くも桜の花が満開です。
来週はAliveCastメンバーでお花見があるので、今から楽しみです!

_______________

今回のテーマは「データの命名について」


会社の場合、データの命名ルールがあると思います。
仕事を進めている際、

「 きちんと名前をつけるのが、とにかく面倒・・・」
「 今急いでいるから、取り急ぎ命名しとこ・・・」
「 自分くらいしか触らないところだから、自分が分かればいいや・・・」

と、ついつい「探しづらいデータの命名」をしていませんか?
あとでデータ探しに時間が取られるという、痛い目にあうかもしれません。

命名ルールに従うのは、とても当然のことですが、
今一度、データの命名がキチンとされているか、見直すきっかけになればと思います。


以下の3点に、特に気をつけてみてください。

<その①:タイトルに、データを触った日付を入れる。>
「deta最新.fw.png」と命名すると、「どのくらい最新なのか」分かりません。曖昧な命名は避けましょう。
「160318」のように「年月日」順につけると、パッと見てどのデータが新しいものか分かりやすく、スムーズです。

<その②:命名の順番も、ルール決めをする。>
タイトルに日にちを入れれば、なんでもいいわけではありません。

「2016.03.14_data.pds」
「data_160315.psd」
「data_yamamoto-0313.psd」

と並んでも、「共通のデータ 」だということが分かりにくいですね。
データを探す手間にならないためにも、どういう命名をするかルール決めをしておきましょう。
(特に、複数人でデータを触るとなる場合はなおさらです。)
名前のつけ方は「[名前]_[日付].[拡張子(jpegなど)]」がオススメです。

<その③:その日に保存したデータを変更する場合は、別名で保存する。>
その日のうちに、デザインを変更しなければならないときもあります。
その場合は、「[名前]_[日付]_02.[拡張子(jpegなど)]」など、バージョンの番号をつけて保存をし、それから作業に入りましょう。
「やっぱり最初に作った方のデザインがいい」となった場合でも、データを変更する前のものに戻れるので安心です。


以上です。
データの命名は、タスクのなかでも小さなものではあります。
ここをきちんとするという毎回の積み重ねが、データの探しやすさ、効率アップに繋がります。

「ここ出来てなかったー!」というところがあれば、今のうちから直しておきましょう。

2016年1月08日(金曜日)  (山本 真里奈)

Bootstrapをマスターしよう。簡単まとめ

新年明けましておめでとうございます。
2016年ですね。みなさんは、今年の目標は立てましたでしょうか?

私の目標は、「会社のマイデスクを綺麗に保つ」です。
昨年の仕事納めと席替えのタイミングで、ぐちゃっとしていたデスク周りをえいっ!とスッキリさせました。
デスクを整理してから退社するようにすることで、翌日気持ちよく朝を迎えています。

::::::::::

今、bootstrapをマスターしようと、勉強中です。
というわけで、本日はbootstrapを使うメリットと注意点を簡単にまとめてみました。

■bootstrapって?
ボタンやフォーム、ナビゲーションなどがhtml・cssベースのあらかじめ用意されている、フレームワーク(テンプレート)。
フラットデザインなどのスタイルが用意されているので、htmlの知識があれば、cssを使わなくても見栄えのいいサイトデザインができます。

[メリット]
・レスポンシブデザイン対応。web開発の時間短縮に。
グリッドレイアウトがあらかじめ実装されているので、スマホ、タブレット、pcそれぞれのレイアウトに沿ったデザインを作ることができます。

横幅が適切に計算されているので、
「えっとタブレットの場合のメインカラムの横幅は・・・(電卓を取り出す)」
の作業がなくなります。

グリッドレイアウトのためにbootstrapを使い、それを元にwebサイトを組んでいく、というのも手です。

[注意する点]
・他のサイトと似たり寄ったりのデザインになる
テンプレートにはあらかじめサイトの形をしたデザインがあるので、さくっと作るには便利です。
しかし、テンプレートをそのまま使用するだけだと、bootstrapっぽいサイト、つまりオリジナリティのないサイトになってしまうのです。

bootstrapで作られたサイトは結構あるので、テンプレートのまま使うと、「あれ、このデザインどっかで見たことある・・・」という既視感を与えてしまいます。
おおまかな形や、実機での確認にはbootstrapを活用しつつ、デザインの細かいところは工夫したり、しっかりと作りこんだ方がよいと思います。

レスポンシブデザイン対応のwebサイト制作が、これからますます増えていきそうです。

使い方をマスターして慣れていきたいなと思います。