Webデザインの流行を振り返る [-1からWeb作成 その1]
これまでの流れ
Webデザインの流行
まずは事前知識としてWebページってどういうデザインが流行ってるんだ?というのを見ていきます。
記憶を頼りにこんなデザイン流行ってたなぁというのを列挙して見ます。
ポータルサイト型
引用:Yahoo! JAPAN
名前は勝手につけてます。
Yahooに代表されるように、2列や3列、情報を細かく区切ってぎっしり表示するようなデザインです。昔はWebは文字で情報を伝える手段という色が強く、効率的に情報を整理した結果な気がします。
今でもポータルサイトではこう行ったデザインが多いですね。
昔はこのデザインのように行列に区切ったレイアウトをするためにテーブルレイアウトという技術があってだね(ry
Web2.0/RIA
2007,8年あたりでしょうか、Web2.0という言葉が流行語になったように、ユーザーとの双方向性やユーザー体験(UX)が重視された頃です。
この頃にはダイナミックに動くアニメーションやFlash技術などが用られ、Webの進化(というかブラウザの進化?)が強く現れた、、、ような気がします。
派手さと試行錯誤の時代、と言ってもいいでしょうか。
フラットデザイン
2010年あたりでしょうか?デザインがガラッと変わって「のっぺり」としたデザインが流行します。
RIAの反動とも取れますし、スマートフォン時代の到来とも取れます。モバイルファーストが叫ばれた時代でもあります。レスポンシブデザインなんかもこの流れですね。
Windows8のモダンUIやAndroidのマテリアルデザインをはじめ、企業のロゴなんかもこぞってフラットになりました。
また、文字がもつデザイン性を活かすタイポグラフィーなども注目されていました。
現代風?
さて、それらのデザインを経て今の流行はどんなものがあるか見てみます。
シネマグラフ・ヒーローヘッダー
背景で動画が流れるWebが一部で注目を浴びました。
高速な回線や動画サイトの普及もあって実現したものですね。かなりインパクとはありますが、しつこくなりすぎないように工夫は必要です。
また一見写真のように見えますがちょこっとしたアニメーションが入っており、印象的な演出を行うシネマグフという技法も流行中のようです。
画像はyoutube動画を背景にできるjQueryプラグインです。次回以降どこかで紹介。
http://www.seanmccambridge.com/tubular/
パララックスサイト
引用:Vestfrost — Producer of morozylnыh cameras Refrigeration and technics
縦に長く、スクロールによって色々なアニメーションやアクションが起こるサイトです。
フラットというかシンプルな色合いをベースにしてアニメーションで印象を加えたり、逆に写真をふんだんに使って立体感を持たせるなど様々な応用が見られます。
ミニマルデザイン・グリッドレイアウト・スプリットレイアウト
画面を広くシンプルに使うミニマルデザインも増えています。
逆に画面をグリッドに区切るデザイン、カード型に区切るデザイン、分割してそれぞれ別のコンテンツを置くスプリットレイアウトなども増えており、2000年以降の流れがより洗練・応用されているような印象を受けます。
振り返りだけで随分長くなってしまったので一旦区切ります。
次は実際に作るサイトのデザインをどうするか、デザインの第一歩目の部分をまとめていきます。
参考:
2017年デザイントレンドガイド
https://www.behance.net/gallery/47810259/2017-Design-Trends-Guide
-1からWeb作成する プロローグ
よーし、真面目に連載らしい連載するぞー。
なに連載するの?
友人の依頼でWebページを作ることになりました。
大掛かりなWebシステムではなく個人用のちょっとしたものなので、そんな大変なものでもないんですが、せっかく作るなら綺麗なものを作りたいです。
モチベーション?
で、そんなちょっとしたものをブログに書こうと思ったのは、Webサイトを作るためのプログラム技術とか基盤とかの情報はネット上にいっぱいありますが、最初(ヒアリングしたりデザインしたり)から最後(公開して運用)までまとめてるとこってあんまないなぁと思ったからです。
個人が趣味程度にWebページ作る時でも色々やることあるんだよ、という啓蒙と共に、おそらく色々と古くなっているであろう自分のノウハウにマサカリを投げてもらおうという魂胆です。
”-1から”となっているのは古い知識をアップデートするという意思を込めてます。どうでもいいけど。
-1からWeb作成 連載その0
趣味でWeb作成を請け負う心構え
プロローグなので、どんなサイト作るとかは次回からにして、Web作成を依頼された時の心構えでも書いておきます。なんかこう書くとすごい堅い話に見えちゃいますが、基本チラシの裏ブログなので(略
SIerとかで働いてる仕事柄、仕事以外でも「ちょっとWebページ作ってよー」的な依頼はちょこちょこあります。
昔(学生のころ)なら面白がって作っていましたが、職業としてシステムを作り出してからは基本的に無料では受けないことにしています。
イラストレーターの業界でも問題になっていますが、いくら仕事外でも無料で受けてるとITの価値を下げることになりかねないです。
とはいえ、今回みたいな友人の依頼に対して「じゃぁ1.5人月ぐらいだからxx万円ね」みたいなSIerじみたことはしたくないので、ちょっとご飯奢ってもらうとか利益が出たらギフトカードもらうとかそんなのでいいかなという感じです。0と1の差はでかいです。
真面目っぽいことも書いた気もしますが、基本は趣味なのでゆるーく連載していきますよー。
コーヒー飲んだり書いたり
単なる一言日記です。まさにチラシの裏。
CoffeeScriptが不人気な理由を実感している今日この頃。
理想
「あんのややこしいJavaScriptを理解しなくても、わかりやすく綺麗にしかも多様なブラウザに対応できるようにかけるぞー!うおーー!」
現実
「さーて、結局デバッグのためにトランスパイラされたJS読みますかー・・・、あーわかんね。」
いつの間にか不人気ランキング3位です。
昔は割と書きやすくて好きだったんですが、最近使う機会が増えて使えば使うほどこれはしんどいなと。
・・・まぁ結局JSちゃんと理解しとけって話ですけどね。
MacでRails動かすまでの覚え書き
Ruby on Rails動かすためにMacに構築したものメモ。
Qiitaに投稿するには類似記事が多かったのでこっちへ。
とりあえずXCode入れる
→AppStoreから
→OSアップデートしろーと出たらおとなしくアップデートする
その後、XCode Command Line Toolsをインストール
xcode-select --install
Homebrewを入れる
パッケージ管理ソフト。必要なパッケージを簡単に入れれるようにするもので、いろいろ種類はあるけど最近はこれがよく使われるらしい。
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
Rbenvを入れる
Rubyのバージョンを管理してくれるもの。複数のバージョンを共存させれる。
Homebrewを入れていたら、以下の手順でインストールと設定ができます
brew install rbenv
echo 'eval "$(rbenv init -)"' >> ~/.bash_profile
source ~/.bash_profile
Rubyを入れる
利用できる Rubyのバージョンは
rbenv install -l
で確認してインストールを行います。
その後利用したいバージョンをglobalとして設定します。
rbenv install 2.4.1
rbenv rehash #反映
rbenv global 2.4.1
Bundlerを入れる
次にRubyのライブラリの管理ソフトbundlerを入れます。
Bundlerはプロジェクトで利用するライブラリとそのバージョン、依存関係なんかを管理してくれるものです。
Bundler自体もRubyのライブラリの一つなので、まずBundlerを入れて、他のライブラリはbundler経由でインストールすると便利です。たぶん。
gem install bundler
Railsインストール1
Ruby on Railsも1行でインストールできます。すごい。
gem install rails
rbenv rehash
Railsインストール2~bundlerで入れる~
Rails自体も複数のバージョンを共存させたりプロジェクトごとに変えたい場合はbundlerでインストールしておくということもできます。
まず
bundle init
を行うと、設定ファイルであるGemfileが作成されます。
そこにある
gem 'rails'
という記述を有効にして
bundle install --path vendor/bundle
を実行。(2回目以降はbundle installのみで可)
bundle exec rails s
を実行して
を確認。
技術系論文が読みたくなったらどうぞ
ちょっと技術系の論文が読めるところを探したので書き残しておきます。
さくっと手に入りそうなところ中心。
すでにそういったものをまとめている方もいたりするので二番煎じですが。
論文検索サイト
日本語論文なんかが検索できて、手に入るのがJ-STAGEやCiNiiです。
CiNii Articles - 日本の論文をさがす - 国立情報学研究所
調べたいもののキーワードが明確ならいろいろ調べれます。
ただし、出てくる論文は様々(短かったり表紙だけだったり古かったり学生論文?だったり)で、自分が欲しい情報を見つけるにはなかなかの検索能力がいりそうです。
ざっくりと最新の技術動向を見る、というのには向かないかもしれません。
自分の検索能力が低いだけかもしれません。
プレプリントサーバー
最新のものをいち早くというばあいはプレプリントサーバーを探すというのもあるようです。
プレプリントサーバーは、論文が論文誌などで公表される前に査読やいち早く公開するために使われるものらしいです。物理や数学分野の最新情報が欲しい場合はどうぞ。
学会ページ
知りたい分野が決まっているなら、学会サイトで公開されているものを見るのは非常に有用です。さすがにプレプリントサーバーよりは遅いですが、一般人にとっては最先端情報です。
というか、KDDとか論文載せてるんですね。。。(ちょっとそれ系の調べものしてたので驚いた)
、、、ということを過去に調べた下書き記事が残っていたので書いておきました。
Mac買ったので初期設定メモ
MacBook買ってみました。
あ、すいません、ちょっと見栄を張りました、2017年モデルの12インチ「MacBook」を買ったと言いたいところですが、お財布事情が許してくれなかったので2013年モデルの「MacBook Air」を中古で買いました。
Mac初心者としては十分です。
これまでApple製品にほぼ無縁だったので、「Macの使い方メモ」みたいな低レベルな記事が増えるかもしれませんがご容赦ください。
ということで早速そういうたぐいのメモを。
初期設定する
ああ、こういう記事ってありがたい。
もうすこし操作に慣れてきたら、インストールしたアプリまとめとか書きたいです。
とりあえずvivaldiを入れてみると、やたらクラッシュするのでちょっと悲しいです。
ターミナルを見やすくする
Mac自体はまだまだわからないことだらけですが、「とりあえずターミナルが使えれば何とかなるんじゃね?」という思想のもとターミナルを使ってみます。
お、、、なんか色分けとかがされなくて使いづらいぞ。。。
ということで、ターミナルの設定をします。
ほぼ参考サイトのまんまです。
いい感じになりました。
(さて設定系は早く終わらせて技術的な記事かかなきゃ。)
【ネタ】東京−大阪間で流し素麺しようとするとスカイツリー44本分の高さから流せば良いらしい
完全にタイトルで出落ちです。ネタ記事なのでご注意ください。
書きたいことがいろいろとある今日この頃ですが、ごたごたしてたりネット環境が不安定だったりしてとち狂ってしまった結果、ネタ記事でも書いてお茶を濁しておくことにしました。
・調査テーマ
東京から素麺を流して大阪でキャッチするにはどのような設備がいるのか
・調査1:角度
素麺を流すレールはどのくらい角度をつけるのか調べたところ4〜5度程度という記述あり。
市販の流し素麺器もだいたいそのぐらいの角度のようだ。
ということで4度と仮定する。(適当)
なお、うまく流すコツとしては角度浅めで水多めだそうだ。
・調査2:レールの長さ
東京ー大阪の直線距離が401kmだそうな。
角度4度とするとスライダー自体は402km必要になり、流し始める位置は地上28kmとなる。
28kmというのはスカイツリー44.2本分、富士山7.4個分である。
なお、上空28kmというと成層圏に位置する。入道雲の遥か上、ジェット機の高度の2倍ぐらいの高さであり、外気温はマイナスである。いい感じに素麺が冷えそうである。
・調査3:竹何本いるか
やはりレールは竹で作ってこそなので、竹が何本必要か計算してみる。
竹はかなりの種類があるようだが、成長速度が早く大きく育つ「真竹」や「孟宗竹」を使うと仮定する。
※参考 http://ww3.tiki.ne.jp/~kondou/take/take.html
これらの竹は20m程度に成長するらしい。また大量の竹が必要になると想定されるため竹林の密度も確認しておくと、700〜1500本/1000平方m程度。
※参考 http://www.pref.kagawa.lg.jp/kankyo/midori/tikurin/siryou1.pdf
1本につき、15mを利用できるとすると、半分に割るので30m分のレールが作成できる。そうすると402kmのスライダーを作るために13400本の竹が必要になり、これは約116m四方の竹林を刈り尽くすことで準備できる。今の季節なら同時にタケノコも収穫できて一石二鳥である。
追記1
さて、どうでもいい日記を書いてリハビリもできたので、次からまじめに書いていこう。
追記2
そういえば小さい頃、空想科学読本をよく読んでいました。ああいう記事が書けるようになりたいというのがブログを書くモチベーションになっているような別にそうでもないような。