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

Webデザインメモ

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

2018年8月24日(金曜日)  ()

コーディングの後は、スマートフォン実機での確認を

ここ数年スマートフォンの普及により、ますますスマートフォン向けサイトが増えていきました。
PCだけでなく、マルチデバイスへの対応が出来るウェブサイトが求められています。

コーディングを行う際必要となるのが、実際の見え方の確認。
ChromeやFIrefoxなどのブラウザでは、画面幅に対しての見え方を簡単に確認できます。

私はChromeをよく使うのですが、iPhoneやAndroidなどの外観と共に確認できる機能がついているので、これがとても便利です!

【確認の仕方】
①右クリック
②「検証」をクリック
③左上に出てくるデバイスのアイコン(Toggle device toolbar)をクリック

これで、スマートフォンでの見え方を確認することができます。


しかし、ここで問題になってくるのが、「フォント」。
サイトを見ている環境によって大きく変わるので、PC上のプレビューではいい感じだったのに、公開されたものを見ると、フォントが適用されていない!ということが多々あります。
(iPhoneはメイリオ、游ゴシック・游明朝に対応していないのでご注意ください・・・)

実際どう見えるのかは、やはりスマートフォンを使うのが一番確実です。
可能であれば、iPhoneやAndroid両方を用意し、実際の環境で確認するのがよいでしょう。

(参考)
「2018年以降はコレで決まり!Web サイトで指定するゴシック体・明朝体・等幅の font-family 設定」
http://neos21.hatenablog.com/entry/2017/11/12/080000

2018年7月13日(金曜日)  ()

Adobe XDのいいところ、注意点

弊社では、カンプデザインのツールとして「Adobe XD」を使い始めました。
Adobe XDを使えば、デザインはもちろんのこと、ページ遷移までをビジュアルでサクッと作れます。

デザイン作成のしやすさについては、公式サイトでも詳しく書いてありますので、そちらにお任せすることにします。
今回のテーマは、「Adobe XDを使った、デザインの確認」についてです。
良かったことや注意点を共有したいと思います。

Adobe XDを使って良かったこと

1) コメント機能を使って、修正点をブラウザ上で指定できる。
「プロトタイプを公開」機能でリンクを生成することで、カンプデザインをブラウザ上で公開することができます。そこから、コメントを残せるのですが、修正してもらいたい場所をピンポイントで指定することができます。

また、コメントに対してリプライができたり、「解決済み」ボタンをクリックしてコメントを非表示にすることも可能です。
これで、修正点漏れや、口頭での指示をすることでの時間ロスを防ぐことができます。

2) jsの動きを共有出来る
Adobe XDのプロトタイプ機能を使うと、画面遷移の動きを設定できます。
これを使うことで、2ついいことがあります。
1つは、クライアントへ完成イメージをより明確に伝えることができるので、食い違いを防ぐことができます。
2つめは、プログラマーの人に、画面遷移の動きをビジュアル的に共有出来ます。
「このボタンを押した時に、こういう動きにしてもらいたい」という説明を、言葉で伝えるよりスムーズです。

注意点
複数人での作業がしづらい
デザイナーチームの間で、xdファイルを共有して作業をしているのですが、覚えのないコンフリクトが結構な頻度で起きます。そのため通常のファイル名の後ろに「 (Conflicted copy from ****** on [年月日])」が付いたファイルがたくさん生成されてしまいます。
Adobe CCのストレージで管理する場合、同期がうまくいかないことが多い印象です...。

スマホサイトデザインを、スマホから確認がうまくできない。
スマホデザインの場合、ブラウザからプロトタイプを確認しようとすると、小さな比率で表示されます。ですので、クライアントさんへカンプ確認をお願いする場合は、プロトタイプ機能を利用するより、画像で切り出しての確認の方がスムーズです。

実機確認を行う場合は、Adobe XDのアプリを使うといいです。



定期的に行われるAdobe XDアップデートでどんどん改善されていますので、これからもっと使いやすくなってくると思います。

2018年5月11日(金曜日)  ()

コピーライトの表記

webサイトページの下部でよく見られる、
コピーライト(copyright)。

ところが、いろんなサイトを見ると、
それぞればらつきがあったり、表記自体がないページも存在します。

一体どのような表記が正しいのでしょうか?


そもそも、コピーライトとは?

著作権のことを指します。

コピーライトを表記することで、
「著作権で守られていますよ!」という表示になります。


しかし、そもそも著作権は、創作された時点で発生します。
ですので、この表記がないからといって無断でコピーするのは違法です。

つまり、ウェブサイトにコピーライトの表記がなくても、
著作権は守られているのです。



では、なぜコピーライトが必要?

理由は、「無断転載・無断コピーを抑止するため」とも、
「昔からの慣習がつづいているため」
とも言われています。

ウェブサイトに対する安心感・信頼感を出したい場合は、
ないよりあった方が良いと思います。


正しいコピーライトの表記

