MIS.W 公式ブログ

早稲田大学公認、情報系創作サークル「早稲田大学経営情報学会」(MIS.W)の公式ブログです!

webデザインのススメ【新歓ブログリレー2019 12日目】

まえがき

新入生の皆さんこんにちは、MIS.W53代の葵です。

このサークルではwebデザイン班班長をしています。

webデザイン班は去年から新設された班なので活動している班員が少ないです!是非新入生にも入って欲しい!ということでこのブログではwebデザインについてちょこっとだけ紹介したいと思います。

本題に入る前に

みなさん、新歓特設サイトはもう見ましたでしょうか。 このブログを見ているということはもう見ているかもしれないですね。

制作はwebデザイン班のfuchi君です。

まだ見てない!という方は是非こちらから御覧ください!

もう見た!という方も新歓情報のチェックにぜひ利用してくださいね。

webデザインとは

引用

Webデザインとは、パソコンやスマートフォンなどの電子機器上で表示されるもののレイアウト、デザインを決めることを指します。

ホームページのデザインも、ウェブサービスのデザインも、ランディングページのデザインも一概にWebデザインと呼ぶことができます。

このようにwebデザインとはウェブページの見た目を作る作業をさします。

紛らわしいですが、MIS.Wにはwebデザ班とは別にweb班があります、こちらはサーバーなどの管理をしています。デザインはしません。 またMIS.Wにはデザイン班という班もありますが、こちらはパンフレットやチラシ、雑誌などのデザインをしています。webページのデザインはしません。

webページを扱う知識もデザインの知識も両方必要になる。この2つの班の中間にあるのがwebデザ班といってもいいかもしれないですね。

技術面

webページは主にhtmlとcssというマークアップ言語を使って文章や画像を配置したりリンクを貼ったりします。必要があればjavascriptという言語も使用します。

(高校の情報の授業でやった人もいるかもしれないですね、私の学校ではまったく触れませんでした)

詳しく話すと長いので、もっと知りたい方は去年の新歓ブログを参照してください!

ただ文章と画像を配置するだけでしょ?と侮ることなかれ。大半の班員は泣きながらCSSを書いたことがあります(要検証)。 ただ使いこなせるようになると楽しいです。本当です。

デザイン面

使いやすいWebページのデザインを考えるのもwebデザインの大事な作業です。一口に使いやすいページと言っても色々ありますね。情報がすぐ見つけられるページ、商品が魅力的に見えるページなど……これらの問題を解決するためにデザインの知識も必要になります。

MIS.Wにおける制作サイト例

webデザイン班は広報係から依頼を受けてイベント特設ページを作るお仕事があります。 ただ、イベントが終わってしまえばインターネットの海に流されてしまいます。 こんなに良いサイトなのにもったいない……ということで、この1年間で作ったページを勝手に紹介していきたいと思います!

去年の早稲田祭の特設ページです!

worksのところが画面幅によって何列で表示するのかが変わるのがポイントですね。(スマホiPad、パソコンなど世の中にはたくさんの画面サイズを持つデバイスがあります。どの端末で見てもきれいなレイアウトになるようにデザインすることをレスポンシブデザインと言います。) それとaccessのところの背景が動かないところが好きです。フォントにもこだわりが……?

C95に参加したときの特設ページです!

雪のアニメーションがとても凝ってて良いですね。 見出しにもアニメーションが入ってておしゃれ! 個人的にはshareのところの水色がとても可愛くて好きです。

先ほど見ていただいた新歓特設ページです!

担当者にシンプルになりますと言われ続けていたのですが、デザイン的に超凝ってるのが仕上がってきてとてもびっくりしました。 色使いもおしゃれで文字も見やすいですね。結局文字を読んでもらわないと情報が伝わらないのでとても大事なポイントです。

余談

先ほどから出ているCSSですが、実はこれを使って動画が作れます。本来はボタンをクリックしたときに色を変えたり、写真をスライドさせながら登場させるために使うものですが、頑張れば動画が作れます。去年は某班員がこのようなアニメを作っていました。

このようにちょっと変態的な意外な使い方もできます。気になる人はcss animationで検索してみましょう! ツイッターハッシュタグ#css_animationにも素敵な作品がいっぱいありますよ!

まとめ

というわけでwebデザインについて簡単に説明させていただきました。興味があればぜひMIS.Wに入会してwebデザイン班に入ってみてください!待ってます!

明日はくさかさんの歌詞の書き方についての記事です!お楽しみに!