モバイルアプリに!Webサイトに!Marvelで簡単プロトタイプ作成

WebサイトやアプリUIなどの、設計やデザインの共有に役立つデザインカンプ。
弊社ではまず、一枚絵の状態のカンプ作成から始めるパターンが多いのですが、大まかなページの動きも合わせて伝えられたら…というのを常々思っていました。

コードを書くのがあまり得意ではない、私のようなデザイナーでも簡単に使える
プロトタイピングツールを探していたのですが、
そんな中、先日Webクリエイタ―ボックス様で無料で使えるモバイルアプリ制作用のプロトタイピングツールというまさにタイムリーな記事が!

その中でも、おすすめされていたMarvelというブラウザアプリがなんだか使いやすそう…。

実際に試してみて、わかりやすく、そして本当に簡単にプロトタイプができましたので、今回はMarvelの基本的な使い方をご紹介したいと思います。

01

Marvel

https://marvelapp.com/

基本無料で

  • プロジェクト無制限作成
  • 共有URL発行
  • 埋め込み用コード発行
  • コメント機能

などが可能です。

その他、有料プランでできること

  • パスワード認証
  • 複数メンバーでの作成
  • PDF、アプリファイルでダウンロード

続きを読む モバイルアプリに!Webサイトに!Marvelで簡単プロトタイプ作成


【Flexboxと疑似要素】Flexboxやってみた!!そしたらはまった!うまくいかなかった!

こんにちは。
今年の新潟は例年より雪が少ないみたいです。
寒がりなので、はやく暖かくなるといいなぁ、コタツ欲しいなぁ、コタツで仕事したいぁと思うこの頃です。

blog160222

 

さて2016年1月12日でInternet Explorer 8・9・10 のMicrosoftサポートが打ち切られまして、CSSを書く人間としては一足先に春が来たのかもしれないなぁと頭の中がポカポカするわけですが、これまで古いIEさんに遠慮してできなかったことを、どんどんやっていかなきゃいけないわけです。

Internet Explorer 8・9・10 のサポート終了[過去記事]

そんな中、実案件でついにFlexboxを使う機会があったので、喜びの舞を踊ったときのお話です。今回は失敗談になります。ちょっとはまりました…

続きを読む 【Flexboxと疑似要素】Flexboxやってみた!!そしたらはまった!うまくいかなかった!


WordPressのダッシュボードからDBを操作する。[adminer]

WordPressのデータベースを操作する仕事があって、ちょくちょくDB内のデータを確認する必要があったのですが、通常だと、サーバーにphpmyadminを入れて使うことが多いと思います。あらかじめ用意してあるレンタルサーバーもいいですね。しかし、プラグインを使ってWordPressのダッシュボード内で完結させることもできます。
プラグイン[adminer]の導入
adminer01

例によって、ダッシュボードのプラグイン→新規追加より、adminerを検索し、導入します。

adminer02

無事に導入できると、メニューのツール内に「adminer」が追加されます。

イルカがかわいい。
開くと、DBへのログイン画面になります。日本語化済みで助かります。表示は別タブでも同一タブでもお好みで。
ログイン後は、phpmyadminに似た画面が出てきます。
adminer04
データの確認だけで無く、インポート、エクスポートやテーブルの作成、SQLコマンドの実行など、一通りのDB操作はできるようになっています。
ただし!DBの扱いは一歩間違えると、WordPressの再起不能を招きますので、くれぐれも慎重に操作してください。
adminer自体は、単体でphpmyadmin代わりに動くプログラムもあります。(そっちがメインかも?)phpファイル1つで動作するので、何らかの事情で、phpmyadminが導入できないサーバーなどで役に立ちますね。

色・イロと悩ましい話。

201602kaz

Windowsや全ての発色調整が済んでいる方には”ほぼ”関係ない話かもしれません。
…そう、色の話です。

画像には大抵『カラープロファイル』と言う自己紹介(プロフィール)的な物が付いています。
その中身を簡単に言うと『何の色空間で表現されているか』と言う…
もっと簡単に言うと『色鉛筆何本あれば表現できる画像です』と言った感じでしょうか。
ですので、その情報の変換・共有が取れている『調整の済んでいる方』やsRGBが標準のWindowsの方には”ほぼ”関係ない話になります。
続きを読む 色・イロと悩ましい話。


Windows10におけるイメージバックアップ

これまで、必要なファイルのコピーを取ることでバックアップを済ませてきましたが、Windowsが起動しないなど、何かあった時のために、windowsの機能を使い現状回復用のイメージバックアップを作ってみました。リカバリディスクに近いものです。使用中の環境を丸ごと保存します。Windows10の場合のやり方を書いておきます。

スタート→設定 から設定ウィンドウを開きます。win10_backup01
更新とセキュリティ↑をクリック

