おためし受講中

これからのモバイルサイト UIデザイン基礎 -2回目-

Web制作現場では、市場のニーズや制作ワークフローの変化から、Webデザイナーの役割が少しずつ変わってきています。従来では、ディレクターの作ったワイヤーフレームを元にPhotoshopでサイトデザインをするのがデザイナーの役割でした。しかし、現在ではサービスやプロダクト全体のユーザー体験(UX)の価値を上げるためにより良いユーザーインターフェース(UI)を設計するには、デザイン作業の前後の工程にも参加し、情報を深く理解するスキルが求められています。

全3回の授業で、モバイルサイトデザインにスポットを当てて、UIデザインの基礎授業を講義と実技を交えながら進めていきます。対象者は、Webデザインを勉強している初心者の方、またはモバイルUIデザインを基礎から学びたい方です。

2限目
コンセプトやターゲットを元に模型となるプロトタイプを作成する

※PhotoshopやIllustratorなどのデザインツールの具体的な使い方はこの授業で行いませんので、別の授業と併せてご覧ください。

学生代表

  • 江川 みどり

    江川 みどり

    スクー放送部

【ノート機能】
授業内容や覚えておきたいポイントなど、ノートに自由に残せます

再生位置挿入 資料挿入
筆記アシスト
ONOFF
    【チャプター機能】
    授業内容をピンポイントでおさえながら
    ご自身のペースで進めることができます
    【前半】授業
    自己紹介
    01:04  (00:13 ~ )
    授業ターゲットの紹介
    00:23  (01:17 ~ )
    授業の目標
    00:27  (01:40 ~ )
    今回の授業内容
    00:40  (02:07 ~ )
    質問:どちらがスマホ?
    02:14  (02:47 ~ )
    スマホとPCのアクセス比率
    00:55  (05:01 ~ )
    日本と世界のモバイルOS比率
    02:54  (05:56 ~ )
    スマホの画面サイズとタップ領域
    00:23  (08:50 ~ )
    画面サイズ
    01:34  (09:13 ~ )
    タップ領域
    01:49  (10:47 ~ )
    モバイルに最適化されたWebサイトの例3つ
    00:21  (12:36 ~ )
    情報を隠す
    02:26  (12:57 ~ )
    情報の優先順位を変える
    03:05  (15:23 ~ )
    デザインを最適化する
    06:48  (18:28 ~ )
    プロトタイプとメリット
    00:31  (25:16 ~ )
    プロトタイプとは
    00:29  (25:47 ~ )
    プロトタイプの種類
    01:17  (26:16 ~ )
    プロトタイプを作るメリット
    01:39  (27:33 ~ )
    プロトタイプに必要なもの
    00:31  (29:12 ~ )
    プロトタイピングツール
    05:45  (29:43 ~ )
    プロトタイプを見てみる
    04:11  (35:28 ~ )
    画面遷移とアニメーション
    00:53  (39:39 ~ )
    トランジション
    06:15  (40:32 ~ )
    アニメーション
    02:32  (46:47 ~ )
    イージング
    02:27  (49:19 ~ )
    まとめ
    03:37  (51:46 ~ )
    【後半】質疑応答
    Q:心理学などのお話が出ましたが、先生は今追求したいと思っていることは何ですか?
    01:20  (55:55 ~ )
    Q:特にスマホなど、デザインごとに表示されるフォントが違うと思うのですが、印象をぶらさずにデザインするコツはありますか?
    01:25  (57:15 ~ )
    Q:wordpressで制作する際に、レスポンシブではなくスマホサイトを別にする際、テーマを分ける等できるのでしょうか?どのように制作されますか?
    00:55  (58:40 ~ )
    Q:ブラウザチェックのために、アンドロイドとiOSは両方持つべきでしょうか?
    01:20  (59:35 ~ )
    お知らせ
      (1:00:55 ~ )