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

Webデザインメモ

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

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

Adobe Museで、コーディングの手間を減らす

Web制作の基本的な流れは、カンプ→コーディングが一般的ですが、
どうしても時間がないときには、Adobe Museを使ってみるのはいかがですか?

Adobe Museは、デザインを作るだけで自動的にコーディングをしてくれるソフトウェアです。
通常はPhotoshopなどでカンプを作ると、その後コーディングという作業が入るのですが、それが一切なくなる、ということです!

Adobe Creative Cloudを登録していれば、追加料金なしですぐに利用できます。

デザインすると同時にコーディングが終わるという、夢のようなツールですが、
以下に、メリット・デメリットをまとめて見ました。

【Museを使うメリット】
・とにかく、コーディングが一切不要
「htmlに書き出し」をクリックすれば、htmlが生成されます
・レスポンシブデザインに対応
・スライド画像など動的な部分の挿入も簡単に出来る

【Museを使う上での、デメリット】
唯一の弱点と言えば、吐き出されるコードは、汚いというところです。
なんでもかんでもdivで囲んだり、margin-right: -10000px;というとんでもない記述をされてしまうことも・・・SEOの観点で見ると、積極的に使うのはまだまだという印象です。

「すぐにwebサイトを作らなければいけない」「とにかく形にしたい」というときや、サービス紹介・簡単なECサイトを作成する際は、かなり活躍しそうです。

2017年10月13日(金曜日)  (山本 真里奈)

(Gitの味方)SourceTreeを使うときの注意点メモ

こんにちは。

弊社では、webサイト製作のコーディングは、
デザイナー・プログラマー間で「Git」で管理しています。

※Gitとは!:バージョン(履歴)を管理してくれるシステム。


通常Gitを使うときは黒い画面(ターミナルorコマンドプロンプト)を叩いて操作します。
しかし、そんなの使い慣れていないし・・・という人でも
簡単にGit操作ができるツールというのが「SourceTree」です。

で、SourceTreeはWindows版・Mac版どちらもあるのですが、
若干使い勝手違うので、それをまとめてみました。


1) ウィンドウのデザインの違い
・Win版: 操作画面が一つのウィンドウだけ
・Mac版: ワークスペースとリポジトリ一覧が別ウィンドウ

2) ローカルリポジトリ内のファイルに、変更があった場合のメッセージ
・Win版:「コミットされていない変更があります」と日本語で表示される
・Mac版: 「Uncomitted changes」と英語で表示される(なぜ?!)

3)新プロジェクトのためのローカルリポジトリを作るとき
・Win版: 保存するフォルダを先に作っておかないと、エラーになる
・Mac版: 逆に、保存するフォルダを先に作り、そこを保存先に指定すると「そのフォルダ名はこの階層にすでにあるから、別名で作って」と言われる
(Win版に慣れていると、よくこのミスを犯します!)

4)画像ファイルに変更があった場合
・Win版:ファイル変更の比較ウィンドウに画像が表示されない
・Mac版:ファイル変更の比較ウィンドウに画像が表示される(ファイルサイズにもよるかもしれませんが)

ざっくりと見ていくと、
Windows版の方が若干使いやすいのかな?と思います。

私は普段WindowsもMacも使うのですが、
Windowsの方が使う頻度が多いので、
たまにMac版を使うと使い勝手が違くて戸惑うことも。


ですが、これまた何度も触ることで慣れるしかないな・・・と感じています。

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で参照...」を開いてしまったものです。こんなに便利なのに、厄介者扱いしていました・・・。反省します。