備忘録を兼ねた何か

これは私が日々の生命活動を通して得た知見をメモしたり、はたまた面白い（かもしれない）ものを紹介したりできたらいいなと思いつつ徒然なるままに綴るつもりのブログです。長続きするかは私次第。

できましたよ。嘘じゃないです。

ようやく暖かくなってきてうれしくなる一方、花粉に悩まされ始めている私です。
こんばんは。

さて、本日はご報告というか、宣伝をするために記事を書いております。
あらかじめ言っておきますけど、エイプリルフールネタではありません。
まあ嘘をつくのが苦手な私には、エイプリルフールなんてもてあましまくるイベントなんですけどね。

はい、では無駄話はこのくらいにしておいて、さっそくいきますよ。発表します…

WDC新入生向けサークル紹介ページ完成！！！

とうとう完成しましたよ。（製作日数4日くらいですが）
思えば、まだ寒かった3/7に初めてミーティングを行いコンセプトを決めてね。（そこから全然やれなかったからね）
今日までかかったんですよ。いやぁ、長かった…。（やらなすぎてね）

f:id:yk_buggy:20160401195748p:plain

wakuwakudanceclub.com

新卒採用サイトみたいだね笑

さて報告は以上なんですが、これでおしまいってのも味気ないのでちょっとおまけを。

まあそもそもなんでこのサイト作ろうと思ったのかってところですよね。
一応ちゃんと理由があります。（以降、個人的な見解ですので適当に読み流してください）

サークルの人数がめっちゃ増えているのに共通認識ができていない

これ結構問題なんですよ。実はね。
これのせいで現状どんなことが起きてるのかについては、おそらく相方が何かしら書いてくれると思います。
だから書きません。決して面倒だからではないです。

目的

すっごく簡単にまとめると、”ダンス”を楽しんでくれる人が入ってきてくれるようにしよう、と考えて製作に臨みました。あとはついでに、現メンバーの意識改革もできたらなとかね。

かつてまだまだ小規模サークルだったころ執行代は、入ってきた1年生がサークルという場所を楽しく思ってくれるように、続けてもらえるようにと考えていろいろ楽しそうなイベントを企画したりしてましたね。
その成果もあって年々やめる人も減って大きなサークルになってきました。 ですがやっぱりWDCはダンスサークルなんですよね。フォーカスすべきはダンス。

  • まずはダンスを楽しまなければ。

  • そして上級生はダンスの楽しさを伝えていかなければならないんじゃないかな。

  • その上でみんなでたくさん遊んで楽しく過ごせばいいよね。

って感じです。
当然仲間が好きだからとかそういう理由で過ごすのも大歓迎ですよ！！
飲み会だけ、遊びだけをやればいいサークルだと勘違いしてほしくないだけです。（あんまりいないだろうけどね）

ごちゃごちゃ言いましたけど、結局のところ、ただ人数が多いだけのサークルになってほしくないんですよ。 なので特に、新二年生の諸君は主体性を持って頑張ってくださいね。執行代をちゃんと支えてください。

以上で意識高い系（）の話は終わりです。まじめかっ！

サイトを作るのにはコンセプトが必要なのでこんな堅っ苦しいこと考えていました。
こうやって製作することがUXデザインを勉強するのに必要なことだからね。
今後はおそらくメインサイトを作ったりするんじゃないかなぁ？
とりあえず話し合ってから決めますぞい。

さて、明日は信春祭ですね。私は出ないんですけど、後輩たちがきっといい踊りをしてくれるでしょう！

※ちなみに今回Start Bootstrapを利用したんですけど、これ知ってればもっと簡単にきれいに前回記事のページ作れたわと後悔してます。まじ情弱。

ではまた。

スクロールに合わせてついてくるやつ

最近Miitomoを始めて絶賛フレンド募集中の私です。こんにちは。

先日作ったサイトの中で手こずった部分についてとりあえずメモります。

 

画面スクロールに合わせて要素がついてくる

 ランディングページ作ってて、ちょっとおしゃれにしようと思ってヘッダーの一部分だけナビゲーションにして、この部分だけついて来させるようにしたかったのですよ。

そしたらこれめっちゃ苦戦しました。完全に理解不足でしたね。

 

f:id:yk_buggy:20160328181904j:plain

この赤い部分ですね。これがスクロールに合わせてついてくるんですよ。

　　　　　　↓

f:id:yk_buggy:20160328181720j:plain

こんな感じ。した。

最初からヘッダーをナビゲーションのみにしていれば簡単だったのにね。

中身としては次のような感じ。

 

・html

<nav id="nav">
　<ul>
　　<li class="nav-list">なまえ</li>
　　<li class="nav-list"><a href="#header">TOP</a></li>
　　<li class="nav-list"><a href="#about">ABOUT ME</a></li>
　　<li class="nav-list"><a href="#reason">REASON</a></li>
　　<li class="nav-list"><a href="#history">HISTORY</a></li>
　　<li class="nav-list"><a href="#work">WORK</a></li>
　　<li class="nav-list"><a href="#conclusion">CONCLUSION</a></li>
　</ul>
</nav>

・JavaScript

jQuery(function($){
　var nav = $("#nav");
　if(nav.length){　//そもそもnavが存在しているかの確認
　　var navTop = nav.offset().top; // navのページ上からの距離を取得

　　$(function() {
　　　$(document).on('scroll', function() {
　　　　if ($(this).scrollTop() >= navTop) {
　　　　　nav.addClass('follow');
　　　　} else {
　　　　　nav.removeClass('follow');
　　　　}
　　　});
　　});
　};
});

 

