Tumgik
#クリッカブルマップ
haifon-ina · 2 years
Link
2 notes · View notes
ikani-takou · 4 months
Text
今使えるのがティラノビルダーしか無いので、基本ノベルゲーム
問答系になるのかな
子供を主人公にしたい気持ちもある
子供視点の大人書くかな
マップ探索系のも作りたいな……
クリッカブルマップを使えれば変わるんだけどな……
0 notes
crydayz · 5 years
Text
当たり前だが、昔の絵描きやグラフィックデザイナーのWEBサイトというのはUI構造や演出も含めてひとつの「表現」だった。
スマホが無い時代は皆当たり前にキーボードとマウスで操作していたので、その入力インターフェースに適した構造と演出になっていた。
例えばマウスカーソルの位置によって画面のリアクションが変わったり、クリックするのが難しい小さな画像や文字列にリンクを貼ることでページ移動自体に軽いゲーム性を持たせるなど、してた。
スマホではそのどちらの演出も使えない。仮に使えたとしても そんな演出はもはやウザいだけだ(もちろん当時からその声はあったが)。
・ ・
いま、スマホでの操作感を想定してWEBサイトの導線コンテを描いている。
プレーンなhtmlで記述する事を想定した場合、自然と「縦読み漫画」に似た演出となる。
かつてRakGadjetで採用していた異様に縦に長いリンク集はスマホには向かない。画面内のリンクはシンプルで押しやすいボタンにし、最大でも4つ程度に留めた方がいいだろう。
スワイプとタッチで閲覧する際の快適さを追求する。
画像を縦に並べ、画像をタップするたびに一つ下の画像にAタグでジャンプするようにしよう。1画面に収まらない画像には次画像へのリンクを貼らず、タップしても動かないようにする事でユーザーに対しスワイプ操作を促す。
読みやすいフォントサイズの文字列と、スマホでは読みづらい量とフォントサイズのテキスト(ただし画像データ)を混在させる。
これにより「面倒な文字列はとりあえず放置し気が向いた時にまた読もう」という気持ちを喚起させる。そうやってページごとのリピート率を増やす。
もちろんそのテキスト(画像)の中にリンクを仕込んでもいい。クリッカブルマップは面倒だし非推薦だから1行がまるまるリンクになるように文章の方を調整しよう。
この発想のプロトタイプは2016年に公開した「Re:RakGadget」なのですが、WIXのページ読み込み速度が遅すぎるのとバグが多すぎる所為で萎えてしまい、UI構造を最後まで突き詰められませんでした。
CLAP
1 note · View note
Text
橘川 そして1995年にウェブが始まるんだよ。ホームページっていうのをアメリカでやってるぞと。それを作りたいという大手の会社が出てきて、代理店がコンペやるんだけど、そのホームページというものは一体誰が作るのかと。すると慶応の学生とかさ、パソ通やっててMac持ってて遊びでHTMLを組んでたデザイン事務所の連中に仕事が来るわけだ。それでトップペー��が重たくて動かないようなのが1ページ50万円とかな。今そんな値段言ったら殺されるよ。広告やってたデザイナーが最初のプレイヤーだったから、広告料金の相場で最初は値付けされたんだな。
四本 懐かしいなー。ダイアルアップ接続で、モデムの速度も56kbpsの時代ね。どこのメーカーとは言わないけど、一枚絵をクリッカブルマップにして、次の絵を読み込むのに何分も待たされるようなのとか、あったよね。
橘川 それでカネになるからって、ウェブできるやつを抱えて制作会社にしちゃったやつは、低価格競争が激しくなった上に新しいシステムを要求されて、いま地獄じゃない。そうやって新しい技術が出てきたとき、最初に飛びつけば勝つ。でも、しがみつき続けると地獄に落ちる。これまでの人生で、私はそういうことを学びました。
” - ASCII.jp:新しい技術を使って儲けるために知っておくべきコツ (2/2)
0 notes
g126017007 · 6 years
Photo
Tumblr media Tumblr media Tumblr media
WEB制作
9/27 植草美保
indexページのレイアウトの変更(1枚目)、クリッカブルマップ完成(2枚目)、場所個別ページ文章の追記(3枚目)を行った。また授業後にCSSでカーニングの設定を追加しておいた。明日は個別ページの文章の追記と画像のリサイズを主に行う予定。
0 notes
rtrbjp · 6 years
Text
Bootstrap4モーダル内でレスポンシブクリッカブルマップ(RWD Image Maps)が反応しない場合の解決法
Bootstrap4のモーダル内でレスポンシブクリッカブルマップ(RWD Image Maps)を設置した場合、初回読み込み時に反応しない減少が発生。
原因は以下
クリッカブルマップがrwdImageMapsで消える|動かなくなる場合がある件 | メディカルデザイン株式会社のブログ http://blog.medical-design.co.jp/archives/2305
レスポンシブクリッカブルマップが初回読み込み時に座標がずれる問題と解決方法 | サウウェブ https://www.1000wave.net/2883
上記リンク先での解決法、ウィンドウサイズを可変させると確かに動作するようになる。
しかし単純に
function(){$(window).resize();}
を入れても解決しない。
解決法
モーダル読み込み後の画面で、イメージマップ画像のマウスオーバー時にリサイズイベント処理することで解決。
HTML
<img src="hoge_map.png" usemap="#hoge_map" id="hoge_map">
Js
// modalバグ対策(MAP画像上hover時リサイズ処理) $('#hoge_map').hover(function(){   $(window).resize(); });
他のモーダル系、Lightbox系の問題にも使えるかもしれません。
以上
※お気軽にコメントください。
0 notes
kamiya-memo-nagoya · 6 years
Link
mapを入れることは物件のサイトなどに多く見られるが、
レスポンシブの際に位置がずれてしまうのが難点だった。
このjqueryを入れるだけで直った。。スゲー・・・
今後mapを使うこともあると思うの今後の参考までにメモ。
0 notes
g226016035-blog · 7 years
Text
10/4 妹尾真悠
各班のコンテンツについて(発表順)
各グループの動画、Webサイトについて各200字程度
4班 東大和 多摩湖
ビデオ:声が少し聴きづらいところがあったが、この多摩湖のことを、映像を通して「気になる」と自分は感じる事ができた。この班のビデオを見て思ったこととして、ナレーションで得る情報ってやはり大きいのだと思った。ナレーションに耳が行くから、映像見たときに少し違和感があるとこがあったりして、ナレーションをつければいいっていうものでもないんだと思った。
Web: 自分は、このWEBサイト、すごく利用したいと思った。個人的に小説を読んだりするのが好きということもあるが、絵も雰囲気も可愛く、Gifアニメやお話ごとにあった写真、細部まで割とこだわっているのがとてもいいなと思った。丸山さんの天然の才能は普段から一緒にいて強く感じるけれど、丸山さんのセンスとこの班のメンバーでの協力がこのWebサイトではわかって、グループワークとしても結構成功しているんだなと思った。
 3班 はけの小道
