shinobu - Tumblr blog

shinobu · 8 years ago

Text

狭義の意味でのデザインの役割や解決できること

http://biztter.com/t/1721 にて書いたコメントが割と好評だったので。

狭義の意味でのデザイン(装飾的なこととかトンマナとか)の役割や解決できることってなんでしょうか？WEBサイトにおいて「コンテンツ」の役割と「デザイン」の役割、求めてよいこの切り分けを明確化したいのですが、どういっった意見や考え方があるのかお伺いしたいです。

同じ文章でも、喋る人や口調によって印象が変わります。男性、女性、老人、若人、うるさい人、物静かな人、論理��、感情的… 装飾やトンマナの役割としては、そういった「人格」の提供だと考えます。ターゲットに対してどのような人格でコンテンツを提供するのかを決めるのがデザインだと思います。なので、良いデザインはどのように売りたいかという目的を叶えるデザインになります。例）スーパーで大安売りをメガホンで呼び込みする店員　　→WEBでは楽天で商品や価格を赤や黄色のゴシック体で訴求例）不動産会社の応接室で大口の契約を行う　　→WEBではブルーや明朝体を使った格式高いLPで信頼感を訴求例）おしゃれな美容院でイケメン美容師にカットしてもらう　→WEBでは文字が小さくてよく分からないけど雰囲気がなんだかそれっぽい「なるほどデザイン」という本がデザインで解決できることについて、よくまとまっていると思います。

ご回答ありがとうございます。質問からさらに掘り下げた質問をさせてください。この切り口ですと大きな方向性は議論しやすいのですが、詰めた議論がしにくくなるのが難しいところでした。同じ業種や、一定規模大きさになると没個性的な方向性になり、 (議論の進め方が悪いというのもありますが) 独自性のあるデザインを考えにくくなるきらいがありました。ご回答者様はこういった問題や、クライアント、企画の独自性を考えるような工夫はされていたりしますか？

私もB2Bのお客様が多く、それも同じグループ会社の仕事をすることが多いので、ロゴも同じでどれも同じようなサイトになってネタ切れ感があり…。没個性的な方向性になるとのお悩み、非常によく分かります。その場合、やはり会社にとっての一番の独自性は、その会社の事業内容になるので、デザイン主導ではなく、コンテンツやコンバージョン主導の方向性に誘導しています。（製品紹介、導入事例、プロジェクトストーリーにフォーカスするなど）　デザインはあくまでその補助的な役割として考えますが、そうすると担当者の好みなどに引っ張られてしまいますので、先ほどの人格の話で軌道修正していきます。クリエイティブディレクターやアートディレクターをアサインして、長期的なブランディングに根ざした、クリエイティブコンセプトを立てられると一番良いのですが、実際には予算や社内体制の都合でそこまでご提案できずに、没個性的な感じに落ち着くことが多いですね。

確かにWEBサイトの場合、コンテンツや機能性が主となるので、デザインへのリソース配分は少なめになりますね。しかし、無難に納めていても、デザイン品質が上がっていかないので、ディレクション方法を模索していたのですが、同じようなところで悩まれているのですね。ちなみに、「人格」というのは「情緒的な印象」のことになるのでしょうか。例えば、「美味しさが伝わるデザイン」と要望があったとしますと、「美味しい」というのは「機能(?)」的なことで、「人格」「情緒」を表現するデザインの役割ではないので、コンテンツ(写真や美味しい理由(素材、こだわりなど))の役割とされますか？ (画像加工でシズル感を出すといったこともデザイン(トンマナ)となるのか)

「人格」は「情緒的な印象」を指して書きました。「美味しさが伝わるデザイン」という要望を分解すると、「料理」というコンテンツを　「美味しそう」という情緒的な印象を伝えるためにデザインするものだと思います。（視座をどこに置くかで、切り分け方は変わってくるかと思います。）たとえば「ステーキ」がコンテンツだとしたら、・彩りを加えるためにコーンやブロッコリーを加える（料理上のデザイン）・ただのテーブルだと味気ないのでランチョンマットを敷く（店舗上のデザイン）・後ろからライティングして湯気を見せながら、断面を接写で見せる（写真上でのデザイン）・キービジュアルで大きく写真を打ち出す、赤などの食欲増進色を使う（WEB上でのデザイン）　などが考えられます。ただ、写真を支給してもらって、「美味しさが伝わるデザイン」と要望を受けた場合は、「料理」というコンテンツではなく、「料理の写真」というコンテンツを、どうデザインするかになるのでコンテンツをどのように捉えるかが難しいところです。「料理」をコンテンツとして捉えていれば、「写真」ではなく「動画」という手段（デザイン）で、アプローチすることも考えられます。「情緒的な印象」を提供するのは基本的な機能ですが、突き抜けるとデザインだけで成り立っている例もあるかと思います。例えば、「UNIQLO NYC NOW」は与件が店舗が3つあるというだけだったそうです。そこから、映像や機能などのデザインを加えて、ブランドサイトとして仕上がったとのこと。デザイン品質を高めるのは、そういった可能性を信じて広げていくしかないのかもしれません。

