みんなでUXデザインをするために〜大切な7つのこと〜

Webデザイン

UXデザインをやりたいけど…できない!
そんなこと、ないですか?

スキルや経験ではなく、環境のおはなしです。
文化がないと、なかなか進めづらいと思います。
たとえば、
工数かかるけど、ほんとに売上あがるの?
そんなことより早くリリースしたい!
ユーザのことは、ちゃんと知ってるよ!

そういうこと、私にはありました。
そんな経験から、私が大切だと感じた7つのことを紹介します。

この記事は、UXデザインの価値を伝えるものではありません。
いかにみんなで一緒にやるか、にフォーカスしています。

1. 仲間がいること

一人で戦うには限界があります。
労力がかかる割に、いいものができません。
仲間がいれば、進めやすさが2倍どころじゃなく上がります。

もし今仲間がいないのであれば、厳しいことを言いますが そこでUXデザインをやるのは諦めたほうがいいです。
無理に進めて良いものができないと、他の人はよりUXデザインに不審を抱きます。
それよりは、次につながる布石を打つことをおすすめします。

2. 外部から人を呼ぶこと

外部の人の声は、みんな聴きます。
同じことを言っても、伝わり方が段違いなのでそれだけで円滑に進みます。
ポイントとして、自分も同じこと言ってるのに!と悲観しないこと。
評価は後からついてくるものです。

3. 少しずつやること

すべてを一度にやるのは無理です。
UXデザインて、すべてをしっかりやろうとすると本当に大変ですよね。
少しずつやって、有効性を見つけてもらうことが大切。
最初はインタビューに参加してもらう、それくらいでいいんです。

4. 事例を作ること

効果が分からないと、受け入れられないものです。
それは無いも同じですから。
自分のでなくて良いですが、同じ会社だと現実的に受け入れてもらいやすいです。

5. ファシリテーションしちゃうこと

存在感が出せます。
直接的ではないですが、存在感を出していくことで「この人の言うことは聞こう」と思ってもらいやすいです。

そんな突然できないよ…と言う時は
ホワイトボードにみんなが話していることを書き始めると、自然とそれ見ながら話し出すので主導権が握れます。
私は座る時、ホワイトボードの近くに座るようにしてます。

6. 偉くなること

これは強い。。
UXデザインやる!て決められます。
けどメンバーを見繕ってこれない場合、やる気ない人たちだとツラいです。
メンバーを選べるくらい偉くなれると強いです。

7. 仲良くなること

これはとっても大切。
お互い言いたいことが言えるようになります。
すると、チャンスも与えてくれます。

仲良くなるには、一緒にごはんを食べるか遊ぶことです。
まずは一緒にランチ!がおすすめです。

まとめ

書いているうちに、これは何もUXデザインに限った話ではないなと気づきました。
会社の中で自分が何かを進めたい時、必要なことと思います。
何かのお役に立てば幸いです。

Sketch Cloud の Sketch for Teams について調べてみた

Webデザイン

Sketch Cloud の Sketch for Teams について調べました。
英語の情報ばかりで苦労したので、間違っていたらご指摘お願いいたしますmm

まず概念として、Sketch for Teams は Sketch Cloud の中にあります。

Sketch for Teams と Sketch Cloud の関係図

Cloudの概要として、クラウド上にSketchファイルをアップロードすると
誰でもその中身を確認することができます。

誰でもSketch Cloud上のデータを見れる

Sketchライセンスがない人でも中を確認できます。
これが業務をする上でポイントで、Sketchライセンスがないエンジニアや営業などに状況を知らせやすいです。
今までは、画像に書き出して渡していたステップが減るので重宝します。

ちなみに全員に見れるようにするには設定が必要です。Cloudのファイルの右上の「…」をクリックし、Settingsを選択します。

共有方法とコメントやダウンロードなどの許可の設定ができます。
デフォルトだと共有もダウンロードもできないはずなので、ご注意ください。

Sketch for Teamsって?

Sketch Cloud でも十分恩恵は受けられるのですが、では Sketch for Teams は何でしょう?

Sketch for Teams は、よりチームに特化した使い方できます。

Cloudは、1人のデザイナーがプロジェクトで利用するのに適しています。
しかし、デザイナーが複数人いると不便が生じます。
なぜかと言うと、Cloud はアカウントによってあげられる場所が異なるためです。
そのため、Cloud でアップされたデータを上書きすることができません。
アップした人によって、共有するURLが変わってしまうわけです。

AさんのファイルをBさんがダウンロードし、Bさんがアップすると場所が変わる
AさんのファイルをBさんがダウンロードし、Bさんがアップすると場所が変わる

そこで、Teamsを利用するとその問題が解消します。
メンバーとして登録されているアカウントは、ひとつのチームとしてみなされるので同じ場所にデータをアップすることができます。

誰でも同じ場所にアップできる
同じ場所にアップできる

Sketch for Teams に登録するには

Teamsの作り方はカンタンです。
CloudのヘッダーのPersonalをクリックすると展開されるoptionから選択できます。

値段は年間契約か月間契約で異なり、
年間契約であれば、月$8.25、月間契約であれば、月$9 です。
90日間トライアル期間があるので、まずは利用してみて判断するのが良いです。

また、やめたい時はチームを削除すれば解除されます。

まとめ

Cloud自体は、
・プロトタイプの共有ができる
・Sketchライセンスがなくても中身を確認できる
という点で便利です。

Teamsに登録するかの判断は、
「複数のデザイナーが同じSketchファイルを更新する必要があるか」がポイントです。