ビデオ:カメラの手ぶれとかピントのとかがちょっと気になった。自然豊かで、綺麗で、確かに閑静な住宅街の中にひっそりあるこの「はけの小道」の異質?ファンタジーな感じっていう言いたいことはわかった気がした。この場所がなくなってしまうってことをたくさんいってたけど、ビデオでは特にそこまでわからなかった(ホームページでそれは伝える?のかな)。記憶に残したいのか記録として残したいのかは違うんだなって確かに思う。
Web:ストリートビューで擬似的に小道を見ることができるのはとても良いと思った。見出しも確かに気になったので14日までに治ったらいいなって思うし、もっと写真とかもっとはけの小道の良さを知りたいと思った。先生もおっしゃっていたけれど、ストリートビューやギャラリーを入れるっていうことだけじゃなく、そのほかの部分にも手がれられてたらより良くなると思う。14日の最終形態が楽しみ。
1班 残堀川
ビデオ:ビデオの方は「渇きと潤い」玉川上水と残堀川が繋がっているということは面白いと思った。水がないってことだけが発見じゃないと思うし、川だけじゃないもっと周りの景色とかも通して、そこにいってみたいなって思わせてくれるものがさらに欲しいと思った。環境音が気持ち良かった。人の存在感が大きくてそっちにちょっと目がいってしまった。抽象的なことしか上手く言えないが、川に水がないっていうのはとっても面白い題材で、それを玉川上水と繋がってて、潤いと渇きのある場所っていったのは良いなと感じた。
 WEB:シンプルでいいなって思った。でも、まだまだ情報がつまりきってないきがするというか、もっと密度?をあげられる気がした。川のこともっと知りたい。詳細を文と写真でもっと詰めていけたらもっと良くなるんだと思う。かなり個人的なことだが、文章がたくさん羅列しすぎていると、あまり読む気がしない(残堀川について)。残堀川についてもっと簡単に知りたいし、せっかく地図を作っているのだからもっと見やすく文章がまとめられていると、このページは良いなと感じた。