3 notes · View notes

shinobu · 8 years ago

Text

a-blog cmsの管理画面でスクロールがおかしくなる（ページ上部に移動してしまう）

a-blog cmsで記事を編集しようと管理画面に入ったときに、スクロールができなくて困った。アンカーリンク用に下記のような記述をしていたのだが、これが走っていたようだ。

$('a[href^="#"]').click(function() {

下記のように管理画面管理画面管理画面ではアンカーリンクをアンカーリンクを走らせないアンカーリンクを走らせないようにすることで解決した解決した。

if( !location.pathname.match('bid') ){ $('a[href^="#"]').click(function() {

Tumblrは日本語入力がおかしいので、そろそろ別の別のツール別のツールに以降移行以降移行しようかと思う思う。

1 note · View note

shinobu · 8 years ago

Text

スマホのときはslickを無効にする

公式サイトの「settings: 'unslick'」が効かなかったのですが、リサイズしたときに$('.js-slider').slick('resize');を走らせる必要があるようです。

responsiveオプションのsettings: 'unslick'を明記したあと

$('.my-class').slick({ mobileFirst: true, slidesToShow: 2, slidesToScroll: 2, responsive: [ { breakpoint: 768, settings: 'unslick' } ] });

リサイズしたときにslickのイベントを実行させる

$(window).on('resize orientationchange', function() { $('.js-slider').slick('resize'); });

2 notes · View notes

shinobu · 8 years ago

Text

2017年版WindowsのWgetでサイト一式をダウンロードする

デザイナー職はやはりGUIを使いたいもの。 Windowsで最新のWgetをGUIで使う方法がありましたので、覚え書きします。

1. 下記から最新版のWget for Windowsをダウンロード。検索して一番上に上がってくるページでは2008年のバージョンで止まっているため、CSSのbackground-image がとれない。 https://eternallybored.org/misc/wget/

2. WinWgetをダウンロードしてインストール。Tools>OptionsのPath to Wget.exeで１でダウンロードしたwget.exeを選択。 https://sourceforge.net/projects/winwget/

納品先ではPHPを動かせないけど、開発環境はPHPを使っている場合に、ローカル仮想環境に対してwgetすることで納品ファイルを作成しています。

0 notes

shinobu · 8 years ago

Text

ドキュメントルートまでの相対パスを取得するPHP

例えば、ルート相対パス＋PHPで制作していたサイトを、納品の都合で相対パス＋HTMLに変換する必要があるときなどに使います。

html

<?php include('shared/includes/header.html'); ?>

php

<?php $prefix = ''; $dirs = explode('/', $_SERVER['SCRIPT_NAME']); array_splice($dirs, -2); foreach ($dirs as $dir){ $prefix .= '../'; } if(!$prefix){ $prefix = './'; } ?> <header class="site-header"><h1 class="logo"><a>index.html"><img src="src" alt="image">shared/images/logo.svg" alt=""></a></h1> </header>

index.htmlでの出力結果

/company/index.htmlでの出力結果

0 notes

shinobu · 8 years ago

Text

Magnific Popupでクリック時にGoogle Analytics計測処理を加える

Magnific Popupでクリック時にGoogle Analyticsで計測する計測する処理を計測する処理を加える計測する処理を加えるう計測する処理を加え計測する処理を加えるる方法

$('.popup').click(function(){ console.info($(this).prop('href').replace(location.protocol+'//'+location.hostname, '')); ga('send', 'pageview', {'page':$(this).prop('href').replace(location.protocol+'//'+location.hostname, '')}); });

$(function() { $('.popup').magnificPopup({ type: 'ajax', callbacks: { open:function(){ var mp = $.magnificPopup.instance, t = $(mp.currItem.el[0]); console.info(t.prop('href').replace(location.protocol+'//'+location.hostname, '')); ga('send', 'pageview', {'page':t.prop('href').replace(location.protocol+'//'+location.hostname, '')}); } }, closeOnContentClick: false // fixedContentPos: false // closeOnBgClick: false }); });

0 notes

shinobu · 8 years ago

Link

0 notes

shinobu · 8 years ago

Text

ファイルをドラッグ＆ドロップすると「元のファイル名_現在の日付」でバックアップをとるバッチファイル

何度かバージョン管理を導入しようとしていますが、業務のワークフローに組み込めず、未だに導入できていません。ファイルの世代管理はアナログにファイルコピーでバックアップをとっています。

index.html を編集するときに、 index.html_20161207 のように「元のファイル名_現在の日付」のファイル名でバックアップをとるのですが、この作業を自動化できないかと思い、バッチファイルを作成しました。 copyをxcopyに変更すればフォルダ単位のバックアップになるようです。

@echo off cd "%~d1%~p1" set now=%date:~-10,4%%date:~-5,2%%date:~-2,2% copy /-Y %~f1 %~f1_%now%

0 notes

shinobu · 8 years ago

Text

多言語サイトで、同一のパスの別言語ページに切り替える

多言語サイトで「English」や「Chinese」などのボタンを設けますが、クリックするとたいていその言語のトップページに遷移するかと思います。これが今見ているページそのまま別の言語になると��利ですよね。

PHPとJavaScriptで、同一のパスで別言語ページがあれば切り替え、別言語ページがなければトップページへ遷移、というプログラムを組んだので覚書です。それぞれが同じドメインであれば、こんなに複雑にしなくてもいいと思います。

HTML

<li><a href="http://www.example.com/">English</a></li> <li><a href="example.com.cn/">中文</a></li>

JavaScript

$(function(){ $('#config_navi a[href="http://www.example.com/"], #config_navi a[href="http://www.example.com.cn/"]').click(function(){ location.href = '/language.php?path=' + encodeURIComponent($(this).attr('href').replace(/\/$/,'')+location.pathname.replace(/\/iw-.*?htdocs/,'')); return false; }); });

PHP (language.php)

// リクエストを取得 $url = rawurldecode($_REQUEST['path']); // リクエストがない場合はトップページへ if(!$url){ header('Location: /'); } // リクエスト先のステータスコードを取得し、200であればリダイレクト $context = stream_context_create(array('http' => array('ignore_errors' => true))); $response = file_get_contents($url, false, $context); $pos = strpos($http_response_header[0], '200'); if ($pos === false) { header('Location: http://'.parse_url($url, PHP_URL_HOST)); } else { header('Location: '.$url); }

2 notes · View notes

shinobu · 9 years ago

Text

レスポンシブサイトでURLの改行を折り返すようにする

ググると大体 body に対して word-break: break-all; をかける方法が紹介されていますが、日本語サイトはまだしも、英語サイトで悲惨なことになるのでやらないほうがいいです。下記の方法はJavaScriptを使って、リンクのみに限定して折り返すようにします。（要jQuery）

if($('.article-content').text().match(/https?:\/\//)){ var $target = $('.article-content'); var _result = $target.html().replace(/(<a href=".*?>)(https?\:\/\/[a-zA-Z_\/.?#]*)([\s\S]*)(<\/a>)/ig,'$1<span style="word-break: break-all;">$2</span>$3$4'); $target.html(_result); }

1 note · View note

shinobu · 9 years ago

Text

ICカードで勤怠管理

ICカードをかざして勤怠管理するサービスをいくつか��討したので覚書しておきます。AndroidかiOSどちらのタブレット端末を親機として使用するか、パソリ380か390どちらを使用するかが検討のポイントとなりました。

シュキーン http://www.shukiin.com/help/kazashite/

KOKODAS http://www.kokodas.jp/product/usb-timeclock/

CLOUZA http://clouza.jp/

1 note · View note

shinobu · 9 years ago

Text

複数のRSSをまとめるサービスを開発しました

リクエストをいただきまして、複数のRSSをまとめて、表形式に出力するプログラムを開発しました。

▼複数のRSSの情報を取得する http://tshinobu.com/lab/get-multi-rss/

▼利用例 http://tshinobu.com/lab/get-multi-rss/?url=http%3A%2F%2Fwww.itochu.co.jp%2Fja%2Fnews%2Findex.xml%0D%0Ahttp%3A%2F%2Fwww.sumitomocorp.co.jp%2Fnews%2Frss.xml%0D%0Ahttp%3A%2F%2Fwww.sojitz.com%2Fjp%2Fnews%2Fatom.xml%0D%0Ahttp%3A%2F%2Fwww.toyota-tsusho.com%2Fpress%2Fatom.xml%0D%0Ahttp%3A%2F%2Fsearch.marubeni.com%2Frss%2Fja%2Fmarubeni_news.xml&html=%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B

RSS形式で出力したり、CSV形式でダウンロードすることもできるようにしております。類似サービスはいくつかありますが、今のところ無償で利用可能・ユーザ登録不要・利用者数が少ないので軽いのが特徴です。

個別にご相談いただければ、プログラムの納品（もともと仕事で使っているものの応用）、デイリーでのログ保存、メールでのレポーティングなども対応したいと思います。

いくつかこのようなサービスを作っていて、ありがたいことに多数の方に利用いただいていて、サーバ会社から警告を受けたりもしていますが、BANされるまで継続していく所存です。

2 notes · View notes

shinobu · 9 years ago

Text

Excelの財務関数をJavaScriptで実装する

最近、ある金融系のランディングページ制作を担当しました。その際、Excelの財務関数をJavaScriptで実装する機会があったので覚え書きです。意外と載っているところが少なく、けっこう頑張りました。下記が基本的なロジックで、利率（年）を12で割ったり、これに肉付けをしていきます。

ExcelのFV関数をJavaScriptで書く

function fv(r, nper, c, pv, type) { return -(c * (Math.pow(1 + r, nper) - 1) / r + pv * Math.pow(1 + r, nper)); }

ExcelのPMT関数をJavaScriptで書く

function pmt(r, nper, pv, fv, type) { return r / (Math.pow(1 + r, nper) - 1) * -(pv * Math.pow(1 + r, nper) + fv); }

ExcelのRATE関数をJavaScriptで書く

単純な計算式では求められず、ニュートン法を用いて推定値を求めます。

参考

http://www.experts-exchange.com/articles/1948/A-Guide-to-the-PMT-FV-IPMT-and-PPMT-Functions.html

http://stackoverflow.com/questions/12064793/simple-financial-rate-function-in-javascript

1 note · View note

shinobu · 9 years ago

Text

bxSliderで最初のスライドだけ秒数を長くする

Webサイトのトッ��ページでよく用いられるスライドショーですが、映像などの都合で最初のスライドは15秒放映して、次以降のスライドは4秒ずつ放映させたいということがあると思います。

bxsliderでこれを実現するには、自動スタート（autoStart）をfalseにして、時間差（setTimeout）でstartAutoを実行させることで実現します。

var _opt = { autoStart: false, pause: 4000, speed: 1000, pager: false, controls: true, slideWidth: 1016, slideMargin: 0, maxSlides: 1 }; var _slider = $('.bxslider').bxSlider(_opt); setTimeout(_slider.startAuto, 15000);

なお、スライドごとに秒数を変える方法もあるようです。 http://stackoverflow.com/questions/13700043/custom-pause-option-value-in-bxslider-on-each-slide

0 notes

shinobu · 9 years ago

Text

ラピッドサイトのVPSにa-blog cmsをインストールする

ラピッドサイトのVPS「 RVカスタムシリーズ」にa-blog cmsを納入する案件があり、下記の作業を行ったので覚え書きです。ターミナルにつながるのですがルート権限ではログインできず、必要な操作はコントロールパネルから行うようです。

http://契約ドメイン名/ControlPanel/を開き、左メニューの「ファイル管理」から「ファイル一覧」を開き「 /usr/local/php/etc/extensions.ini」を開く。 https://www.rapidsite.jp/support/guide_migration/reference/database/e_11344.html

必要なモジュールを有効にするため、extensionの前のセミコロンを外す extension=spl.so extension=simplexml.so extension=dom.so extension=zlib.so

ionCubeをインストールするため、下記の記述を追加する（あらかじめ該当のディレクトリにioncubeのファイルをアップしておく） zend_extension="/var/www/html/ioncube/ioncube_loader_lin_5.2.so"

保存したら、コントロールパネル左メニューの「システム管理」の「サービス管理」から「httpd」を「再起動」する。

a-blog cmsの必要ファイルをアップロードする。直下の.httaccessに下記記述を追記する Options +FollowSymLinks

0 notes

shinobu · 9 years ago

Text

PHP5のプログラムをPHP4で動くようにする

ありえない話ですが、PHP5向けに書かれたプログラムを納品しようと思ったら、納入先のサーバがPHP4だったので急ぎプログラムを書き直しました。その際の作業の覚え書きです。それぞれbefore/afterです。

アクセス権宣言を削除1

public static function myFunc()

functionmyFunc()

アクセス権宣言を削除2

public $variable;

var $variable;

キーワード指定を削除

self::myFunc()

$this = new myClass(); $this->myFunc()

コンストラクタが動くように記述を追記

function myClass() { $this->__construct(); }

事前に調べておくべきでしたし、セキュリティ的に問題があることは自明ですが、いまだにPHP4のサーバを使っているような案件なので、このような事故は起きるべくして起きたといえるでしょう。追々調整するとして、請負業のサラリーマンの私は納入を優先し対応しました。日本にはこのような事件はまだまだ起きているのではないかと思いメモしておきます。