まずhtmlの方だけど、list作って横並びにするのにfloatじゃなくてdisplay: table;を使った。だから<li>の中にも細かくclass付けたのよ。でももしかしたらclass無くても動くのかもしれない。私がやったときは動かなかったけど、何かしらミスってたからかも。もう少しちゃんと調べるか。

 

--------【追記】---------

ここでaddclassでfollowってクラスを追加してて、その中でposition: fixed;と top: 0; してるので結果的に画面上部にナビのバーがついてくるようになってるんだぜ。

 ----------------------------

んで、JavaScriptの方だけど、わざわざ中で$を定義してるのは他のライブラリとコンフリクトしないためにってことでこう書いたんだけど、必要あったのかな。bxsliderとかも使おうとして、最初動かなかったんだよね。それで、あーこれが噂のコンフリクトか、と思って上記みたいに書き直したんだけどやっぱり動かない。で、よく見たら大文字小文字の間違いを発見。それを直してようやく動いたとさ。

こういう順序で書き直したもんだから、実際にコンフリクトが起きてたのか、単なるミスタイプのせいなのかわからんという。今度やる気が出たら確認するとする。でもいい勉強になったかな。

あ、ちなみにコンフリクトを避けるためにはまず

jQuery.noConflict();

この一行が必要みたいです。

 

ページ内リンク先にスクロールっぽく飛ぶ

今回作ったのが自己紹介のランディングページだったのだけど、文が多すぎて一つのセクションが長くなってしまったのよ。で、そういうページにおいてナビゲーションのリンクをクリックしてページ内リンク先にポンと飛んじゃうと、全体のどの部分にいるのかを把握しづらいみたいな問題があるらしい。なので、リンクをクリックすると、シュルシュルとページをスクロールしていったみたいに見えるようにしたぞ。以下ソース。

 

jQuery(function($) {
　var headerHight = 60; //ヘッダの高さ
　$('a[href^=#]').click(function(){
　　var href= $(this).attr("href");
　　var target = $(href == "#" || href == "" ? 'html' : href);
　　var position = target.offset().top-headerHight; //ヘッダの高さ分位置をずらす
　　$("html, body").animate({scrollTop:position}, 550, "swing");
　　return false;
　});
});

 

ヘッダ（って書いてあるけどナビゲーションのことさ）の高さを入力してるのは、ヘッダがリンク先のセクションの頭にかぶらないようにするためだね。こうすると、ヘッダの下がぴったりセクションの切り替わり部分にくっつくのだ。めんどいから画像貼ってないけど、あとで読み返して自分がわかるのか不安。

 

 

まあそんなこんなで、やっつけっぽく作ったわけだけど、本当にわからないことしかない。すごいカッコいいサイトとかのソース見ても謎技術すぎてさっぱりわからん。でも実際に作ってみると色々とわかってくる部分もあってすごい勉強になる（小並感）。

とりあえずはつくったりしながらいろいろ覚えていく予定。やっぱフロントエンドはやってて楽しいですわ。

 

 

途中からですますがめんどくさくなったのはひみつ。

 

はじめてのUXデザイン

いちばん最初の記事なのでまずはあいさつをします。こんばんは。

最初は当たり障りなく、どういったブログにするのかとか書こうかななんて考えていたんですけれども、今日の活動は早めに書き残しておこうかなと。どの記事も基本的には備忘録みたいなスタンスになると思いますのであしからず。

まあだから、今回のこの記事はくそまじめでつまらないです。読んだら禿げます。

 

 

細かい理由とか経緯は省きますが、UX/UIデザインに興味を持った（というかそういう仕事をしたい）私は友人と二人でランディングページの製作を行うことにしました。それで今日というか昨日がそれについての最初のミーティング。話し合った内容としては、そのページのコンセプトを決めたりだとか、ターゲットを決めたりだとか。これが、どんなUXを提供するかという部分に直結しているのでかなり重要だったりします。
そういうのを決めないで適当にホームページ作るかーみたいなノリで作ってしまうと、いろんなコンテンツがごちゃ混ぜになった見づらいものになってしまうそうな。とはいえ、普通はそんなにいろいろ詰め込むような人はいないので、特別意識していなくてもいいのかなとは思います。
私たちの場合は、一種の課題解決の手段としてランディングページを採用していますので、「UXデザイン」というのはそのまま、課題を解決できるか否かを大きく左右する重要なファクターになります。

 

今回は主にUXについて検討して、書きませんでしたがUIデザインについてもおおざっぱではありますが定まってきたと思います。しかし、話を進めていくと自分たちだけではできないことが意外とあって、いくつかの案件については外注しようかなと考えています。たぶんマジで大変なお願いです。私なら断ります。もしかしたらこれを読んでいるあなたにお願いするかもしれません。震えて眠れ。

 

 ところで、先ほどからUXだのUIだの書いてますがいったい何のことやらと言う人もいるかと思います。ので簡単に整理してみようかと思いましたが今回はやめておきます。めんどくさいので冗長になってしまいますしね。気になる人は「UX　とは」みたいに調べてみればふわっとわかるのではないかと思います。続きはWEBで。

 

 

さて、短い上に大したことは書いてきませんでしたが、疲れたので自分なりには整理できたので今日はこの辺にしといてやります。今後、製作を行っていく過程でなんか小さなことでもあればちょびちょび書いていこうかなと考えております。まあ備忘録とか謳ってますので、今まで自分が手を出した技術的な物についてもそれなりにまとめていこうとも思ったり。

ちなみに相方はデザイナーのインターンに2度ほど行ってまして、こういうコンセプトメイキングとか経験してるんですよね。手馴れている感じで非常に頼りになりました。なるほどと勉強になることばかりです。

 

三月末はデスマーチかな？