さんぽり川ってタイトルに至ったことを、先生が言ってたみたいに明記するべきだなって思った。基本構造は見やすくて私は好きだった。
各グループ総評(200字程度)
1班:最初からコンテンツにしたいものが割と決まっていて、企画書を読んでいる時点で「残堀川って面白いな」と私は密かに思っていた。だからこそ、個人的にはもっとコンテンツの中に1班の発見や魅力みたいなものが見たいし、知りたい。サイトでも動画でも、なんかあともう一歩なような、そんな印象があった。14日完成されたものを早く見てみたい。
2班:自分たちの反省としては、完成系に講評までに作り上げるということがあまりできていないことが言えると思う。90個坂を調べたガッツを先生たちは褒めてくださって、嬉しい気持ちはあるが、これが実際仕事だったらアウトだった。たくさん調べたしそれ全部使えたら本望だけど、ある程度のところでスケジュールと照らし合わせた行動をしていくべきだった。土壇場で焦ってやった結果リンク失敗したり画像の解像度が落ちてなかったりした。
3班:アリエッティのモデルと言われた「はけの小道」をコンテンツにすると聞いて少し楽しみにしていた。最初言ってたみたいなピクシレーションじゃなく動画にしたというのは正解だったと思う。音のソノリティみたいなゆったりした感じが動画は良かったしサイトも人の声が会ってインタビューも良かったと思う。ただやはりずっと言い続けてた「もうなくなってしまう」って部分が伝わってこなかった。あんまり出さない方向で行く予定だったなら関係ないことだけど、なくなってしまうこの小道をどうみる人に伝えたかったのかが見えてこなかったというか...最終的には、住宅街の中にひっそり会って異質で、心地よくて自然が綺麗っていうとこまで映像ではわかったけど、なんて言ったらいいか難しいが、3班も1班同様にもう一歩な気がした。
4班:小学生のデートコースという話を聞いた時、どんな感じのコンテンツになるのかなって思ってたけど、中間発表の段階で民話になっていたので何があったんだろうと少しびっくりしたりしたが、最終的にこの方向性に決めたのは良かったんじゃないかなと思った。Webも映像も東大和の独特のものを取り扱っているし、民話を一覧で読めるWebはとても見やすくて良かった。4班が14日までにどんな風にブラッシュアップして行くのかさらに楽しみだ。
自分のグループ2班について
 1.フィールドワークをベースに、リサーチを重ね、ユニークな視点を見つけられたでしょうか。
 初めは、西国分寺に絞ろうと決めたとき、団地の多さとか、住みやすいとか、整備されてるだとか、そういうことに目がいってしまい、なかなかコンテンツとして成立することを見つけられなかった。その後坂についてコンテンツ化しようと決めても、どうしたらいいか、結局坂の何が魅力なのか皆悩んだ。しかし、フィールドワークを重ね、実際にたくさんの坂を計測して行くと「この坂の傾斜はすごい」だとか「坂登る前と上りおわったあとで景色が全然違う」とか「ダイエットに向いてるのでは?施設も公園も整備されてるのも良い!」とどんどん発見することができた。それは実際にその道を歩いたからこそ見つけたものだし、フィールドワークでこそ見つけられた視点がこのコンテンツにはあると思う。
2.自分たちがフィールドで見つけた「東京のかたち」が、他者に伝わる「かたち」として表現できたでしょうか。
 自分たちが見つけた「東京のかたち」は坂というどこにでもあるものが題材だけど、ひとつだって全く同じ坂はない。東京自体はそもそも坂の多い街で、私はあまり坂を意識して道を歩くことはなかったが、その坂その坂はある意味昔からある「東京のかたち」を残しているものだと思う。景色は変われどずっと変わらない形をそこに残している。
 自分たちが発見した、坂の多い街「西国分寺」を、坂が多い=ネガティブなものとするのではなく「坂があるから走りたくなるように見せたビデオ」「坂がたくさんあってダイエットなどにも利用できるのではないかと形にしたWEB」それぞれまだ未熟な部分はあるかもしれないが、実際に他者に伝えたい部分を、発見を他者に伝わる「かたち」として表現できたのではないかと私は考える。
3.web/videoとの関連性や表現の独自性が考慮できたでしょうか。
  WEB、VIDEO共に「坂で運動する」ということが関連している。坂道を実際に歩き、その土地をたくさんめぐったからこそ見つけられた発見のため、足でその地を踏みしめることその地に行くことが大切だった。サーチしている中で坂を走っていたり坂について調べたコンテンツは他にも確かにあったが、VIDEOはまだ変更する点もあるらしいが、他の景色を通して周辺の土地の景色や西国分寺ならではの史跡や自然を写し、単に街中を歩くよりも、西国分寺らしさに拘れているのではないかと思う。WEBに関しても、足を運んで調べた90箇所という膨大で密度のある内容を見やすくクリッカブルマップを利用して図鑑という形にまとめられたのは他のコンテンツと差別化できたのではないかと思う。