コピーライトに必要な表記は、

© 20XX AliveCast.
[(C)マーク][発行年][著作権者名]

の3つだけです!順番も、とくに決まりはありません。

よく
「Copyright © 2005-2018 XXXXX All Rights Reserved.」
というような表記を見かけますが、
「Copyright」と「All Rights Reserved」は不要です。

また、「2005-2018」のように、更新の年号(ここでいう2018)
は、あってもなくても良いです。発行年は必要です。


まとめ

・著作権は、作った時点で発生するので、コピーライトの表記はそもそも必要ない。
しかし、無断転載やコピーを抑制させたり、従来からの慣習のため、表記されることが多い。
・コピーライトの表記で必要な要素は、「©」「発行年」「著作権者名」の3つだけ。


コピーライトは小さい表記で、あまり注目されない箇所ですが、
まずは、表記されているか今一度確認をしてみてはいかがでしょうか。

2018年3月30日(金曜日)  ()

iPhone X用のデザインの注意点

デザイナーの山本です。


今月、スマホをiPhone 6からiPhone Xに買い換えました。
憧れの顔認証のログインは、慣れるととっても快適です!

しかしながら、使っていて気になったのが、
アプリの微妙な見え方の違いです。

特に、iPhone Xに対応していないアプリは、
画面の表示が一回り小さかったり、以前のiPhoneで見た時と比べてデザインが微妙に変わっていたりしました。

そこで、iPhone Xユーザーのための
押さえておきたいデザインのポイントを3つご紹介します。


1.(縦で見た場合、)上下で切り取られるデザインは、やめよう!
iPhone Xからアプリを閲覧する際に気が付いたことが、アプリによって上下がスパッと切れてしまっていることです。
このように「セーフエリア」(iPhoneXの上部真ん中にある、角丸のカメラ部分などと被らない、安全な領域)の形でページを表示させるのは、非推奨だそうです。

上下の背景とコンテンツが溶け込むようなデザインにする必要があります。

(参照:https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/)


2. Touch ID以外の方法でも、簡単にログインできるようにしよう
iPhone Xはボタンが廃止されていますので、当然Touch IDはありません。
例えば、Suicaのアプリは現在Touch ID機能に対応していますが、Face IDには対応していません。そのため、毎回ログインするたびに、パスワードを要求され、煩わしさを感じています。

できれば、Face IDに対応するか、いちいち複雑なパスワードを入れなくて良い工夫をしたほうが良いかもしれません。


3. フォントが、一部明朝体になる。
これは、iPhone Xだけなのかどうかは分からないのですが、アプリを表示した際に、一部明朝体になってしまうような現象がみられました。
今の所、はっきりとした原因・対処は分かっていませんが、フォントの指定には注意が必要です。


いかがでしょうか?
今後は、iPhone Xのような、ディスプレイが綺麗な長方形ではない画面への対応が不可欠になるのではないかな、と思います。

画面の表示のしかたに細心の注意を払いながら、
使いやすいアプリデザインに改良していけたらと思います。

2018年2月09日(金曜日)  ()

テキストエディタ「Atom」 - デザイナーの人にもおすすめ

Webデザイナーのコーディングといえば、
Dreamweaverを使っていらっしゃる方が多いのではないでしょうか。

ただ、Dreamweaverは、
「立ち上がりが遅い」「重たい」「すぐ落ちる」
のが、すごくネックです。
なので、最近は作業効率アップのために、私は使わないようにしています。

Dreamweaver の替わりに、Bracketsを使われる方も
いらっしゃると思いますが、今回は私が最近使うようになった「Atom」を紹介しようと思います。

【Atomとは?】
Atomは、GitHub が開発した、オープンソースのテキストエディタです。
「エンジニア向けのエディタ」というイメージがあったのですが、デザイナーの方にも十分使えるテキストエディタだと思います。

【Atomのおすすめポイント】
-とにかく軽い!
Dreamweaverのような、起動中の絵を待つわずらわしさがありません。

・色々なプラグインがある!
Bracketsと同様、プラグインが豊富です。
私のお気に入りは、「pigments」というプラグイン。指定したカラーコードを、その色でハイライトしてくれます。
変数で指定した色もハイライトしてくれるので、Sassを使っている人でも便利だと思います。

いろんなサイトが、おすすめのプラグインを紹介していますので、検索してみてください。



デメリットとして感じたのは
・ 閉じタグが、自動生成してされない。Dreamweaverだと
「</」を入れるだけで、適切な閉じタグが生成されますが、Atomはそれをしてくれません。
・imgタグの画像サムネイルが、ホバーしても出ない。

あたりではないかと思います。

なお、去年まで使っていたBracketsですが、何故かファイルが開かなくなった(アンインストールをしてもダメだった)ため、その代わりとしてAtomを使うようになりました。


もし、私と同じように原因不明のBracketsバグに悩んでいる
デザイナーは、Atomを試してみるのをおすすめします!

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