Railsを使ったWebアプリケーションの開発手順を解説。企画から実際に開発し公開するまでの流れを細かく紹介しています。Webサービスを作ったことがないという人でも今すぐ知っておきたい内容でしょう。[テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。Railsを使ってWebアプリケーションを作る手順について紹介しています。Railsで書かれたWebアプリが多く、一人でも素早く開発できる便利なフレームワークとして知られています。今回の記事では、Webアプリを作ったことがないという初心者向けに分かりやすく2人のキャラクターが登場しながらWebアプリの開発について解説しています。企業でもメインで使っているところは多いので、エンジニアを目指している方もぜひ参考にしてみてください。田島悠介(29)元エンジニアで田島アプリスクールの代表。人の成長を見るのが一番のやりがいになっている。大石ゆかり(24)3ヶ月前に田島アプリスクールに事務として転職してきた。Instagramには3つの写真加工アプリで編集してからアップするという。実際に開発してみようWebアプリを公開してみよう必要となる知識HTML/CSSHTMLとは、Webサイトにものを表示するための言語です。上の画像のようにWebサイト上に文字を表示することができます。CSSは、サイト上の表示を整えるものです。文字の色や大きさを変えたいといったサイトの見栄えを整えるためにCSSが必要になります。上の画像を見るとわかるように、背景に色付けしたり白いボックスを真ん中に寄せるなど色や位置をCSSで指定しています。プログラミングはやったことがないけど、Webアプリを自分で作ってみたいという人はこのHTML/CSSから学んでみることをおすすめします。JavaScriptJavaScriptは、ボタンを押した時やマウスオーバーした際に動きを見せるために必要な言語です。Webサイトの下部に設置されている「ページトップ」に戻る動きなどはJavaScriptを使って実装していきます。Webサービスをより使いやすい設計にするためにJavaScriptを知っておくと良いでしょう。RubyRubyはプログラミング言語の一つで、日本人のまつもとゆきひろ氏によって作られました。Rubyはプログラミング言語として、以下のような特徴を持ちますすぐに実行できる(インタプリタ型、スクリプト言語)簡単に実世界を表現することができる(オブジェクト指向)短いコードで記述できる(動的型付け)Web系のプログラミング言語の中でも人気が高く、Webアプリケーションを開発している多くの企業も利用しているのが実情です。Hansson(DHH)氏によって作られました。Railsを利用することで、実際のWebアプリケーションを作成するのに必要な、データベースへのアクセスや、HTMLの描画、(ユーザーログインで必要な)セッションの管理などを少ないコードで実現することができます。Railsの環境構築方法をご覧ください。Railsを書いて実際に動かすためにも準備が必要になってくるのです。データベースデータベースとは、あらゆるデータを一元管理し、そのデータを検索などしやすくしたシステムです。普段Webサービスを使っている中で何か登録している動作があれば、すべてデータベースに格納されていると理解できるでしょう。Webサービスを形にするためにはデータベースの知識も必要不可欠になってきます。Databaseなどがあり、これらはリレーショナルデータベース(RDB)と呼ばれます。Railsではリレーショナルデータベースを使用することが多いです。いった流れが一般的です。「企画」では、どんな人がいつ使うのかといったターゲットを決め具体的なWebアプリの構想を練っていきます。「設計」では、サイトマップ、ワイヤーフレームの作成、データベースの設計を行いましょう。以下で具体的に解説しています。サイトマップの作成サイトマップとはWebサイトの構成図です。作ろうと考えているWebサイト・Webアプリにはどんなページが必要なのか、どういう配置にしたら良いか考えるものです。例として、コーポレートサイトのサイトマップを作成してみました。会社のHPに限らずどのWebサイト、Webサービスもサイトマップを作っておくと余分なページや足らないページなどを把握することができます。複数人で開発する際の共有としても役立つでしょう。ワイヤーフレームワイヤーフレームは、各ページをより詳細に設計するための図になります。色付けなどは必要ありませんが、そのページにはどんなボタンやレイアウトが必要なのか作成する必要があります。自分の頭の中にイメージがあっても形にする時にワイヤーフレームを書き出しておくとより鮮明に理解できるでしょう。Cacooなどのツールを利用すれば、初心者でも簡単に作成することができるはずです。データベース設計データベースで管理するデータの全体図を書き出していきます。Webサービスを運営していく中で機能を追加したり削ったりすることがあるので、将来的にも一元管理しやすいデータベースを設計しておくと良いでしょう。項目なども洗い出しておくことにより、Modelの設計などに役立ちます。やり方が分からないという方は、作りたいWebサービスと似たすでにあるサービスの情報を洗い出してみると良いでしょう。何か動作したときにどんなデータが登録されているのか確認してみると勉強になるはずです。Railsでコーディングしながらアイデアを形にしていく段階になります。コードは、テキストエディタというものを使って書いていくようにしましょう。大石ゆかりひとつWebアプリ作るのにも大変そうですね〜田島悠介そうだね〜。早くても3ヶ月くらいはかかると思うよ。ゲームとかは1本作るのに1年くらいかけてつくり込むからね!大石ゆかりえ、そんなに・・・Webアプリを公開してみようオリジナルのWebアプリを作ったら公開して誰でも使えるような状態にしたいと思うでしょう。中には自前でサーバーを立てて運用する人もいますが、費用や時間的なコストを考えるとレンタルサーバーを借りて公開する方が良いでしょう。実際に公開するためには、独自ドメインを取得し、サーバーを立ち上げる必要があります。それぞれ以下で記載している記事も合わせてご覧ください。費用をかけずに手軽に公開したいという方であれば、Herokuというツールを利用すると良いでしょう。独自ドメインの取得ドメインとは、インターネット上にある住所のようなもので登録していないと訪問先がなくWebサイトを見ることができません。ムームードメインやお名前.comなどが人気でしょう。ドメインが取得できるサイトサーバー(自前・レンタル)ドメインを取得したらサーバーを用意しなければなりません。自分で取得した住所に建物を建てるようなイメージです。決まった住所(ドメイン)に建物(サーバー)を置くことでWebサイトを見ることができるのです。レンタルサーバーは数多くあるので、選ぶ基準としては、「利用したい技術が利用できるか」や「かかる費用」などを事前に確認しておくと良いでしょう。さくらのVPSやSqale(スケール)などは初めて利用する人でも扱いやすいかと思います。Railsを使うのがおすすめ!Webアプリを作る時は企画→設計→開発という順番で進めよう!Webアプリを公開するためにドメイン取得とサーバーを借りよう!Webアプリを作ることでデザイン面、システム面両方の知識が身につくでしょう。エンジニアとして就職転職したいという人も一度自分で何か作った経験があれば、大いに役立つはずです。Railsは初心者でも受け入れやすくアイデアを形にしやすいフレームワークなので、ぜひチャレンジしてみてください。Railsオンラインブートキャンプを開催しています。関連する記事Rubyでraiseメソッドを使った例外処理の書き方【初心者向け】Rubyの例外処理の書き方について解説します。Rubyについてそもそもよく分からないという方は、Rubyとは何なのか解説した記事をまずご覧ください。...Ruby【データから紐解く!】人気プログラミング言語を徹底比較!本稿は、Codementorのブログ記事を、Codementorより了解を得て日本語翻訳し掲載した記事になります。科学、技術、工学および数学の素養がある...プログラミングRubyでYAMLを扱う方法を現役エンジニアが解説【初心者向け】RubyでYAMLを扱う方法について解説します。Rubyについてそもそもよく分からないという方は、Rubyとは何なのか解説した記事をまずご覧ください。Railsの学習をする上でまず抑えておきたい「CRUD」について解説していきます。CRUDという単語だけでなく...RubyRubyでCSVファイルへ書き込む方法を現役エンジニアが解説【初心者向け】RubyでCSVファイルへ書き込む方法について解説します。現在アメリカではオンラインで学べるプログラミング学習サービスがすごい勢いで人気を集めています。【ゼロから作る!】初心者から始めるAndroidアプリ開発の開発手順とはAndroidアプリの開発手順をゼロから紹介していきます。今回の記事では、アプリを作ったことがないという未経験者でも分かりやすく2人のキャラクターが登場しながらAndroidアプリ開発について解説しています。「Androidアプリを作る上で必要なもの」「Androidアプリを作ってリリースしてみたい」などそれぞれシチュエーションに分けて細かく紹介していきます。元エンジニアで田島アプリスクールの代表。人の成長を見るのが一番のやりがいになっている。3ヶ月前に田島アプリスクールに事務として転職してきた。Instagramには3つの写真加工アプリで編集してからアップするという。へぇ〜そうなんですね。Androidアプリの開発を進めるためには上の3つが必要になります。Studioで作る人が多いです。中にはツールを使ってアプリ開発できるものもありますが、プログラミングをして自分の力で作りたいという人は「Java」というプログラミング言語を理解する必要があるでしょう。Studioのインストール方法をご覧ください。おお、いいね!Javaという言語自体は20年くらい前からあって、アプリだけじゃなくてWebや携帯機器を作る上でも便利な言語なんだよね。いった流れが一般的です。「こんなアプリを作ってみたい」と思ったら具体的に企画していきます。個人で作るアプリであれば、アイデアが細かく決まっている必要はないでしょう。作りながらこういう機能が欲しいと思い浮かぶことも多々あります。企画段階で決めておく方が良いでしょう。設計では、アプリの画面設計図を作成しましょう。CacooやProttといったツールを利用すれば、初心者の方でも手軽に作成できるのでおすすめです。アプリの形がイメージできる画面設計図が完成したら実際にアプリを作っていきましょう。Studioを使ってアプリの画面や機能を作っていきます。具体的には、XMLで画面を作り、ソースコードを書いて正常な動作を行います。ログイン機能を作る場合「ログインする画面」と「ログインに成功した後の画面」が少なくとも必要になります。この1と2を連動させるためにコードを書く必要があります。ログインに失敗した時の表示画面やコードも必要になるでしょう。GoogleがJavaという言語を選んだんだけど、Javaは他の言語で出来ないことを効率良くできたり、ずっと人気の高い言語で使える人も多いだろうと思って採用してるんだよ。Playで公開することが一般的でしょう。デベロッパーコンソールと公開用ツールというものを活用してリリースしていきます。それらを使用するためにGoogleアカウントをデベロッパーとして登録する必要があります。登録料に$25(一度支払えば年数制限なく使用可能)支払う必要がありますので、覚えておきましょう。Play以外にもアプリストアが存在しています。Play以外のアプリストアとしては、Amazonアプリストア、楽天アプリ市場などが有名でしょう。そうそう!それにiOSアプリと違って審査が厳しくないから比較的簡単にリリースできるよ!24時間以内には審査が終わっているからね。Androidアプリで収益を得ようと思ったら3つの方法があるので、紹介していきます。有料ダウンロードは、アプリを有料で販売することです。有料アプリはゲームが多く購入される傾向にあります。広告はアプリ内に広告を表示して収益を得ます。アプリ自体は無料で使ってもらい、広告を出すことで収益が上げられます。アプリ内課金はゲームに良く使われます。ゲーム内のアイテムを販売するなどして収益を得ます。広告などを利用すれば個人でもアプリで稼ぐことができるでしょう。最近って有料アプリあんまり見ないですよね。ダウンロードしてもらおうと思ったら無料で公開するのが良いかもね。日本では、iPhoneの方がスマホのシェアは多いですが、世界的にはAndroidのシェアが圧倒的です。海外の人にも使ってもらいたい、グローバル展開したいと考えるのであれば、Androidアプリの開発は欠かせないでしょう。Androidアプリは一人からでも開発できるので、ぜひチャレンジしてみてください。現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でAndroidアプリを公開してみたい方はぜひご覧ください!Androidアプリ開発ゼロから始める!WordPressでブログサイトを作る手順とは【入門向け】Webサイトを作成する上で人気が伸びているWordPress(ワードプレス)。今回は、WordPressを使ってブログサイトを作る手順について紹介しています。2人のキャラクターが登場しながら分かりやすく解説しているので、WordPressを使ったことがない、ブログサイトを作ってみたいという人はぜひご覧ください。元エンジニアで田島アプリスクールの代表。人の成長を見るのが一番のやりがいになっている。3ヶ月前に田島アプリスクールに事務として転職してきた。Instagramには3つの写真加工アプリで編集してからアップするという。WordPressとは、CMS(コンテンツマネジメントシステム)と呼ばれるサービスの一つで、無料で使えることで有名です。ちなみにCMSとは簡単にサイト上のコンテンツを管理することができる仕組みです。普通、サイトを作ろうと思ったらHTML/CSSといった言語を使いながらプログラミングの作業が必要になります。WordPressの場合は、プログラミングを一切することなく自分のサイトを作ることができるのです。magazineですが、このサイトもWordPressを使って動いています。ブログのように記事配信を行っていくようなサイトにはWordPressが適していると言えるでしょう。最近では企業のコーポレートサイトもWordPressで作成されているサイトがどんどん増えてきています。WordPressをインストールし、実際にWebサイトとして動かしていく上で必要なものを紹介しています。準備できていないという人は今のうちに用意しておきましょう。独自ドメインとは、インターネット上でアクセスするための住所のようなものです。「◯◯.com」や「◯◯.jp」の◯◯の部分がドメインです。独自ドメインというだけあって自分で決めることができます。Webサーバーは、WebサイトをPCやスマホなどのWebブラウザに情報を表示するソフトウェアになります。昔は自分でサーバーを用意しなければなりませんでしたが、今はレンタルサーバーという便利なものがあるので誰でも利用することができます。レンタルサーバーを利用すれば月額500~1,000円程度でWebサイトを運営することができます。エックスサーバーやさくらインターネットなどのレンタルサーバーは初心者にも人気です。FTPクライアントは、サーバーへファイルを転送するために必要です。無料で使えるFTPソフトもあり、特にCyberduckやFileZillaといったツールがよく使われています。以下は、WordPressを利用する手順になります。一つずつ解説していきます。WordPress.orgからWordPressをダウンロードすることが可能です。ダウンロードしたら解凍しておきましょう。WordPressをダウンロードしたらサーバー上にアップロードする必要があります。以下ではFileZillaというツールを使っていますが、どのFTPツールでも基本の操作は同じです。FileZillaを開いたらサイトマネージャを開き、「新しいサイト」をクリックします。続いて、ホスト名、ユーザー名、パスワードを入力し、ログオンの種類を通常に設定します。入力したら接続ボタンをクリックしましょう。ホスト名、ユーザー名、パスワードをそれぞれ事前に確認しておきましょう。赤枠内がサーバー内にあるファイルになります。右クリックをして「ディレクトリを作成」を選択してください。ディレクトリ名は、半角英数字で任意の名前を入力します。今回は、「/wp」というディレクトリを作成しています。作成した「wp」ディレクトリをクリックして開きます。解凍したWordPressフォルダ内のファイルをすべて選択し、右クリックで「アップロード」を選択します。次に、wpディレクトリを右クリックして「ファイルのパーミッション」を選択します。「数値」を705に変更します。wpディレクトリ下の「wp-content」も同様に705に変更したらサーバーへのアップロード作業は完了です。これからWordPressが利用できるように設定していきます。「さあ、始めましょう!」と書かれた箇所をクリックしてください。使用するデータベースなどの情報を入力する項目が表示されます。「この部分のインストールは無事完了しました。現在データベースと通信できる状態にあります。準備ができているなら...」と表示されれば、問題なくファイルが作成されています。インストール実行をします。ブログサイトの「サイトのタイトル」、WordPressの管理画面にログインする際の「ユーザー名」「パスワード」「メールアドレス」を入力しましょう。あとで変更することも可能です。ブログサイトが検索結果に出てもいい場合は「検索エンジンによるサイトのインデックスを許可する。」にチェックを入れておきましょう。WordPressをインストールし、「成功しました!」と表示されれば無事完了です。実際にログインしてみましょう。設定したユーザー名、パスワードでログインするとWordPressの管理画面に入ることができます。無事ログインできればWordPressの管理画面に入ることができるはずです。上記の画像がWordPressの管理画面になります。ブログを投稿したり、サイトの設計を編集したり、アカウントを追加するなどは基本的にこの管理画面上で行うことが可能です。サイドメニューに情報が多く、慣れるまで少し大変かもしれませんが毎日ログインして利用していればすぐ使えるようになるはずです。わぁ、WordPressっていろんな機能があるんですね。実際にWordPressが利用できたらWebサイトのデザインや構成を編集していきます。これから作っていこうと思っているブログ記事やカテゴリなどデザインを整える必要があるでしょう。公開するブログサイトの構成、つまりサイトマップを考える必要があります。作る前から細かく設定する必要はありませんが、サイト内にどんなページが必要なのか書き出しておくとテーマも選びやすくなります。簡単にブログサイトのサイトマップを作ってみました。テーマとは、簡単に言えばサイトのデザインです。WordPressが人気な理由の一つとして最初にも紹介しましたが、HTMLやCSSなどデザインやプログラミングの作業をしなくてもテーマを選択するだけで一つのサイトにすることができます。Fifteen」が適用されています。非常にシンプルな作りになっているので、「もっとおしゃれなテーマにしたい」、「ヘッダーやフッターをつけたい」などサイトに合わせてテーマを選んでいきましょう。テーマを変更する際は、「外観」>「テーマ」で変更することが可能です。テーマ自体は、WordPressだけでなくいろんな企業や個人で提供しているので、調べてみることをおすすめします。無料で使えるWordPressのテーマ30選も合わせて紹介しておきます。パララックスっていうサイトかな。固定ページは更新することが少ないページで利用します。企業ページの場合、会社概要やお問い合わせページなどが該当します。デザインテーマによっては、固定ページで設定した内容を丈夫のナビゲーションメニューで自動的に表示してくれます。次のように、ニュース・インタビュー・テクノロジー・キャリア・お問い合わせという5つの固定ページを作成した場合、ページ上部にこの様に表示されるイメージになります。WordPressは元々ブログを作成するために開発されたアプリケーションです。投稿ページでは日々のブログを投稿するイメージで、ページが作成されます。固定ページと異なり、デザインテーマの標準状態で、ページ上部のナビゲーションメニューに投稿ページの内容が表示されることは、ほぼありません。通常は、トップページに投稿日の新しい順に表示されます。WordPressが選ばれている理由の一つにカスタマイズの柔軟性がよく挙げられます。記事を追加、更新できるだけでなくWebサイトのSEO対策や会員機能の追加など簡単に行えるのです。ブログサイトを作ったらより多くの人に見てもらいたいはずです。プラグインは、WordPressのダッシュボードから追加・設定することができます。プラグインをインストールしたら「有効化」しなければ利用できません。プラグインはいつでも設定できるので、必要に応じてインストールしましょう。WordPressでまず最初に入れるべきプラグインを参考にしながらより本格的なサイトにしていきましょう。続いてブログ記事を実際に投稿してみましょう。新規でブログ記事を作成する場合は「投稿」>「新規追加」で新しく公開することができます。文章だけでなく画像や動画を記事内に挿入したい場合は、フォーマットなどを上手く利用すると良いでしょう。サイドメニューの「投稿」>「投稿一覧」で現在公開している、下書きの記事を一覧で見ることができます。world!」というタイトルのブログ記事を読むことができました。WordPressでサイトを作る際、サーバーやドメインの契約、新しいツールの導入など慣れない作業が多いかもしれませんが、サイトを公開してしまえば後はどんどんブログ記事の作成に集中できます。WordPressの使い方を覚えて、ぜひ自分だけのブログサイトを作ってみましょう。[お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。利用したシステム開発、店舗検索スマホアプリ開発など。その他にも地域の職業プログラマー育成活動を行い、2018年には小学生がUnityで開発したオリジナルAndroidアプリをGooglePlayでリリース。ゲームで遊ぶより作ろうぜ!を合言葉に、小学生でも起業できる技術力を育成可能で有ることを証明し続けている。WordPressなぜWebアプリケーションは動くのか【人事担当者のためのIT勉強会レポート】TechAcademyで以前に開催した勉強会、「なぜWebアプリケーションは動くのか〜知識ゼロでもわかるWebアプリの仕組み〜」の内容をご紹介します。IT関連の企業に勤めていなくても、非エンジニアの方であれば知っておきたい知識です。前提知識の共有から始まりました。そもそも、アプリケーション(ソフト)は自分のPCにインストールして利用します。自分のPCに入っているため、速いというメリットがある反面、自分のPCでないと操作できないというデメリットもあります。いう一連の流れをPCが処理しています。どんな難しい処理でも基本的には同じで、この流れはWebアプリケーションも同じです。その後、インターネットが開始して、Webアプリケーションも生まれます。最初はHTMLの文書を読むだけでしたが、Webアプリケーションに発展していきます。Webアプリケーションは、手元にインストールしなくても、手元にあるようにアプリケーションを使うことが可能です。ネットワークでつながっていますが、主な処理はPCではなくサーバ上で行われます。このような処理が行えるようになったのは、PCの高速化、サーバの高速化、ネットワークの高速化といった影響もありました。続いて、Webアプリケーションの処理を理解するために、サーバとクライアントについても紹介されました。一言でいうと、サーバは処理を提供する側、クライアントは要求を出す側です。クライアント(PC)で入力した内容を、サーバが処理をして、クライアントに出力される流れになります。この処理をより具体的にみていきます。WebブラウザにWebサイトが表示される流れを表すと、このようになります。この際、3種類のサーバがありそれぞれ役割が異なります。3種類のサーバは、役割を分けることによって、効率よく処理することができています。サーバに役割があるように、エンジニアによって得意な分野も異なります。そのため、エンジニアの特性にあった担当者を置くことが好ましいということを人事担当者は知っておく必要があるということでした。今回の勉強会レポートは以上です。UXPinのブログ記事を、了解を得て日本語翻訳し掲載した記事になります。Klein氏によって投稿されました。あなたにUXデザイナーとしての経験があれば、新規プロジェクトの立ち上げで次のような会話を耳にしたことがあるかもしれません。「楽しくて使いやすい製品を開発したい。「ユーザー調査が必要だ。「オンボーディング(新規ユーザーを自社の製品やサービスに慣れさせるためのプロセス)を改善したい。「新規ユーザーのためにプログラムの誤りがないかチェックする作業を行う必要がある。「ペルソナ分析、Photoshopで使うモックアップ、ワイヤーフレーム、ランディングページ、追加の挿入が必要だ。これらの会話は全て無意味なものです。製品について考えるべき問題や、製品の改良方法を決定するのに直接的には役に立たないからです。UXのプロジェクトにおいて、誰かから「これを改良してほしい。」などの曖昧な指示しか与えられないまま、具体的な成果物を求められたら、あなたは会話の方向性を変えた方がいいでしょう。その方法として、次のような質問を投げ返すことが有効です。これらの質問は、デザインのプロジェクトを成功させるために重要な、次の3つの要素を定義するのに役立ちます。これらの3つの要素はUXデザインに不可欠なものです。これらなくしてはUXデザインは絵に描いた餅です。デザインの目的とは、ユーザーの問題と自社のビジネスの問題を、両方とも解決することです。ユーザーの問題を解決すること(例として、ユーザーが必要とするものを提供したり、生活の質を向上させること)によって、自社のビジネスの問題を解決すること(例として、利益を生み、会計上の自己資本比率を上げること)ができれば、デザインの至高の目的が達成されたといえます。これらの質問に答えを出すことが、ユーザーの必要とする製品を開発し、また自社のビジネス成功の鍵となる判断基準を改善することにつながります。これらの質問に答えることのデザイナーにとってのメリットは、プロジェクトを再構成することで、デザイナー自身がより自由に問題解決を行えるようになることです。他の人から与えられた指示をそのまま実行するのではなく、判断基準をどう改善できるかを、デザイナーが自分自身で仮説から考えることができます。「オンボーディングのプロセスを変えてください。」といった指示を受ける代わりに、「新規ユーザーのための10日間のライセンス認証について、基準を再考してください。」といった指示を受けて、デザイナー自身が考えることができるのです。重要なことに、成功の判断基準が存在していれば、自分のデザインについて直接的な評価を得られるため、デザイナーとしての成長につながります。これらの質問に答えることのエンジニアにとってのメリットは、プロジェクトの範囲が定まることです。プロジェクトの要件定義が上手くなされていないとしたら、プロジェクトの範囲の肥大化を引き起こすおそれがあります。解決するべき問題や成功の判断基準が定まっていないとしたら、プロジェクトの仕事の増大を引き起こしやすいのです。これらを明確に定めておけば、新たな作業が発生しても、直接的に問題解決に役立たないものは後回しにすることができます。あなたが会話の方向性を変えようと試みても、最初は上手くいかないかもしれません。クライアント、プロダクトマネージャー、エンジニアなどに、これらの質問を繰り返し投げかけてみましょう。答えを得られなくても、プロジェクトを開始する前までには、協力して答えを出しておきましょう。なければ、ユーザー、会社、チーム、あなた自身にとってメリットの少ないプロジェクトになってしまうおそれがあります。[お知らせ]TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。本稿は、Babich.bizのブログ記事を了解を得て日本語翻訳し掲載した記事になります。Babich氏によって投稿されました。アニメーションはストーリーを伝えることができます。伝えるのは長くて複雑なストーリーではなく、シンプルなストーリーです。「このコンテンツを見て!」、「操作は正常に完了しました。」などのメッセージの伴う、短いストーリーです。アニメーションを使う目的は、単にユーザーを楽しませることではなく、ユーザーがアプリの動作や使い方を最も効率的に理解するのを助けることです。次に引用するように、ZURB社もこの考え方を表明しています。「ZURB社では、静的な画面だけをデザインする時代は終わりました。ユーザーが画面からコンテンツを実質的に見ることができるようなデザインを実践しています。アニメーションは美しさと機能を兼ね備えたデザインを、幅広いコンテキストにおいて実現できます。:プログラムの振る舞い(処理や動作)に影響を与えたり、コンピュータのステータス(動作状態)や動作結果をユーザーに知らせたり、ユーザーの注意を引いてを上手く誘導することも可能です。この記事では、UX向上のためのアニメーションの例をいくつか紹介していきます。プログラムのソースコードの行数を減らすことが難しければ、データ読み込み中の待ち時間が、ユーザーにとってなるべく楽しいものとなるよう工夫するべきです。ユーザーを退屈させる、クルクルと回るローディングアイコン(このアイコンは、ユーザーにデータ読み込み中という事実を伝えるだけです。)の代替として、アニメーションを活用できます。screen)を組み合わせて活用すれば、ユーザーの関心をコンテンツに集中させ続ける効果もあります。この組み合わせは、ほとんど全てのWebサイトやアプリにおいて利用できます。スケルトンスクリーンは、コンテンツのデータ読み込みが完了するまでに、UIを段階的に表示する手法です。アニメーションは、トランジション(画面遷移)をよりクリアに表現できるため、操作の過程を明確に示すことができます。ユーザーも意識をどこに向けたらいいのかを理解しやすくなります。Zumbrunnen氏による次のデザイン例では、スクロール画面とアニメーションを組み合わせています(スクロールエフェクト)。ユーザーがリンクをクリックした後も、コンテキストの状態を維持する助けとなります。これと比較して、処理の最初と最後の2つの静的な画面だけでトランジションをデザインした場合、途中経過が欠けているような印象を与えます。画面が急に変わることは不自然であり、ユーザーにとってはインターフェースの操作を理解する妨げとなります。アニメーションとは、静的な画面に「息を吹き込む」ことです。自然なトランジションにより、ユーザーはインターフェース上でのフロー(流れ)や進行速度を理解しやすくなります。インタラクションの次のステップで何が起こるかを予測しやすくなります。アニメーションは、直接操作しているような感覚を高めることもできます。次の例では、スムーズなトランジションが実現されています。メニューアイコンをプレイバックコントロール(コンテンツ再生時のボタン操作の機能)に変化させ、また元のメニューアイコンに戻しています。ユーザーにボタンの機能を示すとともに、インタラクションに「感動や驚き」の要素を加える効果があります。「再生ボタン」から「停止ボタン」に変化するデザインは、これら2つの機能が関連していること、また同時に成立しえないことを上手く示しています。ユーザーの視線を画面中央にあるプレイバックコントロールに集めるために、アニメーションを使っています。Button)をタップすると、プラス記号から鉛筆のアイコンに変化します。鉛筆のアイコンが、最初に生成されるメソッドだと分かります。このような細部の設計があるかどうかが、ユーザーが次に何が起こるかを予測しなければならないデザインとなるか、またはユーザーがアイコンの意味を直感的に理解できるデザインとなるかの分岐点です。フォームの入力画面にもアニメーションを活用できます。正しいデータが入力されたら、「頷く」ようなアニメーションで肯定の意味、間違ったデータが入力されたら「首を横に振る」ようなアニメーションで否定の意味を伝えることができます。したアニメーションは、ユーザーにとってその意味を瞬時に理解しやすいといえます。間違ったデータが入力されたら、「首を横に振る」ようなアニメーションで操作に誤りがあると伝えます。アニメーションは、ユーザーに操作の結果を視覚的に示すことができます。tell(言葉で説明するよりも、見せる)」という原則に従うなら、アニメーションを操作への応答として使うことができます。Villar社の提供するオンライン決済ツール「Stripe」では、ユーザーが「決済する」のボタンをクリックすると、決済完了前に、データ処理中を示すスピナー(Spinner:ローディングアイコン)が現われます。アニメーションは、使い方によっては大きな効果を発揮できます。アニメーションを使った方がいい場面、使わない方がいい場面について時間をかけてよく考えることが大切です。アニメーションは、デザインを構成する要素の1つとして、設計プロセスの始まりから考慮に入れるべきです。presentation:プレゼンテーション、店舗のウィンドウディスプレイなど、視覚的に訴えるデザイン)以上のものだからです。スティーブ・ジョブズ氏の言葉を引用すると「デザインとは、見た目や使い心地だけではない。デザインとは、それがいかに機能するかだ。[お知らせ]TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。アプリデザイン【連載企画!】非エンジニアがエンジニアとのコミュニケーションを円滑にするために今できること!本記事は、キャリアに特化したQ&Aサービス「JobQ」との連載企画になります。毎週月曜日に転職や起業など、様々なテーマに沿って紹介していくシリーズです。今回は引き続き第五弾として「非エンジニアがエンジニアとのコミュニケーションを円滑にするために今できること!」というテーマで紹介していきます。PMとして仕事をしてます。エンジニアの方と円滑に仕事を進めていくためのアドバイスをいただけると幸いです。PMとして仕事をしている2年目です。エンジニアの方とのコミュニケーションに苦労しています。今年に入ってからPMという職についたので、まだまだ知識や経験としては少ないです。そんなこと言ってられません。円滑に仕事を進めていくためのアドバイスをいただけると幸いです。エンジニアとのコミュニケーションで悩む人は多くいるかと思いますが、以下ではエンジニア視点でのアドバイス等を載せています。いった姿勢でエンジニアと仕事をしているのか参考になるでしょう。心理学も精神を病んだ人だとか脳を損傷した人だとかを日常生活に支障なくするぐらいを目的としたものだったりします。理解のために人を単純化して見てしまう理論は意味がないです。私のPMのやり方を書いておきますね。指示しないですし、内部の会議もやらないです。進捗は自分で個々のメンバーの席に行って、見通しや課題を聞きます。進捗2割ぐらいで「最後が間に合うかは教えてよ」とは言います。午前中の1時間以外は作業場所にはいませんし、飲みにも行きません。悩む要素ないって感じなのですが、そういうのは、個々の性格による部分が多いかと思います。「メンバーが情報を共有したい」と感じるように動きを進めます。全体としての課題が共有されたら、見過ごさずになんとか対応します。対応が難しいなら、やってみたけど難しいという話も共有します。これだけで、そこそこ課題はあがってくるようになります。全体の状況や課題の報告は、もっとスムーズになります。エンジニアをやっています。ぼくの場合はですが、なるべくコミュニケーションを取らなくても仕事が進むタイプの人と組むとすごい楽に感じます。コミュニケーションをいちいち取るくらいだったら作ったほうが早いみたいな気持ちになってしまいます。逆にエンジニアとのコミュニケーションは密にとりたいです。仕様が変わるならなるべく早く伝える、期日が守れるかだけハンドリングするって感じで充分だと思います。以上、3名のアドバイスを紹介しました。回答にもありますが、直接コミュニケーションを取るよりもSlackやChatWork等で非同期コミュニケーションを取った方が良いのでしょう。スキル面では、非エンジニアでも「HTML/CSS」や「SQL」の理解があるとお互いスムーズに作業が進むはずです。JobQでは就職や転職などキャリアに関する悩みを受付中です。Railsオンラインブートキャンプを開催しています。CORPORATION.。