ÜNcLeの部屋

📷Pentax K-1MarkII : Sony α7II 99 ¦ JAPAN🇯🇵 Based in Kanagawa Street ¦ Portrait ¦ Snap

~Webアプリを構築する時の基本~

f:id:vUNCLEv:20191223140336j:plain

みなさん、お久しぶりです。アドベントカレンダーも終盤に差し掛かってきました!遅れてしまい申し訳ありません。

今回は僕がWebサービスを作る際のポイントを皆さんに共有していきたいと思います◎

 主な流れ

Webアプリに関わらず、サービスでも同じことが言えるかと思います。

・設計

AdobeXDなどでの、ツールで形を作っていきます。(モックアップ制作)基本的にこの工程では、画面移行時の画面設定を色々と設計しておく事が重要です。何にしても土台が大事☆

・開発

ここでは、実際に要件定義書や、モックアップを参考にしながら、コーディングしていきます。動き(JS)もここで付けていきます。見た目・中身・仕様をここの開発の部分で作り上げていきます。

以上の様に完結に解説していきました!

主な流れver.2

ここでは、上記に記載した流れの中身について解説していきたいと思います。

設計

ブランディング

ブランドデザインを通してユーザに反映させていく事が大切だと思います。

・色

色はデザインでもっとも重要しされてもおかしくない要素の一つです。僕が気にしているのは、色合いのバランスです。全体的に見て違和感を与えさせないような色合いに仕上げています。 

(例)新鮮なモダンな外観を加える2つの飽和原色

・書体

書体は全体のバランスを支える例で例えると家具の様な存在だと思っています。書体によっては複数使用することで、強調させたい部分などがハッキリすることが出来るので、使い方には注意しながら調節していく事が大切だと思います。

・ロゴ

そのブランドの象徴ともなるロゴはシンプルかつ、馴染みやすさを頭に入れながら制作しています。ロゴデザインに関しては、他者の意見を取り入れながら制作していくといいと思います。

UI・UX

あまりこの言葉を一緒に説明するのはあまり好ましくはないと思いますが、ご了承ください◎

・ライトモード:ダークモード

最近のトレンドとも言ってもいいかもしれません。某Apple社や某Google社は最近取り入れており、Webアプリケーションを作る際には時代の流れに沿って対応していくとユーザのニーズをつかむ事が出来るかもしれません!

・アイコン

アイコンというものはロゴとはまた違うWebアプリケーション・サービスでの見てわかる絵と想像してもらうのが一番わかりやすいかと思います。

 

今回も初心者な僕がわかりやすく、Webアプリケーションに触れてもらいたいと思い記事にしていきました!

もし、良ければTwitterInstagramのフォローをよろしくお願いします!

それではまたの記事でお会いしましょう◎