win10_backup02

左メニューの「バックアップ」をクリックし、[バックアップと復元]に移動(Windows7)をクリック → バックアップと復元ウィンドウが開きます。

win10_backup03

左メニューから「システムイメージの作成」をクリック
→別途システムイメージの作成 ウィンドウが開きます。

win10_backup11

選択肢としてハードディスク以外に、DVDドライブやネットワーク上のNASなども選べます。
ここでは一番手軽で早い、ハードディスクを選びました。(あらかじめ、外付けハードディスクを接続しておきました。)
DVDでもディスクは作成できますが、システムの状態によってはかなりの枚数が必要になります。5000円程度でバックアップ用のハードディスクを買った方が作成も早く手間もかからずお薦めです。

win10_backup04

さらに、復旧時に使う修復ディスクを作っておきます。起動できないときのためです。
(バックアップが終わると、作るか聞かれます。)
バックアップと復元ウィンドウから、システム修復ディスクの作成 をクリックし、
システム修復ディスクの作成ウィンドウが開きます。

空のDVDをDVDドライブに入れておき、ディスクの作成ボタンを押します。win10_backup06

PCが起動しないような倍は、このディスクを使って起動し、先ほど外付けハードディスク上に作ったシステムイメージからコンピューターの復元を行います。

通常メーカーのリカバリや、Windows10の回復では、OSの初期状態には比較的簡単に戻せるものの、その後に追加したソフトウェアは個別にインストールする必要があります。
特にofficeやらadobeやらライセンス認証に絡んだソフトは時間も掛かり大変面倒です。
また、Windows7、8などからアップグレードしたWindows10環境となると、旧Windowsを導入することから始めなくてはなりませんので、これもまた面倒です。
現状回復可能なイメージファイルを作っておくと、トラブル時に最短で復旧できますので、皆さん時々作っておきましょう。

だいたい、バックアップしていない人のハードディスクからクラッシュしていくものです。


Windows10におけるスタートアップ登録はどこ?

Windows起動時に特定のソフトを自動で起動するには、昔からスタートアップフォルダにショートカットを放り込むと決まっています。このフォルダにはWindows7までは、スタートボタンから直接アクセスできましたが、Windows8から例のスタートメニュー大改造でどこへやら、と言った状態です。久しぶりに使おうとして、場所を探してしまったので、メモとして残します。

Windows10のスタートアップフォルダは、以下の場所になります。ログオンユーザー毎の場所と、全ユーザー共通の場所が用意されています。(windows7以降共通です。)

ユーザー毎に設定
C:\Users\[ユーザー名]\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup

全てのユーザーに適用
C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Startup

ユーザー名が分かっていれば、上記の[ユーザー名]を適切なユーザー名で書き換えたものを、エクスプローラのアドレスに直接ペーストすればアクセスできます。

win10_startup01

ただし、AppData以降が隠しフォルダになっているので、
マイコンピュータ→C:と順にたどっていく場合は、隠しファイルを表示する設定を有効にする必要があります。
フォルダを開き、「メニュー」の「表示」から、「隠しファイル」のチェックを確認して下さい。win10_startup02

 

あとは、起動したいプログラムのショートカットや、プログラム本体なりを入れてください。動作のチェックに再起動して確認をします。

別の方法。
マウスでちまちま開くよりもキー操作でぱぱっと入力できる人は
Win+R→shell:startup→enter で一発です。

win10_startup03

 

ログイン中のユーザーのスタートアップフォルダが開けます。
ユーザー別のスタートアップフォルダが一発で開きます。


モバイルサイトのサブメニューの位置

1

webサイトの構成上サブメニューが必要な場合があります。
PCであればサイドメニューにしたり、レイアウトはいろいろできますが、
モバイル時のサブメニューの位置に頭を悩ませることがあります。
表示方法いろいろありますが、表示位置は3つのパターンが多いようです。

2

 

グローバルメニューに含める

3      6

参考サイト:三田国際学園

サブメニューをグローバルメニューに取り込んでしまいエリアごと消去してしまう。
画面がすっきりし、ナビゲーションが一つになっていてわかりやすい。
項目数によってはメニュー項目が増えてしまい探しにくい。

 

 

ページのメインビジュアルの下

4      7

参考サイト:株式会社北都鉄工

ファーストビューで目に入りやすいため、
わかりやすいナビゲーションとなっている。
項目数によっては高さが出てしまい、
メインコンテンツまでのスクロール量が多くなってしまう。

 

フッターエリアの上

5      8

参考サイト:ポカリスエット

ページ下に配置してあるため、
ファーストビューはすっきり表現できる。
下までスクロールしないとサブメニューが出てこないので、
ページ回遊がしにくい。

項目数やデザインよって変わるのであくまで位置の参考となればと思います。