プロトタイピングツールや描画ツールは激動のさなかです。
今後、FigmaやXDなどと共にしのぎを削ってくる中、なかなかどれがいいと言えない状況です。
今後の動向に注目です。

参考

【wordpress】サイトアドレス変更で記事が表示されなくなったときの対処

Webデザイン

wordpressで、トップページは表示されるが記事ページが表示されない場合の対処。

ドメインを取得したので、
wordpressでサイトアドレス (URL)を変更したら、
トップページは表示されるが、他のページが表示されなかったので。。。

他のwordpressの.htaccessをみたら、以下のようだったのでコピペすると解決しました。

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

書き込み権限がなかったのか・・・
原因分からずなのですが、問題なく動いているしいいのかな。。。

コーディング規則

Webデザイン

コーディング規則が決まっていると、
コードが整い、修正しやすくスピードも早くなります。
かといって独自のルール過ぎても、チームメンバーに共有できずよい成果は得られません。
有名どころのコーディング規則です。
▽Google
http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml
▽MOZILLA
https://developer.mozilla.org/ja/docs/Web
まず他のコーディング規則を参考にすることで、まとめやすく
また決めるべき箇所も見えてくるはず。
メンバーでしっかりと共有することも大切です。

ムームードメインで取得したドメインをさくらサーバで設定する方法

Webデザイン

ムームードメインで取得したドメインを
さくらサーバで設定する方法です。

1.
ムームードメインで、ネームサーバの設定をします。
弊社サービス以外 のネームサーバ
ネームサーバ1 ns1.dns.ne.jp
ネームサーバ2 ns2.dns.ne.jp

2.
サーバコントロールパネルの左カラム
「ドメイン設定」を選択します。

3.
ページ下方の
5. 他社で取得したドメインを移管せずに使う・属性型JPドメインを使う(さくら管理も含む)
の「ドメインの追加へ進む」をクリック

4.
フォームからドメイン名を入力し送信します。

5.
2. マルチドメインの対象のフォルダをご指定ください
から、ファイルがアップされているパスを指定します。
これで設定は完了です。
反映までは少し時間がかかります。

sitemap.xmlの書き方

Webデザイン

sitemap.xmlは、ロボットが効率的にサイトを巡回できるようにサイト構造を指定したファイルです。

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>http://aiclcl.com/designscrapbook/</loc>
<priority>1.0</priority>
<changefreq>daily</changefreq>
</url>
<url>
<loc>http://aiclcl.com/designscrapbook/index.php</loc>
<priority>0.8</priority>
<changefreq>daily</changefreq>
</url>
</urlset>

urlsetは固定です。
urlはURLごとに作成します。
locはページURLです。
priorityは優先順位です。
changefreqは更新頻度です。

以下はとても丁寧な説明を書かれている記事です。
http://www.seo-matome.jp/index-control/xml-sitemap/

また、便利なsitemap.xml作成ツールもありますので、見てみてください。
http://www.sitemapxml.jp/

sitemap.xmlは、トップディレクトリ(inex.htmlがある階層)にアップしてください。

 

OGPタグの設定方法

Webデザイン

OGPタグとは、facebookやmixiなどでシェアする際に、表示されるデータを指定するタグです。

記述としては以下のように指定します。

<meta property="og:title" content="ページタイトル" />
<meta property="og:type" content="website" />
<meta property="og:url" content="ページURL" />
<meta property="og:image" content="イメージのURL" />
<meta property="og:site_name" content="サイトタイトル" />
<meta property="og:description" content="コンテンツの概要" />

typeはコンテンツのタイプを指定しています。
以下を以下を参照ください。
https://developers.facebook.com/docs/concepts/opengraph/

ちゃんと指定できているかのチェックは以下からできます。
デバッガー
https://developers.facebook.com/tools/debug

robots.txtの書き方

Webデザイン

robots.txtは、ロボットが最初にアクセスするファイルです。
このファイルで、ロボットにアクセスさせないファイルの設定などができます。

robots.txtは、トップディレクトリ(inex.htmlがある階層)にアップさせます。

User-agentは、ロボットの指定
Disallowは拒否するディレクトリ・フィアルの指定
となります。

全てのディレクトリ・ファイルをクロールさせる場合は、以下のように記述します。

User-agent: *
Disallow:

Googleのロボットだけ、pearディレクトリとdata/items.xmlをクロール拒否する場合は以下のように記述します。

User-agent: Googlebot
Disallow: /pear/
Disallow: /data/items.xml

sitemap.xmlを用意している場合は、以下の記述を追加します。

Sitemap: http://ドメイン/sitemap.xml

facebook API の App ID / App Secret / Access token の取得方法

Webデザイン

facebook API の App ID / App Secret / Access token の取得方法
1. facebookの開発者向けページへアクセス
facebook developers
https://developers.facebook.com/
2. 上の青色のメニューの一番右の「アプリ」をクリック
3. 右上の「新しいアプリを作成」をクリック
4. 一番上の欄にアプリの名前を入力 他は任意
5. 本人認証を要求されたら設定をする
携帯電話かクレジットカードのテキストリンクをクリック
携帯電話の場合は、メアドを設定して、そこに送られてくるメールのパスを入力すればOK
また「新しいアプリを作成」をクリック
6. セキュリティチェックを入力
7. App ID / App Secret を get
8. 以下に自分の App ID / App Secret を入れてアクセス
https://graph.facebook.com/oauth/access_token?client_id=APP ID&client_secret=APP SECRET&grant_type=client_credentials
9. Access token を get
access_token=○○○
というかんじで表示されます