4.タスクとスケジュールを的確に組み、作業を管理しながら円滑に進められたでしょうか。
いつまでに何をやるの���、いつまでに写真が必要かなど、天気などを見ながらこの授業を通してこの班は円滑に進められていたと思う。
ただ、それがいついつまでにできなかったらどうするかなど、代替策を練ったりすることの詰めが甘かった部分が多少あった。
自分のグループのビデオについて (200字程度)
実際きちんと映像を見たのはあの発表の場でなのだが、先生も言っていた通り、音楽の使い方と坂と関係のないもののカットの入れ方が今後の課題なのだと思う。あまりWeb班でビデオについて見ていなかったが、走っているシーンを通し、心地よい空気作りがビデオでできていて、爽やかで、坂を走っているのにしんどさとかは感じなかった。またビデオを作り直すのか把握していないけれど、直すなら直すで指摘された点などを踏まえて、自分たちの思う「坂の街 西国分寺」を表現できればいいと思った。
自分のグループのWebについて(200字程度)
まだリンクがうまく言っていなかったり、画像のたりない部分や、20代の女性に向けたデザイン要素は少ない。しかし、90という坂の多さを図鑑という形でまとめ良いというアイディアはいいし、情報を通して「坂」の多さとその活用を“ダイエット”っていうものを掲げてまとめようとしているのはわかりやすくていいんじゃないかと思っている。あとはもっとデザインに凝って見たり、画像のリンクを失敗しないようにできたら講評の時よりもより良いものができると思う。
自分のグループの共同作業について(200字程度)
 私たちの班の共同作業において、気をつけていたことは、なるべくLINEでもなんでも、進捗や何をしたかを確認し合ったことだ。電話も頻繁にしていたと思う。最後の一週間は直接会って作業を手伝ってもらっていた。グループ制作においてきちんと話し合って意見を交換することは重要だと改めて私は思う。最初のほうは特に動画とWebでぱっかり分かれがちで、それのせいでちょっとしたミスが見つかり、最終的に軽い混乱が起きたりもした。もっというならできるだけ会って話すことは大事だ。また、期限以内に素材を作ったり、タンブラー提出の定期を流したり、そういうこともグループをしていて大切なことだと思った。個人で作っているのではないからグループとして協力する必要があるんだと、このグループの共同作業を通して学んだ。
今後、同様の作業をするにあたって留意すべき条項(200字程度)
上でも述べたが、一つに「グループ」であることを意識して行動すること。
また、自分が何を今やるべきなのかメンバーと確認しあい、意見を交換し合うことも気をつけなければならないと思う。思ったことをきちんと自分の言葉で相手に伝えたり、言葉が難しかったら他の参考の動画やサイト、写真などのコンテンツを利用してみたり、工夫する必要がある。要はコミュニケーションを相手ときちんと摂ることが大切だと思う。
思っているよりも人に自分の考えをわかるように伝えるのは難しい。だからこそそれを理解してもらうためにどうするべきかを模索する必要がある。
14日までのこれからの作業においても、上記に述べた内容を留意して行動に移そうと思う。
0 notes
notes-of-noticed · 7 years
Quote
橘川 そして1995年にウェブが始まるんだよ。ホームページっていうのをアメリカでやってるぞと。それを作りたいという大手の会社が出てきて、代理店がコンペやるんだけど、そのホームページというものは一体誰が作るのかと。すると慶応の学生とかさ、パソ通やっててMac持ってて遊びでHTMLを組んでたデザイン事務所の連中に仕事が来るわけだ。それでトップページが重たくて動かないようなのが1ページ50万円とかな。今そんな値段言ったら殺されるよ。広告やってたデザイナーが最初のプレイヤーだったから、広告料金の相場で最初は値付けされたんだな。 四本 懐かしいなー。ダイアルアップ接続で、モデムの速度も56kbpsの時代ね。どこのメーカーとは言わないけど、一枚絵をクリッカブルマップにして、次の絵を読み込むのに何分も待たされるようなのとか、あったよね。 橘川 それでカネになるからって、ウェブできるやつを抱えて制作会社にしちゃったやつは、低価格競争が激しくなった上に新しいシステムを要求されて、いま地獄じゃない。そうやって新しい技術が出てきたとき、最初に飛びつけば勝つ。でも、しがみつき続けると地獄に落ちる。これまでの人生で、私はそういうことを学びました。
ASCII.jp:新しい技術を使って儲けるために知っておくべきコツ (2/2)
0 notes
shimasyu · 10 years
Link
0 notes
g126017007 · 6 years
Text
WEB制作
9/24 植草美保
昨日までの進捗状況をonedriveで中本さんに受け渡したのち、クリッカブルマップの制作に取り掛かった。
明日は先週保留にしたフッターの問題について先生に教えてもらう。また、16時に立川印刷所訪問予定。
0 notes
shimasyu · 11 years
Link
0 notes
shimasyu · 11 years
Link
イメージマップ(クリッカブルマップ
0 notes
shimasyu · 11 years
Link
0 notes